import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
import { enqueueSnackbar } from 'notistack';
import brandAutomat from '../../automats/brandAutomat';
import { notifyError } from '../../utils/notify';

// Own component so typing a new brand name never rerenders ArtikelMarkenPage
// (and its FillSpace measurement). Holds the draft locally and performs the
// automat mutation itself — no callbacks.
class ArtikelMarkeNew extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { newName: '' };
  }

  async submit() {
    const name = this.state.newName.trim();
    if (!name) return;
    try {
      const row = await brandAutomat.actions.create({ name });
      enqueueSnackbar(`Marke „${row.name || name}" angelegt.`, { variant: 'success' });
      this.setState({ newName: '' });
    } catch (err) {
      notifyError(err);
    }
  }

  render() {
    const { rowRef } = this.props;
    const { newName } = this.state;
    return (
      <Box ref={rowRef} sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2, pb: 2 }}>
        <SingleLineTextEdit
          size="small"
          value={newName}
          onChange={(next) => this.setState({ newName: next })}
          onKeyDown={(event) => {
            if (event.key === 'Enter') {
              event.preventDefault();
              void this.submit();
            }
          }}
          sx={{ flex: 1 }}
        />
        <Button
          variant="contained"
          size="small"
          disabled={!newName.trim()}
          onClick={() => void this.submit()}
        >
          Hinzufügen
        </Button>
      </Box>
    );
  }
}

export default ArtikelMarkeNew;