"use client";
import { useState, type FC } from "react";
import { HiEye, HiPlus } from "react-icons/hi";

import Button from "@/components/Button";
import SubZoneForm from "@/components/sub-zone/sub-zone-form";
import ZoneForm from "@/components/zone/zone-form";
import ZoneList from "@/components/zone/zone-list";
import { usePermission } from "@/utils/auth/permission";
import { useRouter } from "next/navigation";

const ZoneListContent: FC = () => {
  const [zoneIds, setZoneIds] = useState([]);
  const [isOpen, setOpen] = useState(false);
  const [isOpenBox, setOpenBox] = useState(false);
  const router = useRouter();
  return (
    <>
      <div className="block items-center justify-between border-b border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800 sm:flex">
        <div className="mb-1 w-full">
          <div className="flex">
            <h1 className="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
              All Zones
            </h1>
            <div className="ml-auto flex items-center space-x-2 sm:space-x-3">
              {usePermission("zones.create") && (
                <>
                  <Button color="blue" onClick={() => setOpen(true)}>
                    <HiPlus className="text-xl" />
                    Add Zone
                  </Button>
                  <ZoneForm isOpen={isOpen} setOpen={setOpen} />
                </>
              )}
              {usePermission("sub-zones.create") && (
                <>
                  <Button
                    className="bg-emerald-900"
                    onClick={() => setOpenBox(true)}
                  >
                    <HiPlus className="text-xl" />
                    Add Box
                  </Button>
                  <SubZoneForm isOpen={isOpenBox} setOpen={setOpenBox} />
                </>
              )}
              {usePermission("sub-zones.access") && (
                <>
                  <Button
                    className="bg-emerald-950"
                    onClick={() => router.push("/sub-zones")}
                  >
                    <HiEye className="text-xl mr-2" />
                    <span>View Box</span>
                  </Button>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
      <div className="flex flex-col">
        <div className="overflow-x-auto">
          <div className="inline-block min-w-full align-middle">
            <div className="overflow-hidden shadow">
              <ZoneList setZoneIds={setZoneIds} zoneIds={zoneIds} />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default ZoneListContent;