import PopupWrapper from "../PopupWrapper";
import ActionsPopover from "../ui/ActionsPopover";
import MicrophoneFilledIcon from "../icons/MicrophoneFilledIcon";
import VideoOffFilledIcon from "../icons/VideoOffFilledIcon";
import HandRaisedFilledIcon from "../icons/HandRaisedFilledIcon";
import XMarkFilledIcon from "../icons/XMarkFilledIcon";

export default function ParticipantsPopup() {
  const participants = [1, 2, 3];
  return (
    <PopupWrapper title="Чат" draggable className="h-max">
      <div className="flex flex-col w-[21.667vw] relative">
        <ul className="flex flex-col gap-[1.111vw]">
          {participants.map((participant, index) => (
            <>
              <ParticipantItem key={participant} id={participant.toString()} />
              {index !== participants.length - 1 && (
                <div className="w-full h-[1px] bg-[#F6F6F6]" />
              )}
            </>
          ))}
        </ul>
      </div>
    </PopupWrapper>
  );
}

function ParticipantItem({ id }: { id: string }) {
  return (
    <div className="flex items-center justify-between w-full h-[2.5vw]">
      <div className="flex items-center gap-[0.833vw]">
        <div className="size-[2.5vw] rounded-full bg-[#F6F6F6]">
          <img
            src="/img/popups/MessageUserPfp.png"
            className="size-full object-cover"
            alt="user"
          />
        </div>
        <div className="flex flex-col gap-[0.278vw]">
          <span className="button-m">Иван Иванович {id}</span>
          <span className="caption-s text-[#CCCCCC]">Роль</span>
        </div>
      </div>

      <div>
        <ActionsPopover
          options={[
            {
              icon: <MicrophoneFilledIcon />,
              label: "Выключить микрофон",
              onClick: () => {},
            },
            {
              icon: <VideoOffFilledIcon />,
              label: "Выключить камеру",
              onClick: () => {},
              disabled: true,
            },
            {
              icon: <HandRaisedFilledIcon />,
              label: "Передать управление",
              onClick: () => {},
            },
            {
              icon: <XMarkFilledIcon />,
              label: "Удалить со встречи",
              onClick: () => {},
            },
          ]}
        />
      </div>
    </div>
  );
}
