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

import PageHeader from "@/components/PageHeder";
import ActionButton from "@/components/action-button";
import ClientList from "@/components/clients/client-list";
import { clientFilter } from "@/components/forms/schema/client-filter";
import { usePermission } from "@/utils/auth/permission";
import dynamic from "next/dynamic";
import Link from "next/link";
import { HiFilter, HiPlus } from "react-icons/hi";
import { useMediaQuery } from "@/hooks/use-media-query";
const FilterForm = dynamic(() => import("@/components/common/filter-form"));

const ClientListContent: FC = () => {
  const isMobile = useMediaQuery("(max-width: 768px)");
  const [filterValue, setFilter] = useState<string | null>(null);
  const [isLoading, setLoading] = useState(false);
  const [showFilter, setShowFilter] = useState(isMobile ? false : true);
  const [client_count, setClientCount] = useState(0);

  return (
    <>
      <PageHeader className="-mb-1">
        <div className="block border-gray-200 bg-white  dark:border-gray-700 dark:bg-gray-800">
          <div className=" 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">
                Clients ({client_count})
              </h1>
            </div>
            <div className="ml-auto flex items-center space-x-2 sm:space-x-3 justify-end">
              <ActionButton size="sm" color={showFilter ? "blue" : "white"} className="shadow" type="any" onClick={() => setShowFilter(!showFilter)}>
                <HiFilter className={`text-xl  ${showFilter ? "text-white" : "text-gray-900"}`} />
              </ActionButton>
              {usePermission("clients.create") && (
                <Link href="/clients/create">
                  <ActionButton
                    type="any"
                    isLoading={isLoading}
                    onClick={() => setLoading(true)}
                    size="sm"
                  >
                    <div className="flex">
                      {!isLoading && <HiPlus className="text-xl" />}
                      <span>Add</span>
                    </div>
                  </ActionButton>
                </Link>
              )}
            </div>
          </div>
        </div>
      </PageHeader>
      {showFilter && (
        <div className="block border-t dark:border-t dark:border-gray-600">
          <FilterForm schema={clientFilter} setFilter={setFilter} />
        </div>
      )}
      <div>
        <ClientList
          filterValue={filterValue}
          setClientCount={setClientCount}
        />
      </div>
    </>
  );
};

export default ClientListContent;