import {
  Box,
  Typography,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  OutlinedInput,
} from '@mui/material';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import StyleIcon from '@mui/icons-material/Style';
import type { Preset } from '@cdx-ui/styles';
import { PresetPreview } from '../components';

const PRESETS: { id: Preset; label: string; description: string }[] = [
  {
    id: 'poise',
    label: 'Poise',
    description: 'Elegant and balanced',
  },
  {
    id: 'prestige',
    label: 'Prestige',
    description: 'Professional and bold',
  },
  {
    id: 'pulse',
    label: 'Pulse',
    description: 'Modern and friendly',
  },
];

interface PresetControlProps {
  id?: string;
  label?: string;
  value: Preset;
  onChange: (preset: Preset) => void;
}

export function PresetControl({
  id = 'preset-select',
  label = 'Preset',
  value,
  onChange,
}: Readonly<PresetControlProps>) {
  return (
    <FormControl sx={{ width: '100%' }}>
      <InputLabel id={`${id}-label`}>{label}</InputLabel>
      <Select
        labelId={`${id}-label`}
        id={id}
        input={<OutlinedInput id={`${id}-input`} label={label} />}
        value={value}
        onChange={(event) => {
          const next = event.target.value as Preset | undefined;
          if (next) onChange(next);
        }}
        IconComponent={StyleIcon}
        sx={{ '& .MuiSelect-iconOpen': { transform: 'none' } }}
        renderValue={(selected) => {
          return (
            <Typography variant="body2">
              {PRESETS.find((preset) => preset.id === selected)?.label}
            </Typography>
          );
        }}
        MenuProps={{
          sx: { p: 1 },
          anchorOrigin: { vertical: 'top', horizontal: 'right' },
          transformOrigin: { vertical: 'top', horizontal: 'left' },
          PaperProps: { sx: { ml: 1 } },
          MenuListProps: {
            sx: { display: 'flex', flexDirection: 'column', gap: 1, px: 1 },
          },
        }}
      >
        {PRESETS.map((preset) => {
          const isSelected = value === preset.id;

          return (
            <MenuItem
              key={preset.id}
              value={preset.id}
              selected={isSelected}
              sx={{
                p: 0,
                border: '1px solid',
                borderColor: isSelected ? 'primary.main' : 'divider',
                borderRadius: 2,
                flex: 1,
                position: 'relative',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'stretch',
                height: '100%',
                overflow: 'hidden',
              }}
            >
              <Box sx={{ width: '100%', p: 2, pb: 0, position: 'relative' }}>
                <Typography variant="subtitle2">{preset.label}</Typography>
                <Typography variant="caption" color="text.secondary">
                  {preset.description}
                </Typography>
                {isSelected && (
                  <Box sx={{ position: 'absolute', top: 12, right: 12, lineHeight: 0 }}>
                    <CheckCircleIcon sx={{ fontSize: 20, color: 'primary.main' }} />
                  </Box>
                )}
              </Box>
              <Box
                sx={{
                  display: 'flex',
                  justifyContent: 'flex-end',
                  alignItems: 'flex-end',
                  flexGrow: 1,
                  pt: 1.5,
                  pl: 1.5,
                }}
              >
                <PresetPreview preset={preset.id} isSelected={isSelected} />
              </Box>
            </MenuItem>
          );
        })}
      </Select>
    </FormControl>
  );
}