import Button from "./ui/Button";
import DisclaimerButton from "./DisclaimerButton";
import MoreIcon from "./icons/MoreIcon";
import PrivacyPolicyButton from "./PrivacyPolicyButton";
import FullScreenButton from "./FullScreenButton";
import { useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import CloseIcon from "./icons/CloseIcon";

function ButtonGroup() {
  const [expanded, setExpanded] = useState(false);
  const [isFullScreen, setIsFullScreen] = useState(false);

  async function handleFullScreenClick() {
    try {
      if (isFullScreen) {
        await document.exitFullscreen();
      } else {
        // Проверяем поддержку полноэкранного режима
        if (!document.body.requestFullscreen) {
          console.warn("Полноэкранный режим не поддерживается");
          return;
        }
        await document.body.requestFullscreen();
      }
    } catch (error) {
      console.error("Ошибка при переключении полноэкранного режима:", error);
    }
  }

  return (
    <>
      <div className="absolute 2xl:bottom-[2.222vw] 2xl:right-[2.222vw] md:max-2xl:bottom-6 md:max-2xl:right-6 bottom-8 max-md:pb-8 right-4 max-md:overflow-hidden">
        <AnimatePresence>
          {(innerWidth >= 768 || expanded) && (
            <motion.div
              initial={innerWidth < 768 ? { y: "100%", opacity: 0 } : {}}
              animate={innerWidth < 768 ? { y: "0%", opacity: 1 } : {}}
              exit={innerWidth < 768 ? { y: "100%", opacity: 0 } : {}}
              transition={{ bounce: 0 }}
              className="max-w-full flex justify-end items-center 2xl:gap-[0.556vw] gap-2 max-md:flex-col"
            >
              <DisclaimerButton />
              <PrivacyPolicyButton />
              <FullScreenButton
                isFullScreen={isFullScreen}
                onFullScreenChange={setIsFullScreen}
                onClick={handleFullScreenClick}
              />
            </motion.div>
          )}
        </AnimatePresence>
      </div>
      <Button
        onlyIcon
        variant="secondary"
        className="absolute md:hidden right-4 bottom-4"
        onClick={() => setExpanded((prev) => !prev)}
      >
        <span className="size-5">
          {expanded ? <CloseIcon /> : <MoreIcon />}
        </span>
      </Button>
    </>
  );
}

export default ButtonGroup;