import { Component } from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';

const taxPillSx = {
  height: 28,
  fontSize: 13,
  fontWeight: 600,
  '& .MuiChip-label': { px: 1 },
};

export class TaxRatePills extends Component {
  render() {
    const { rates, selected, onSelect, readOnly } = this.props;
    return (
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, minHeight: 28 }}>
        {rates.map((rate) => {
          const active = Number(selected) === Number(rate);
          return (
            <Chip
              key={rate}
              size="small"
              label={`${rate} %`}
              onClick={readOnly || !onSelect ? undefined : () => onSelect(rate)}
              sx={{
                ...taxPillSx,
                visibility: active || !readOnly ? 'visible' : 'hidden',
                bgcolor: active ? 'rgba(0, 0, 0, 0.14)' : 'rgba(0, 0, 0, 0.06)',
                ...(readOnly
                  ? {}
                  : {
                      cursor: 'pointer',
                      '&:hover': { bgcolor: 'rgba(0, 0, 0, 0.12)' },
                    }),
              }}
            />
          );
        })}
      </Box>
    );
  }
}

export class PriceTaxRow extends Component {
  render() {
    const { rates, selected, onSelectTax, readOnly, onOpenTiers } = this.props;
    return (
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 0.5,
          flexWrap: 'wrap',
          minHeight: 36,
        }}
      >
        <TaxRatePills
          rates={rates}
          selected={selected}
          onSelect={onSelectTax}
          readOnly={readOnly}
        />
        <IconButton
          type="button"
          size="small"
          aria-label="Staffelpreise"
          disabled={readOnly}
          onClick={readOnly ? undefined : onOpenTiers}
          sx={{
            p: 0.5,
            visibility: readOnly ? 'hidden' : 'visible',
            pointerEvents: readOnly ? 'none' : 'auto',
          }}
        >
          <LayersOutlinedIcon sx={{ fontSize: 28 }} />
        </IconButton>
      </Box>
    );
  }
}