import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { List, ToggleSwitch, Tooltip } from "flowbite-react";
import { FC, useEffect, useState } from "react";
import { toast } from "react-toastify";
import Spinner from "../spinner";
type Options = { name: string, value: string };
type Props = {
    setting: any;
    option?: Options;
    setLoading?: (x: boolean) => void
};

const SwitcherList: FC<Props> = ({ setting, option, setLoading = () => { } }) => {
    const [switcher, setSwitcher] = useState(setting.settings[option.value] === 1 ? true : false);
    const queryClient = useQueryClient();

    const { mutate: updateTelegram, isPending } = useMutation<any>({
        mutationFn: async (settingData) => {
            const { data } = await axios({
                method: "post",
                url: "/api/company",
                data: settingData,
            });
            console.log(settingData);
            return data.data;
        },
        onSuccess: (data) => {
            toast.success(`Setting update successfully!`);
            queryClient.invalidateQueries({ queryKey: ["setting"] });
        },
        onError: () => { },
    });


    const setOptionSwitch = (event: any, option: Options) => {
        let data = {}
        if (event) {
            Object.assign(data, { [option.value]: 1 });
            setSwitcher(true);
        } else {
            Object.assign(data, { [option.value]: 0 })
            setSwitcher(false);
        }
        const setting = { settings: { ...data } }
        updateTelegram(setting as any);
    }

    useEffect(() => {
        setLoading(isPending);
    }, [isPending]);

    return (
        <div className="relative  my-3">
            <div className="mt-1" >
                <div className={`flex gap-4 my-2 font-medium items-end justify-start`}>
                    <List.Item className="list-none w-[200px]">{option?.name} </List.Item>
                    <div>:</div>
                    <div className="flex justify-start">
                        <ToggleSwitch
                            checked={switcher}
                            onChange={(event) => setOptionSwitch(event, option)}
                            color="green"
                            key={option.value}
                        />
                    </div>
                </div>
            </div>
        </div>

    );
};

export default SwitcherList;