import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { ToggleSwitch, Tooltip } from "flowbite-react";
import { FC, useEffect, useState } from "react";
import { toast } from "react-toastify";
import Spinner from "../spinner";
type Props = {
  setting: any;
  option?: any;
};

const Switcher: FC<Props> = ({ setting, option }) => {
  const [optionSwitch, setOptionSwitch] = useState(false);
  const queryClient = useQueryClient();

  const { mutate: updateStatus, isPending } = useMutation<any>({
    mutationFn: async (settingData) => {
      const { data } = await axios({
        method: "post",
        url: "/api/company",
        data: settingData,
      });
      return data.data;
    },
    onSuccess: (data) => {
      toast.success(`Setting update successfully!`);
    },
    onError: () => {},
  });

  useEffect(() => {
    console.log(setting?.settings[option]);
    if (setting?.settings[option] === 1) {
      setOptionSwitch(true);
    }
  }, [option]);

  const update = () => {
    const data = {
      settings: {
        [option]: setting?.settings[option] === 1 ? 0 : 1,
      },
    };
    console.log(data);
    updateStatus(data as any);
  };

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

export default Switcher;