import { Component } from 'react';
import Box from '@mui/material/Box';
import Switch from '@mui/material/Switch';
import Typography from '@mui/material/Typography';
import { alpha } from '@mui/material/styles';

/** Base pill with elevation, shared styling, and an overridable trailing element. */
class ElevatedPill extends Component {
  renderTrailing() {
    return null;
  }

  render() {
    const { label, active = false } = this.props;
    return (
      <Box
        component="label"
        sx={(theme) => ({
          display: 'inline-flex',
          alignItems: 'center',
          gap: 0.5,
          px: 1.5,
          py: 0.25,
          borderRadius: 999,
          background: active
            ? `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.28)}, ${alpha(
                theme.palette.primary.main,
                0.22,
              )})`
            : `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.16)}, ${alpha(
                theme.palette.primary.main,
                0.10,
              )})`,
          color: 'text.primary',
          cursor: 'pointer',
          userSelect: 'none',
          boxShadow: theme.shadows[1],
          transition: 'background 150ms ease, box-shadow 150ms ease',
        })}
      >
        <Typography variant="body2" sx={{ lineHeight: 1 }}>
          {label}
        </Typography>
        {this.renderTrailing()}
      </Box>
    );
  }
}

export class ToggleElevatedPill extends ElevatedPill {
  renderTrailing() {
    const { checked, onToggle } = this.props;
    return (
      <Switch
        size="small"
        checked={checked}
        onChange={(event) => onToggle(event.target.checked)}
        sx={(theme) => ({
          '& .MuiSwitch-switchBase': {
            color: checked ? 'success.main' : 'grey.300',
          },
          '& .Mui-checked': {
            color: 'success.main',
          },
          '& .Mui-checked + .MuiSwitch-track': {
            backgroundColor: alpha(theme.palette.success.main, 0.35),
          },
        })}
      />
    );
  }
}

export class ActionElevatedPill extends ElevatedPill {
  renderTrailing() {
    return this.props.icon;
  }
}

export default ElevatedPill;