import React, { useState } from 'react';

import { ConvertedModel } from '@/modules/feeds/Editor/components/FormTabs/ModelTab/helpers';
import { isValidJSON } from '@/modules/feeds/Editor/helpers';

import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  JSONEditor,
  Stack,
  Typography,
} from '@/mui/components';

import styles from './ModelEditDialog.module.scss';

type PropTypes = {
  model: ConvertedModel;
  value: string;
  onClose: () => void;
  onSave: (json: string) => void;
};

function ModelEditDialog({ model, value, onClose, onSave }: PropTypes) {
  const [json, setJson] = useState(value);
  const isValid = isValidJSON(json);

  const handleClose = () => onClose();
  const handleSave = () => {
    onSave(json);
    onClose();
  };

  return (
    <Dialog open={!!model} onClose={handleClose} maxWidth="x2l" fullWidth>
      <DialogTitle onClose={handleClose}>
        Edit {model.displayName}: {model.model} Parameters
      </DialogTitle>

      <DialogContent>
        <Stack direction="row" spacing={3} alignItems="flex-start">
          <Stack className={styles.Container} spacing={2}>
            <Stack direction="row" alignItems="center" spacing={2} justifyContent="space-between">
              <Typography variant="subtitle2" color="text.primary" fontWeight={500}>
                Parameters
              </Typography>
              {!isValid && (
                <Typography variant="caption" color="error.main">
                  The JSON is invalid
                </Typography>
              )}
            </Stack>
            <Stack fullWidth className={styles.JsonContent}>
              <JSONEditor value={json} minRows={20} maxRows={20} onChange={(jsonString) => setJson(jsonString)} />
            </Stack>
          </Stack>

          <Stack className={styles.Container} spacing={2}>
            <Typography variant="subtitle2" color="text.primary" fontWeight={500}>
              Description
            </Typography>
            <Stack fullWidth className={styles.DescriptionContent}>
              <ul>
                <li>{`Model description: ${model.description}`}</li>
                {model?.parameters?.length ? (
                  <li>
                    Parameters:
                    <ul>
                      {model.parameters.map((param) => (
                        <li key={param}>{param}</li>
                      ))}
                    </ul>
                  </li>
                ) : null}
                {model.example && (
                  <li>
                    Example:
                    <pre>{model.example}</pre>
                  </li>
                )}
              </ul>
            </Stack>
          </Stack>
        </Stack>
      </DialogContent>

      <DialogActions>
        <Button variant="outlined" color="primary" size="small" onClick={handleClose}>
          Cancel
        </Button>
        <Button variant="contained" color="primary" size="small" disabled={!isValid} onClick={handleSave}>
          Update
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default ModelEditDialog;
