import { usePermission } from "@/utils/auth/permission";
import { putData } from "@/utils/fetch";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { ToggleSwitch, Tooltip } from "flowbite-react";
import { FC, useEffect, useState } from "react";
import { toast } from "react-toastify";
import { TSclientSchema } from "../forms/schema/client";
import Spinner from "../spinner";
type Props = {
  client: TSclientSchema;
};

const ClientStatus: FC<Props> = ({ client }) => {
  const [status, setStatus] = useState(true);
  const queryClient = useQueryClient();
  const permission = usePermission("clients.status")

  const { mutate: updateStatus, isPending } = useMutation<TSclientSchema>({
    mutationFn: async (clientData: any) => {
      const api_url = `/api/v1/client-status/${client?.id}`;
      const { data } = await putData(api_url, clientData);
      return data;
    },
    onSuccess: (data) => {
      const status = data?.status === 1 ? "active" : "inactive";
      toast.success(`Client ${status} successfully`);
      queryClient.invalidateQueries({ queryKey: ["clients"] });
    },
    onError: () => { },
  });

  useEffect(() => {
    if (client?.status === 0) {
      setStatus(false);
    }
  }, [client]);

  const update = () => {
    const data = {
      status: status === true ? 0 : 1,
    };
    updateStatus(data as any);
  };

  return (
    <div className="relative">
      {permission ? (
        <>
          {isPending ? (
            <Spinner className="ml-3" />
          ) : (
            <div className={`flex items-center`} onClick={() => update()}>
              <Tooltip content={`${status ? "Active" : "Inactive"}`}>
                <ToggleSwitch
                  className={`client-status-${status ? "active" : "inactive"}`}
                  checked={status}
                  onChange={setStatus}
                  color="green"
                />
              </Tooltip>
            </div>
          )}
        </>
      ) : (
        <Tooltip content={`${status ? "Active" : "Inactive"}`}>
          <ToggleSwitch
            checked={status}
            onChange={() => undefined}
            color="green"
          />
        </Tooltip>
      )}
    </div>
  );
};

export default ClientStatus;