import { Component } from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import FormControl from '@mui/material/FormControl';
import IconButton from '@mui/material/IconButton';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import StraightenOutlinedIcon from '@mui/icons-material/StraightenOutlined';
import Switch from '@mui/material/Switch';
import TextInput from '../../TextInput';
import { findUnitBySi, unitLabel } from '../../../utils/units';

const priceUnitCornerSx = {
  position: 'absolute',
  top: 72,
  right: 4,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  gap: 1.25,
  zIndex: 2,
};

export class PriceUnitRow extends Component {
  render() {
    const {
      hasUnit,
      unitamount,
      unitSi,
      units,
      displaySymbol,
      onChangeAmount,
      onChangeSi,
      readOnly,
      amountError,
    } = this.props;
    const selected = findUnitBySi(units, unitSi);
    const symbol = selected?.symbol ?? displaySymbol ?? unitSi ?? '';

    if (readOnly) {
      return (
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, minHeight: 36 }}>
          {hasUnit && unitamount ? (
            <Chip
              size="medium"
              label={`${unitamount} ${symbol}`}
              sx={{
                height: 28,
                fontSize: 13,
                fontWeight: 600,
                bgcolor: 'rgba(0, 0, 0, 0.08)',
              }}
            />
          ) : null}
        </Box>
      );
    }

    if (!hasUnit) {
      return <Box sx={{ minHeight: 40 }} />;
    }

    return (
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 0.75,
          flexWrap: 'nowrap',
          minHeight: 40,
          minWidth: 0,
          width: '100%',
        }}
      >
        <TextInput
          label="Menge"
          value={unitamount}
          onChange={(event) => onChangeAmount(event.target.value)}
          error={amountError}
          sx={{ width: 88, flexShrink: 0 }}
          slotProps={{
            htmlInput: { inputMode: 'decimal' },
          }}
        />
        <FormControl size="small" sx={{ flex: 1, minWidth: 0, maxWidth: 160 }}>
          <InputLabel id="article-unit-si-label" shrink>
            Einheit
          </InputLabel>
          <Select
            labelId="article-unit-si-label"
            label="Einheit"
            value={unitSi}
            displayEmpty
            notched
            onChange={(event) => onChangeSi(event.target.value)}
            sx={{
              '& .MuiSelect-select': {
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              },
            }}
          >
            {units.map((row) => (
              <MenuItem key={row.si} value={row.si}>
                {unitLabel(row)}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Box>
    );
  }
}

export class PriceUnitCorner extends Component {
  render() {
    const { hasUnit, onToggleHasUnit, onOpenEditor } = this.props;
    return (
      <Box sx={priceUnitCornerSx}>
        <Switch
          size="small"
          checked={Boolean(hasUnit)}
          onChange={(event) => onToggleHasUnit(event.target.checked)}
          inputProps={{ 'aria-label': 'Einheit' }}
        />
        <IconButton
          type="button"
          size="small"
          aria-label="Einheiten bearbeiten"
          onClick={onOpenEditor}
          sx={{ p: 0.5 }}
        >
          <StraightenOutlinedIcon sx={{ fontSize: 28 }} />
        </IconButton>
      </Box>
    );
  }
}