dashfront/src/components/carrier/CarrierItem.jsx

import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import ListItem from '@mui/material/ListItem';
import Switch from '@mui/material/Switch';
import FormControlLabel from '@mui/material/FormControlLabel';
import Typography from '@mui/material/Typography';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
import { enqueueSnackbar } from 'notistack';
import companyAutomat from '../../automats/companyAutomat';
import { notifyError } from '../../utils/notify';

class CarrierItem extends PureComponent {
  constructor(props) {
    super(props);
    const item = props.carrier ?? props.item;
    this.state = {
      draft: item?.name ?? '',
    };
  }

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

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

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

  async updateCarrier(item, patch) {
    try {
      await companyAutomat.actions.updateCarrier(item.id, patch);
      enqueueSnackbar('Versandart gespeichert.', { variant: 'success' });
    } catch (err) {
      this.setState({ draft: item.name ?? '' });
      notifyError(err);
    }
  }

  handleToggleHasPackages = (e) => {
    if (this.props.disabled) return;
    const item = this.props.carrier ?? this.props.item;
    if (!item) return;
    const nextVal = e.target.checked;
    void this.updateCarrier(item, { hasPackages: nextVal });
  };

  handleToggleIsReverse = (e) => {
    if (this.props.disabled) return;
    const item = this.props.carrier ?? this.props.item;
    if (!item) return;
    const nextVal = e.target.checked;
    void this.updateCarrier(item, { isReverse: nextVal });
  };

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

  handleDelete = () => {
    if (this.props.disabled) return;
    const item = this.props.carrier ?? this.props.item;
    if (!item) return;
    if (!window.confirm(`Versandart „${item.name}“ wirklich löschen?`)) return;
    void (async () => {
      try {
        await companyAutomat.actions.removeCarrier(item.id);
        enqueueSnackbar('Versandart gelöscht.', { variant: 'success' });
      } catch (err) {
        notifyError(err);
      }
    })();
  };

  render() {
    const { disabled, sx } = this.props;
    const item = this.props.carrier ?? this.props.item;
    const { draft } = this.state;
    const name = item?.name ?? '';
    const hasPackages = Boolean(item?.hasPackages);
    const isReverse = Boolean(item?.isReverse);

    return (
      <ListItem
        disableGutters
        data-id={item?.id}
        sx={{
          gap: 1,
          py: 0.75,
          alignItems: 'center',
          width: '100%',
          minWidth: 0,
          flexWrap: { xs: 'wrap', sm: 'nowrap' },
          ...sx,
        }}
      >
        <Box
          className="drag-handle"
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: 40,
            height: 40,
            flexShrink: 0,
            color: 'text.disabled',
            cursor: disabled ? 'default' : 'grab',
            userSelect: 'none',
            touchAction: 'none',
            '&:hover': disabled ? undefined : { color: 'text.secondary' },
            transition: 'color 0.15s',
          }}
        >
          <DragIndicatorIcon sx={{ fontSize: 24, pointerEvents: 'none' }} />
        </Box>

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

        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexShrink: 0 }}>
          <FormControlLabel
            control={
              <Switch
                size="small"
                checked={hasPackages}
                disabled={disabled || !item}
                onChange={this.handleToggleHasPackages}
              />
            }
            label={
              <Typography variant="caption" sx={{ userSelect: 'none', fontWeight: 500 }}>
                Pakete
              </Typography>
            }
            sx={{ m: 0, gap: 0.5 }}
          />

          <FormControlLabel
            control={
              <Switch
                size="small"
                checked={isReverse}
                disabled={disabled || !item}
                onChange={this.handleToggleIsReverse}
              />
            }
            label={
              <Typography variant="caption" sx={{ userSelect: 'none', fontWeight: 500 }}>
                Retoure
              </Typography>
            }
            sx={{ m: 0, gap: 0.5 }}
          />
        </Box>

        <IconButton
          aria-label={`„${name}“ löschen`}
          disabled={disabled || !item}
          onClick={this.handleDelete}
          sx={{ width: 40, height: 40, flexShrink: 0 }}
        >
          <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
        </IconButton>
      </ListItem>
    );
  }
}

export default CarrierItem;