"use client";
import { usePermission } from "@/utils/auth/permission";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Alert, Spinner } from "flowbite-react";
import { FC, useState } from "react";
import { HiInformationCircle } from "react-icons/hi";
import ActionButton from "../action-button";
import DeleteRecord from "../common/delete-record";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";

import { cellIndex } from "@/utils/lib/helpers";
import { CiWallet } from "react-icons/ci";
import MoneyFormat from "../common/money";
import WalletRechargeForm from "../common/wellat-recharge";
import { TScompanySchema } from "../forms/schema/company";
import CompanyEdit from "./company-edit";

type props = {
  initCompany: TScompanySchema;
  initPagination: any;
};

const CompanyList: FC<props> = ({ initCompany, initPagination }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pagination, setPagination] = useState<any>(initPagination);
  const [isOpen, setOpen] = useState(false);
  const [company_id, setCompanyId] = useState<string | null>(null);

  const onPageChange = (page: number) => setCurrentPage(page);
  const getCompany = async () => {
    const {
      data: { data },
      data: {
        data: { pagination },
      },
    } = await axios.get(`/api/companies?page=${currentPage}`);
    setPagination(pagination);
    return data?.data;
  };
  const {
    data: companies,
    isLoading,
    isError,
    error = {} as any,
  } = useQuery({
    queryKey: ["companies", { currentPage }],
    placeholderData: keepPreviousData,
    queryFn: () => getCompany(),
    retry: 0,
    initialData: initCompany,
  });

  const columns = [
    {
      header: "SL",
      cell: ({ row }: any) => (
        <div className="font-bold">{cellIndex(row.index, pagination)}</div>
      ),
    },
    {
      header: "name",
      accessorKey: "name",
    },
    {
      header: "domain",
      accessorKey: "domain",
    },
    {
      header: "clients",
      accessorKey: "client_count",
      cell: ({ row }: any) => {
        const company = row.original;
        return <>{company?.clients?.length}</>;
      },
    },
    {
      header: "Phone",
      accessorKey: "phone",
    },
    {
      header: "balance",
      accessorKey: "balance",
      cell: ({ row }: any) => {
        const wallet = row.original?.wallet;
        return (
          <div className="font-semibold flex">
            Balance:
            <MoneyFormat amount={wallet?.balance} />
          </div>
        );
      },
    },
    {
      header: "status",
      accessorKey: "status",
    },
    {
      header: "email",
      accessorKey: "email",
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const company = row.original;
        const company_id: string = String(company.id);
        const [isOpen, setOpen] = useState(false);
        return (
          <>
            <div className=" flex">
              <div className="mr-2">
                {usePermission("companies.edit") && (
                  <ActionButton
                    type="edit"
                    onClick={() => {
                      setOpen(true);
                      setCompanyId(company_id);
                    }}
                  />
                )}
              </div>
              {usePermission("companies.delete") && (
                <DeleteRecord
                  name="Company"
                  url={`/api/companies/${company_id}`}
                  keys="companies"
                />
              )}
              {usePermission("companies.edit") && (
                <div>
                  <ActionButton
                    size="sm"
                    className="ml-2 px-0 bg-gray-50"
                    type="any"
                    onClick={() => setOpen(true)}
                  >
                    <CiWallet className="text-blue-600" />
                  </ActionButton>
                  <WalletRechargeForm
                    company={company}
                    isOpen={isOpen}
                    setOpen={setOpen}
                  />
                </div>
              )}
            </div>
          </>
        );
      },
    },
  ];

  return (
    <>
      {isLoading && (
        <div className="text-center">
          <Spinner
            aria-label="Center-aligned spinner example"
            className="mt-20"
            size="xl"
          />
        </div>
      )}
      {isError && (
        <Alert color="failure" icon={HiInformationCircle}>
          <span className="font-medium">Info alert!</span>
          {error?.response?.data?.error?.message}
        </Alert>
      )}
      {isOpen && (
        <CompanyEdit
          companyId={company_id}
          setOpen={setOpen as () => void}
          isOpen={isOpen}
        />
      )}
      {companies !== undefined && (
        <div className="user-list pb-20 shadow-md">
          <div className="border-b overflow-x-auto">
            <DataTable
              data={companies}
              columns={columns}
              loading={isOpen}
              initSorting={{ id: "voucher", desc: false }}
            />
          </div>

          <CustomPagination
            currentPage={currentPage}
            onPageChange={onPageChange}
            pagination={pagination}
          />
        </div>
      )}
    </>
  );
};
export default CompanyList;