scheduler-front/src/ui/component/schedule/popover/ParticipantPopover.tsx

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";
import { CircleSmall, PlusIcon, SearchIcon } from "lucide-react";
import { useEffect, useState } from "react";

const dummyUser = [
  {
    accountId: "dummy1",
    name: "더미1"
  },
  {
    accountId: "test2",
    name: "테스트2"
  },
  {
    accountId: "dummy3",
    name: "테스트3"
  },
  {
    accountId: "test4",
    name: "더미4"
  }
]

interface ParticipantPopoverProps {
  participantList: string[];
  setParticipantList: (list: string[]) => void;
}

export const ParticipantPopover = ({ participantList, setParticipantList }: ParticipantPopoverProps) => {
  const [open, setOpen] = useState(false);
  const [filterString, setFilterString] = useState('');
  const [userList, setUserList] = useState(dummyUser);
  const [tempList, setTempList] = useState(participantList);
  const updateTempList = (accountId: string) => {
    if (tempList.includes(accountId)) {
      setTempList(tempList.filter((id) => id !== accountId));
    } else {
      setTempList([...tempList, accountId]);
    }
  }
  const applyList = () => {
    setParticipantList(tempList);
    setOpen(false);
  }

  const cancelList = () => {
    setOpen(false);
    setTimeout(() => {
      setTempList(participantList);
    }, 150);
  }

  return (
    <div className="w-full h-10 flex flex-row justify-start items-center">
      <Popover
        open={open}
        onOpenChange={setOpen}
      >
        <PopoverTrigger asChild>
          <Button
            className={cn(
              !open
              ? "bg-white text-indigo-300 hover:bg-indigo-300 hover:text-white"
              : "bg-indigo-300 text-white hover:bg-indigo-300!"
              
            )}
            type="button"
          >
            <PlusIcon
            />
            <span>
              참여자 추가
            </span>
          </Button>
        </PopoverTrigger>
        <PopoverContent
          align="end"
          side="right"
          className="py-0 px-0 w-60 h-80 flex flex-col justify-start items-start"
        >
          <div
            className="flex flex-row items-center px-3 h-10 w-full border-b border-b-indigo-100"
          >
            <SearchIcon size={16} className="stroke-indigo-300" />
            <Input
              placeholder="검색"
              value={filterString}
              onChange={(value) => setFilterString(value.target.value)}
              className="shadow-none placeholder-indigo-300! focus-visible:placeholder-indigo-400! flex-1 focus-visible:ring-0 focus-visible:border-0 border-0"
            />
          </div>
          <ScrollArea
            className="w-full h-60 flex flex-col"
          >
            {
              userList.filter((user) => user.accountId.includes(filterString)).map((user, idx) => (
                <div
                  className={cn(
                    "w-full h-10 flex flex-row items-center",
                    "hover:bg-indigo-50",
                    (idx !== dummyUser.length - 1)
                    ? "border-b border-b-indigo-100"
                    : null
                  )}
                  onClick={() => updateTempList(user.accountId)}
                >
                  <div
                    className="flex-11 flex flex-col"
                  >
                    <div className="pl-2 flex-1 text-sm align-middle">
                      {user.name}
                    </div>
                    <div className="pl-2 flex-1 text-[10px] text-gray-400 align-middle">
                      @{user.accountId}
                    </div>
                  </div>
                  <div
                    className="flex-1 flex items-center justify-center pr-2"
                  >
                    <div className={cn(
                      "w-5 h-5 rounded-full bg-gray-100 flex justify-center items-center",
                      !tempList.includes(user.accountId)
                      ? "border-gray-200 border"
                      : "border-indigo-300 border-2"
                    )}>
                      { tempList.includes(user.accountId) && <div className="w-2.5 h-2.5 rounded-full bg-indigo-300" />}
                    </div>
                  </div>
                </div>
              ))
            }
          </ScrollArea>
          <div
            className="border-t border-t-indigo-100 w-full h-10 flex flex-row cursor-default"
          >
            <div
              className={cn(
                "flex-5 h-full flex flex-row justify-center items-center transition-all duration-150",
                "bg-white text-indigo-300",
                "hover:bg-indigo-300 hover:text-white"
              )}
              onClick={applyList}
            >
              확인
            </div>
            <div
              className={cn(
                "flex-5 h-full flex flex-row justify-center items-center transition-all duration-150",
                "bg-white text-red-400",
                "hover:bg-red-400 hover:text-white"
              )}
              onClick={cancelList}
            >
              취소
            </div>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  )
}