import { Component } from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import {
  TINT_CHIP,
  TINT_PILL_ACTIVE,
  TINT_STRONG,
} from '../../../colors';

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 ? TINT_PILL_ACTIVE : TINT_CHIP,
                ...(readOnly
                  ? {}
                  : {
                      cursor: 'pointer',
                      '&:hover': { bgcolor: TINT_STRONG },
                    }),
              }}
            />
          );
        })}
      </Box>
    );
  }
}

export class PriceTaxRow extends Component {
  render() {
    const { rates, selected, onSelectTax, readOnly } = 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}
        />
      </Box>
    );
  }
}