import { Component } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import Alert from '@mui/material/Alert';
import BackendError from './BackendError';
import SingleLineTextEdit from './SingleLineTextEdit';
import { backendErrorFrom, isBackendFailure } from '../utils/backendError';

/**
 * Single-field name dialog (create/edit).
 * Props: open, title, submitLabel, onClose, onSubmit({ name }),
 * optional initialName (form start value when opened).
 */
class NameDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      busy: false,
      error: null,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  componentDidUpdate(prevProps) {
    if (this.props.open && !prevProps.open) {
      this.setState({
        name: this.props.initialName ?? '',
        busy: false,
        error: null,
      });
    }
  }

  handleClose() {
    if (this.state.busy) return;
    this.props.onClose();
  }

  async handleSubmit(event) {
    event.preventDefault();
    const name = this.state.name.trim();
    if (!name) {
      this.setState({ error: 'Bitte Name eingeben.' });
      return;
    }

    this.setState({ busy: true, error: null });
    try {
      await this.props.onSubmit({ name });
      this.props.onClose();
    } catch (err) {
      this.setState({ error: backendErrorFrom(err), busy: false });
    }
  }

  render() {
    const { open, title, submitLabel } = this.props;
    const { name, busy, error } = this.state;
    const canSave = name.trim() !== '';

    return (
      <Dialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
        <DialogTitle>{title}</DialogTitle>
        <Box component="form" onSubmit={this.handleSubmit} noValidate>
          <DialogContent>
            {error ? (
              isBackendFailure(error) ? (
                <BackendError error={error} sx={{ mb: 2 }} />
              ) : (
                <Alert severity="error" sx={{ mb: 2 }}>
                  {typeof error === 'string' ? error : error.message}
                </Alert>
              )
            ) : null}

            <SingleLineTextEdit
              required
              autoFocus
              label="Name"
              value={name}
              disabled={busy}
              onChange={(nextName) => this.setState({ name: nextName })}
            />
          </DialogContent>
          <DialogActions sx={{ px: 3, pb: 2 }}>
            <Button type="button" onClick={this.handleClose} disabled={busy}>
              Abbrechen
            </Button>
            <Button type="submit" variant="contained" disabled={busy || !canSave}>
              {submitLabel}
            </Button>
          </DialogActions>
        </Box>
      </Dialog>
    );
  }
}

export default NameDialog;