import { SaveButton } from "@/components/Common/SaveButton"
import { getSearchSettings, setSearchSettings } from "@/services/search"
import { getTTSSettings, setTTSSettings } from "@/services/tts"
import { SUPPORTED_SERACH_PROVIDERS } from "@/utils/search-provider"
import { useForm } from "@mantine/form"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { Select, Skeleton, Switch, InputNumber } from "antd"
import { useTranslation } from "react-i18next"

export const TTSModeSettings = ({ hideTitle }: { hideTitle?: boolean }) => {
  const { t } = useTranslation("settings")
  const queryClient = useQueryClient()

  const form = useForm({
    initialValues: {
      ttsEnabled: false,
      ttsProvider: "",
      voice: "",
      ssmlEnabled: false
    }
  })

  const { status, data } = useQuery({
    queryKey: ["fetchTTSSettings"],
    queryFn: async () => {
      const data = await getTTSSettings()
      form.setValues(data)
      return data
    }
  })

  if (status === "pending" || status === "error") {
    return <Skeleton active />
  }

  return (
    <div>
      {!hideTitle && (
        <div className="mb-5">
          <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
            {t("generalSettings.tts.heading")}
          </h2>
          <div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
        </div>
      )}
      <form
        onSubmit={form.onSubmit(async (values) => {
          await setTTSSettings(values)
        })}
        className="space-y-4">
        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
          <span className="text-gray-500 dark:text-neutral-50 ">
            {t("generalSettings.tts.ttsEnabled.label")}
          </span>
          <div>
            <Switch
              className="mt-4 sm:mt-0"
              {...form.getInputProps("ttsEnabled", {
                type: "checkbox"
              })}
            />
          </div>
        </div>
        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
          <span className="text-gray-500 dark:text-neutral-50 ">
            {t("generalSettings.tts.ttsProvider.label")}
          </span>
          <div>
            <Select
              placeholder={t("generalSettings.tts.ttsProvider.placeholder")}
              className="w-full mt-4 sm:mt-0 sm:w-[200px]"
              options={[{ label: "Browser TTS", value: "browser" }]}
              {...form.getInputProps("ttsProvider")}
            />
          </div>
        </div>
        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
          <span className="text-gray-500 dark:text-neutral-50 ">
            {t("generalSettings.tts.ttsVoice.label")}
          </span>
          <div>
            <Select
              placeholder={t("generalSettings.tts.ttsVoice.placeholder")}
              className="w-full mt-4 sm:mt-0 sm:w-[200px]"
              options={data?.browserTTSVoices?.map(
                (voice) =>
                  ({
                    label: `${voice.voiceName} - ${voice.lang}`.trim(),
                    value: voice.voiceName
                  }) || []
              )}
              {...form.getInputProps("voice")}
            />
          </div>
        </div>
        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
          <span className="text-gray-500 dark:text-neutral-50 ">
            {t("generalSettings.tts.ssmlEnabled.label")}
          </span>
          <div>
            <Switch
              className="mt-4 sm:mt-0"
              {...form.getInputProps("ssmlEnabled", {
                type: "checkbox"
              })}
            />
          </div>
        </div>

        <div className="flex justify-end">
          <SaveButton btnType="submit" />
        </div>
      </form>
    </div>
  )
}