import React from 'react';

import { DIALOG_METADATA, ERROR_SPEECH_TO_TEXT_LANGUAGE_NOT_SUPPORTED } from './constants';
import { SPEECH_TO_TEXT_OPTIONS } from '@/modules/feeds/Editor/constants';

import { metadataLanguagesSelector } from '@/modules/feeds/Editor/redux/selectors';

import { useAppSelector } from '@/modules/@common/store/hooks';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } from '@/mui/components';

type PropTypes = {
  open: boolean;
  lang: string;
  speechProvider: string;
  model?: string;
  code: keyof typeof DIALOG_METADATA;
  configurationErrorCode?: string;
  onClose: () => void;
};

function ConfigurationErrorDialog({ open, lang, speechProvider, code, onClose }: PropTypes) {
  const langOptions = useAppSelector(metadataLanguagesSelector);

  const speechToTextProviderName =
    SPEECH_TO_TEXT_OPTIONS.find((option) => option.value === speechProvider)?.label || '';

  const langName = langOptions?.find((option) => option.code === lang)?.language || '';

  const metadata: { title: string; body?: string[] } = DIALOG_METADATA[code];

  let { title } = metadata;
  if (code === ERROR_SPEECH_TO_TEXT_LANGUAGE_NOT_SUPPORTED) {
    title = title.replaceAll('{speechToTextProviderName}', speechToTextProviderName).replaceAll('{langName}', langName);
  }

  return (
    <Dialog open={open} onClose={onClose} maxWidth="lg">
      <DialogTitle onClose={onClose}>Configuration error</DialogTitle>
      <DialogContent>
        <Stack spacing={2}>
          <Typography variant="subtitle1" color="text.primary" fontWeight={500}>
            {title}
          </Typography>
          {!!metadata?.body && (
            <Stack spacing={1}>
              {metadata.body.map((text, index) => (
                <Typography key={index} variant="subtitle1" color="text.secondary" fontWeight={400}>
                  {`- ${text}`}
                </Typography>
              ))}
            </Stack>
          )}
        </Stack>
      </DialogContent>
      <DialogActions>
        <Button variant="contained" color="primary" onClick={onClose}>
          Ok
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default ConfigurationErrorDialog;
