import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import { FC, useState } from "react";
import { toast } from "react-toastify";
import { Select } from "../forms/Inputs";
type Props = {
  setting: any;
  option?: any;
};

const SmsSchedule: FC<Props> = ({ setting, option }) => {
  const [schedule, setSchedule] = useState<number | string>(
    setting?.settings[option] ?? 10
  );

  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: () => {},
  });

  const update = (scheduleTime: number) => {
    const data = {
      settings: {
        [option]: scheduleTime,
      },
    };
    updateStatus(data as any);
  };
  return (
    <div className="relative">
      <div
        className={`flex items-center`}
        onChange={(e: any) => update(e?.target?.value)}
      >
        <Select
          defaultValue={schedule}
          options={[
            { value: 7, label: "07:00 AM" },
            { value: 8, label: "08:00 AM" },
            { value: 9, label: "09:00 AM" },
            { value: 10, label: "10:00 AM" },
            { value: 11, label: "11:00 AM" },
            { value: 12, label: "12:00 PM" },
            { value: 13, label: "01:00 PM" },
            { value: 14, label: "02:00 PM" },
            { value: 15, label: "03:00 PM" },
            { value: 16, label: "04:00 PM" },
            { value: 17, label: "05:00 PM" },
            { value: 18, label: "06:00 PM" },
            { value: 19, label: "07:00 PM" },
            { value: 20, label: "08:00 PM" },
          ]}
          name="auto_invoice_schedule"
        />
      </div>
    </div>
  );
};

export default SmsSchedule;