import { isMobile } from "react-device-detect";
import DesktopIcon from "./icons/DesktopIcon";
import HandOnIcon from "./icons/HandOnIcon";
import MobileIcon from "./icons/MobileIcon";
import MoreIcon from "./icons/MoreIcon";
import Tooltip from "./Tooltip";
import Button from "./ui/Button";
import IUser from "../types/IUser";
import CloseIcon from "./icons/CloseIcon";
import { useState } from "react";
import { useClickAway } from "@uidotdev/usehooks";

interface Props {
  me: IUser;
  user: IUser;
  handleTransferControl: () => void;
  handleKick: () => void;
}

function User({ me, user, handleTransferControl, handleKick }: Props) {
  const [showMore, setShowMore] = useState(false);

  const ref = useClickAway<HTMLDivElement>(() => {
    setShowMore(false);
  });

  return (
    <div key={user.id} className="flex items-center gap-2">
      <div className="relative w-6 h-6 bg-[#E6ECF2] rounded-full flex items-center justify-center">
        <p className="text-xs font-semibold">{user.name[0]?.toUpperCase()}</p>
        {user?.isControlAllowed && (
          <div className="absolute bottom-0 right-0 bg-[#49A1F5] w-2 h-2 rounded-full border border-white"></div>
        )}
      </div>
      <p className="text-xs">{user.name}</p>
      <div className="text-[#CCCCCC]">
        {isMobile ? <MobileIcon /> : <DesktopIcon />}
      </div>

      {me.isAdmin && (
        <div ref={ref} className="relative">
          <Button
            variant="tertiary"
            icon={<MoreIcon />}
            onlyIcon
            onClick={() => setShowMore(true)}
          />
          <Tooltip text={"Действия"} />

          {showMore && (
            <div className="absolute py-2 mt-4 space-y-1 bg-white rounded-lg shadow w-60">
              {/* <button className="flex items-center gap-2 px-4 py-1 text-sm hover:bg-[#E6ECF2] transition-colors">
            <span className="text-[#77828C]">
              <MicroOnIcon />
            </span>
            <span>Отключить микрофон</span>
          </button> */}
              <button
                className="flex items-center w-full gap-2 px-4 py-1 text-sm hover:bg-[#E6ECF2] transition-colors"
                onClick={() => {
                  handleTransferControl();
                  setShowMore(false);
                }}
              >
                <span className="text-[#77828C]">
                  <HandOnIcon />
                </span>
                <span>Передать управление</span>
              </button>
              <button
                className="flex items-center w-full gap-2 px-4 py-1 text-sm hover:bg-[#E6ECF2] transition-colors"
                onClick={() => {
                  handleKick();
                  setShowMore(false);
                }}
              >
                <span className="text-[#EB5757]">
                  <CloseIcon />
                </span>
                <span>Исключить</span>
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

export default User;
