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

import ActionButton from "@/components/action-button";
import MikrotikPackageForm from "@/components/mikrotik-packages/mikrotik-package-form";
import MikrotikPackageList from "@/components/mikrotik-packages/miktorik-packages-list";
import { usePermission } from "@/utils/auth/permission";
import dynamic from "next/dynamic";
import { FormProvider, useForm } from "react-hook-form";
const DropdownList = dynamic(() => import("@/components/common/Dropdown"));

const MikrotikPackageContent: FC = () => {
  const [networkIds, setNetworkIds] = useState();
  const [isOpen, setOpen] = useState(false);
  const networkForm = useForm<any>();

  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 justify-between">
            <h1 className="flex-1 text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
              Mikrotik packages
            </h1>
            <div className="flex-1">
              <div className="w-[350px]">
                <FormProvider {...networkForm}>
                  <DropdownList
                    name="network"
                    idName="network_id"
                    getLabel={(network: any) => network?.name}
                    isMulti={false}
                    onChange={(network) => setNetworkIds(network?.value)}
                  />
                </FormProvider>
              </div>
            </div>
            <div className="flex-1 space-x-2 sm:space-x-3">
              {usePermission("networks.create") && (
                <div className="flex justify-end">
                  <ActionButton
                    type="any"
                    color="blue"
                    size="sm"
                    onClick={() => setOpen(true)}
                  >
                    <HiPlus className="text-xl" />
                    Add
                  </ActionButton>
                  <MikrotikPackageForm isOpen={isOpen} setOpen={setOpen} />
                </div>
              )}
            </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">
              <MikrotikPackageList networkId={networkIds} />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default MikrotikPackageContent;