import { FormInfo } from "@/components/FormCard";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { useGlobal } from "@/context/global";
import { permissionDefinition } from "@/lib/permissions";
import { AnimatePresence, motion } from "framer-motion";
import { useRef, useState } from "react";

export default function NewUserFormInfo({ form, setFormInfo }) {
  const { dict } = useGlobal();
  const containerRef = useRef<HTMLDivElement>(null);

  const [permission, setPermission] = useState("");

  const handleClosePermissions = () => {
    const container = containerRef.current;
    if (container) {
      container.style.setProperty("width", `${container.offsetWidth}px`);
      container.style.setProperty("transition", "width 0.2s ease-in-out");

      setTimeout(() => {
        container.style.setProperty("width", "0px");
        setTimeout(() => {
          setFormInfo(undefined);
        }, 200);
      }, 10);
    }
  };

  const handleSetPermissions = () => {
    form.setValue("permissions", permission);
    form.trigger("permissions");
    handleClosePermissions();
  };

  const permissions = [
    {
      value: permissionDefinition().user.toString(16),
      label: "USER",
      id: "user",
    },
    {
      value: permissionDefinition().admin.toString(16),
      label: "ADMIN",
      id: "admin",
    },
    { value: "1FFFFF", label: "ALL", id: "master" },
  ];

  return (
    <AnimatePresence>
      <motion.div
        initial={{ width: 0 }}
        animate={{ width: "auto" }}
        transition={{ duration: 0.2 }}
        ref={containerRef}
      >
        <FormInfo className="h-full">
          <div className="flex h-full flex-col gap-2">
            <div className="flex grow flex-col gap-4">
              <div className="flex flex-col gap-2 rounded bg-gray-100 p-2 text-black">
                <RadioGroup defaultValue="user">
                  {permissions.map(({ value, label, id }) => (
                    <div
                      key={id}
                      className="flex gap-1 rounded bg-white p-1 shadow"
                    >
                      <RadioGroupItem
                        value={value}
                        onClick={() => setPermission(value.toUpperCase())}
                        id={id}
                        className="rounded-sm"
                      />
                      <Label htmlFor={id}>{label}</Label>
                    </div>
                  ))}
                </RadioGroup>
              </div>
            </div>
            <div className="flex justify-end gap-2">
              <Button
                variant="solid"
                color="danger"
                onClick={handleClosePermissions}
              >
                {dict.pages.general.close}
              </Button>
              <Button
                variant="solid"
                color="success"
                onClick={handleSetPermissions}
              >
                {dict.pages.general.set}
              </Button>
            </div>
          </div>
        </FormInfo>
      </motion.div>
    </AnimatePresence>
  );
}