dashfront/src/components/brand/ArtikelMarke.jsx

import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import ListItem from '@mui/material/ListItem';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import ImageSearchIcon from '@mui/icons-material/ImageSearch';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
import { enqueueSnackbar } from 'notistack';
import brandAutomat from '../../automats/brandAutomat';
import { notifyError } from '../../utils/notify';
import BrandThumb from './BrandThumb';
import BrandImageSearchDialog from './BrandImageSearchDialog';
import BrandLogoPreviewDialog from './BrandLogoPreviewDialog';

class ArtikelMarke extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      draft: props.brand?.name ?? '',
      logoOpen: false,
      previewOpen: false,
    };
  }

  componentDidUpdate(prevProps) {
    if (prevProps.brand?.name !== this.props.brand?.name) {
      this.setState({ draft: this.props.brand?.name ?? '' });
    } else if (prevProps.disabled && !this.props.disabled) {
      if (this.state.draft !== this.props.brand?.name) {
        this.setState({ draft: this.props.brand?.name ?? '' });
      }
    }
  }

  hasLogo = () => Boolean(this.props.brand?.pics?.[0]?.fullHash || this.props.brand?.pics?.[0]?.thumbHash);

  handleChange = (next) => {
    this.setState({ draft: next });
    this.props.onChange?.(next, this.props.brand);
  };

  handleBlur = () => {
    const { brand } = this.props;
    const draft = this.state.draft.trim();
    if (!draft) {
      this.setState({ draft: brand?.name ?? '' });
      return;
    }
    if (draft !== brand?.name) {
      void this.renameBrand(brand, draft);
    }
  };

  async renameBrand(brand, name) {
    try {
      await brandAutomat.actions.rename(brand.id, { name });
      enqueueSnackbar('Marke gespeichert.', { variant: 'success' });
    } catch (err) {
      this.setState({ draft: brand?.name ?? '' });
      notifyError(err);
    }
  }

  handleKeyDown = (event) => {
    const { brand } = this.props;
    if (event.key === 'Enter') {
      event.preventDefault();
      event.target.blur();
    }
    if (event.key === 'Escape') {
      event.preventDefault();
      this.setState({ draft: brand?.name ?? '' });
      event.target.blur();
    }
  };

  handleSearchLogo = () => {
    this.setState({ logoOpen: true, previewOpen: false });
  };

  handleLogoClose = () => {
    this.setState({ logoOpen: false });
  };

  handleThumbClick = () => {
    if (this.props.disabled || !this.hasLogo()) return;
    this.setState({ previewOpen: true });
  };

  handlePreviewClose = () => {
    this.setState({ previewOpen: false });
  };

  handleDelete = () => {
    const { brand } = this.props;
    if (!window.confirm(`Marke „${brand.name}" wirklich löschen?`)) return;
    void (async () => {
      try {
        await brandAutomat.actions.remove(brand.id);
        enqueueSnackbar('Marke gelöscht.', { variant: 'success' });
      } catch (err) {
        notifyError(err);
      }
    })();
  };

  render() {
    const { brand, disabled, sx } = this.props;
    const { draft, logoOpen, previewOpen } = this.state;
    const name = brand?.name ?? '';
    const hasLogo = this.hasLogo();

    return (
      <>
        <ListItem
          disableGutters
          sx={{ gap: 1, py: 0.75, alignItems: 'center', width: '100%', minWidth: 0, ...sx }}
        >
          {hasLogo ? (
            <Box
              component="span"
              onClick={this.handleThumbClick}
              sx={{
                display: 'inline-flex',
                flexShrink: 0,
                borderRadius: 1,
                cursor: disabled ? 'default' : 'pointer',
                '&:hover': disabled ? undefined : { opacity: 0.8 },
              }}
            >
              <BrandThumb brand={brand} size={40} />
            </Box>
          ) : (
            <IconButton
              aria-label={`Logo für „${name}" suchen`}
              disabled={disabled}
              onClick={this.handleSearchLogo}
              sx={{ width: 40, height: 40, flexShrink: 0 }}
            >
              <ImageSearchIcon sx={{ fontSize: 24 }} />
            </IconButton>
          )}

          <SingleLineTextEdit
            size="small"
            label=""
            value={draft}
            disabled={disabled}
            onChange={this.handleChange}
            onBlur={this.handleBlur}
            onKeyDown={this.handleKeyDown}
            sx={{ flex: 1, minWidth: 0 }}
          />

          <IconButton
            aria-label={`„${name}" löschen`}
            disabled={disabled}
            onClick={this.handleDelete}
            sx={{ width: 40, height: 40, flexShrink: 0 }}
          >
            <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
          </IconButton>
        </ListItem>
        {logoOpen ? (
          <BrandImageSearchDialog
            open
            brand={brand}
            onClose={this.handleLogoClose}
          />
        ) : null}
        {previewOpen ? (
          <BrandLogoPreviewDialog
            open
            brand={brand}
            disabled={disabled}
            onClose={this.handlePreviewClose}
            onSearchNew={this.handleSearchLogo}
          />
        ) : null}
      </>
    );
  }
}

export default ArtikelMarke;