"use client";
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: Record<string, unknown> & { settings?: Record<string, unknown> };
  option: string;
};

const CHANNEL_OPTIONS = [
  { value: "sms", label: "SMS" },
  { value: "voice", label: "Voice Call" },
] as const;

const ChannelSelector: FC<Props> = ({ setting, option }) => {
  const currentValue = (setting?.settings?.[option] as string) ?? "sms";
  const [selected, setSelected] = useState<string>(currentValue);

  const { mutate: updateSetting } = useMutation({
    mutationFn: async (data: Record<string, unknown>) => {
      const { data: res } = await axios.post("/api/company", data);
      return res.data;
    },
    onSuccess: () => toast.success("Setting updated successfully!"),
  });

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const value = e.target.value;
    setSelected(value);
    updateSetting({ settings: { [option]: value } });
  };

  return (
    <div className="relative">
      <div className="flex items-center" onChange={handleChange}>
        <Select
          defaultValue={selected}
          options={[...CHANNEL_OPTIONS]}
          name={option}
        />
      </div>
    </div>
  );
};

export default ChannelSelector;