"use client";
import { useState, type FC } from "react";

import Button from "@/components/Button";
import FilterForm from "@/components/Filter";
import PageHeader from "@/components/PageHeder";
import ClientList from "@/components/clients/client-list";
import { clientFilter } from "@/components/forms/schema/client-filter";
import { usePermission } from "@/utils/auth/permission";
import Link from "next/link";
import { FaFilter } from "react-icons/fa";
import { HiPlus } from "react-icons/hi";

const ClientListContent: FC = () => {
  const [isOpen, setOpen] = useState(false);
  const [filterValue, setFilter] = useState("");
  return (
    <>
      <PageHeader>
        <div className="block border-gray-200 bg-white  dark:border-gray-700 dark:bg-gray-800">
          <div className="mb-1 w-full items-center justify-between flex">
            <div className="sm:flex">
              <h1 className="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
                All clients
              </h1>
            </div>
            <div className="ml-auto flex items-center space-x-2 sm:space-x-3 justify-end">
              {usePermission("clients.create") && (
                <Button color="blue">
                  <Link href="/clients/create">
                    <div className="flex">
                      <HiPlus className="text-xl" />
                      <span>Add client</span>
                    </div>
                  </Link>
                </Button>
              )}
              {usePermission("clients.access") && (
                <div className="filter">
                  <Button onClick={() => setOpen((open) => !open)}>
                    <FaFilter /> <span className="ml-1">Filter</span>
                  </Button>
                </div>
              )}
            </div>
          </div>
          {isOpen && (
            <div className="block mt-3">
              <FilterForm schema={clientFilter} setFilter={setFilter} />
            </div>
          )}
        </div>
      </PageHeader>

      <div className="flex flex-col">
        <div className="overflow-x-auto">
          <div className="inline-block min-w-full align-middle">
            <div className="overflow-hidden shadow">
              <ClientList filterValue={filterValue} />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default ClientListContent;