import {
  Box,
  Typography,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  OutlinedInput,
} from '@mui/material';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import TextFieldsIcon from '@mui/icons-material/TextFields';

interface FontControlProps {
  id: string;
  label: string;
  options: readonly string[];
  value: string;
  onChange: (font: string) => void;
}

export function FontControl({ id, label, options, value, onChange }: Readonly<FontControlProps>) {
  return (
    <FormControl sx={{ width: '100%', minWidth: 230 }}>
      <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;
          if (next) onChange(next);
        }}
        IconComponent={TextFieldsIcon}
        sx={{ '& .MuiSelect-iconOpen': { transform: 'none' } }}
        renderValue={(selected) => {
          return (
            <Typography variant="body1" sx={{ fontFamily: `'${selected}', serif` }}>
              {selected}
            </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 },
          },
        }}
      >
        {options.map((font) => {
          const isSelected = value === font;

          return (
            <MenuItem
              key={font}
              value={font}
              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%', px: 2, py: 1.5, position: 'relative' }}>
                <Typography
                  variant="h6"
                  sx={{ fontFamily: `'${font}', serif`, fontSizeAdjust: '0.47' }}
                >
                  {font}
                </Typography>
                <Typography
                  variant="h6"
                  sx={{
                    fontFamily: `'${font}', serif`,
                    fontSizeAdjust: '0.47',
                    color: 'text.secondary',
                  }}
                >
                  Aa
                </Typography>
                {isSelected && (
                  <Box
                    sx={{
                      position: 'absolute',
                      top: '50%',
                      right: 12,
                      transform: 'translateY(-50%)',
                      lineHeight: 0,
                    }}
                  >
                    <CheckCircleIcon sx={{ fontSize: 20, color: 'primary.main' }} />
                  </Box>
                )}
              </Box>
            </MenuItem>
          );
        })}
      </Select>
    </FormControl>
  );
}