import React, { useState } from 'react';

import {
  SPEECH_TO_TEXT_OPTIONS,
  SPEECH_TO_TEXT_VERBIT_MANUAL_24H_VALUE,
  SPEECH_TO_TEXT_VERBIT_MANUAL_VALUE,
} from '@/modules/feeds/Editor/constants';

import type { GeneralSizeProp } from '@/mui/types';

import setupGetConfigurationErrorCode, {
  ConfigurationErrorOutputType,
} from '@/modules/feeds/Editor/components/Dialogs/ConfigurationErrorDialog/helpers/setupGetConfigurationErrorCode';
import { speechToTextProviderSelector } from '@/modules/feeds/Editor/redux/selectors';
import { setAction } from '@/modules/feeds/Editor/redux/slices';

import { useFormSettings } from '@/modules/@common/Form';
import { useAppDispatch, useAppSelector, useAppStore } from '@/modules/@common/store/hooks';
import ConfigurationErrorDialog from '@/modules/feeds/Editor/components/Dialogs/ConfigurationErrorDialog/ConfigurationErrorDialog';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, Select } from '@/mui/components';

type PropTypes = {
  disabled?: boolean;
};

function SpeechToTextProvider({ disabled = false }: PropTypes) {
  const dispatch = useAppDispatch();
  const { size } = useFormSettings();
  const store = useAppStore();

  const speechToTextProvider = useAppSelector(speechToTextProviderSelector);

  const [showExpensiveWarning, setShowExpensiveWarning] = useState<typeof speechToTextProvider | undefined>(undefined);
  const [configurationError, setConfigurationError] = useState<ConfigurationErrorOutputType>(null);

  const getConfigurationErrorCode = setupGetConfigurationErrorCode(store);

  const handleOnChange = (e: { target: { value: unknown } }) => {
    const value = e.target.value as typeof speechToTextProvider;

    const error = getConfigurationErrorCode({ inputSpeechToTextProvider: value });

    if (error) {
      setConfigurationError(error);
      return;
    }

    if ([SPEECH_TO_TEXT_VERBIT_MANUAL_VALUE, SPEECH_TO_TEXT_VERBIT_MANUAL_24H_VALUE].includes(value)) {
      setShowExpensiveWarning(value);
    } else {
      dispatch(setAction({ speechToTextProvider: value }));
    }
  };

  const handleCloseDialog = () => setShowExpensiveWarning(undefined);
  const handleContinueDialog = () => {
    if (showExpensiveWarning) {
      dispatch(setAction({ speechToTextProvider: showExpensiveWarning }));
      handleCloseDialog();
    }
  };

  return (
    <>
      <Select
        // placeholder="Speech To Text Provider"
        size={size as GeneralSizeProp}
        value={speechToTextProvider}
        disabled={disabled}
        onChange={handleOnChange}
      >
        {SPEECH_TO_TEXT_OPTIONS.map((option) => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </Select>
      {showExpensiveWarning && (
        <Dialog open={!!showExpensiveWarning} onClose={handleCloseDialog} maxWidth="md">
          <DialogTitle onClose={handleCloseDialog}>Warning</DialogTitle>
          <DialogContent>
            {SPEECH_TO_TEXT_OPTIONS.find((option) => option.value === showExpensiveWarning)?.label} incurs a significant
            cost, are you sure you want to continue?
          </DialogContent>
          <DialogActions>
            <Button variant="outlined" color="primary" size="small" onClick={handleCloseDialog}>
              Cancel
            </Button>
            <Button variant="contained" color="primary" size="small" onClick={handleContinueDialog}>
              Continue
            </Button>
          </DialogActions>
        </Dialog>
      )}

      {!!configurationError && (
        <ConfigurationErrorDialog
          code={configurationError.code}
          lang={configurationError.lang}
          speechProvider={configurationError.speechProvider}
          open={!!configurationError}
          onClose={() => setConfigurationError(null)}
        />
      )}
    </>
  );
}

export default SpeechToTextProvider;
