"use client"

import { InviteCard } from "@/components/cards/InviteCard";
import { Button } from "@/components/ui/button";
import { Command, CommandItem } from "@/components/ui/command";
import { Input } from "@/components/ui/input";
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
import { ChannelInvite } from "@/lib/db";
import { ChevronsUpDown } from "lucide-react";
import { useMemo, useState } from "react";
import { Channel, Server, User } from "revolt-api";

export default function ServerInviteList({ server, invites, channels, users }: {
  server: Server,
  invites: ChannelInvite[],
  channels?: Channel[],
  users?: User[],
}) {
  const [selectVanityOnly, setSelectVanityOnly] = useState(false);
  const [selectChannel, setSelectChannel] = useState(false);
  const [selectUser, setSelectUser] = useState(false);
  const [vanityOnly, setVanityOnly] = useState(false);
  const [channelFilter, setChannelFilter] = useState("");
  const [userFilter, setUserFilter] = useState("");
  
  const filteredInvites = useMemo(() => {
    return invites
      ?.filter(invite => vanityOnly ? invite.vanity : true)
      ?.filter(invite => channelFilter ? invite.channel == channelFilter : true)
      ?.filter(invite => userFilter ? invite.creator == userFilter : true)
      ?.reverse();
  }, [vanityOnly, channelFilter, userFilter, invites]);

  return (
    <div>
      <div className="flex gap-2">
        <Popover open={selectVanityOnly} onOpenChange={setSelectVanityOnly}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              role="combobox"
              aria-expanded={selectVanityOnly}
              className="flex-1 justify-between"
            >
              {vanityOnly ? "Vanity" : "All"}
              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-[200px] p-0">
            <Command>
              {[
                { value: false, label: "All" },
                { value: true, label: "Vanity" },
              ].map((option) => (
                <CommandItem
                  key={String(option.value)}
                  onSelect={async () => {
                    setSelectVanityOnly(false);
                    setVanityOnly(option.value);
                  }}
                >{option.label}</CommandItem>
              ))}
            </Command>
          </PopoverContent>
        </Popover>

        <Popover open={selectChannel} onOpenChange={setSelectChannel}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              role="combobox"
              aria-expanded={selectChannel}
              className="flex-1 justify-between"
            >
              {channelFilter
                ? (channels?.find(c => c._id == channelFilter) as any)?.name
                : "Select channel"}
              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-[200px] p-0">
            <Command>
              <CommandItem onSelect={async () => {
                    setSelectChannel(false);
                    setChannelFilter("");
                  }}
                >All channels</CommandItem>
              {channels?.map((channel) => (
                <CommandItem
                  key={String(channel._id)}
                  onSelect={async () => {
                    setSelectChannel(false);
                    setChannelFilter(channel._id);
                  }}
                >{'#' + (channel as any).name}</CommandItem>
              ))}
            </Command>
          </PopoverContent>
        </Popover>

        <Popover open={selectUser} onOpenChange={setSelectUser}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              role="combobox"
              aria-expanded={selectUser}
              className="flex-1 justify-between"
            >
              {userFilter
                ? `${users?.find(c => c._id == userFilter)?.username}#${users?.find(c => c._id == userFilter)?.discriminator}`
                : "Select user"}
              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-[200px] p-0">
            <Command>
            <CommandItem onSelect={async () => {
                    setSelectUser(false);
                    setUserFilter("");
                  }}
                >All users</CommandItem>
              {users?.map((user) => (
                <CommandItem
                  key={String(user._id)}
                  onSelect={async () => {
                    setSelectUser(false);
                    setUserFilter(user._id);
                  }}
                >{user.username}#{user.discriminator}</CommandItem>
              ))}
            </Command>
          </PopoverContent>
        </Popover>
      </div>

      {filteredInvites.map(invite => (<InviteCard
        invite={invite}
        channel={channels?.find(c => c._id == invite.channel)}
        user={users?.find(c => c._id == invite.creator)}
        key={invite._id}
      />))}
    </div>
  )
}