import Box from '@mui/joy/Box';
import FormLabel from '@mui/joy/FormLabel';
import Radio, { radioClasses } from '@mui/joy/Radio';
import RadioGroup from '@mui/joy/RadioGroup';
import Sheet from '@mui/joy/Sheet';
import Done from '@mui/icons-material/Done';

export default function ExampleProductAttributes() {
  return (
    <Box sx={{ resize: 'horizontal', overflow: 'auto', px: 2 }}>
      <FormLabel
        id="product-color-attribute"
        sx={{
          mb: 1.5,
          fontWeight: 'xl',
          textTransform: 'uppercase',
          fontSize: 'xs',
          letterSpacing: '0.1em',
        }}
      >
        Color
      </FormLabel>
      <RadioGroup
        aria-labelledby="product-color-attribute"
        defaultValue="warning"
        sx={{ gap: 2, flexWrap: 'wrap', flexDirection: 'row' }}
      >
        {(['primary', 'neutral', 'danger', 'success', 'warning'] as const).map(
          (color) => (
            <Sheet
              key={color}
              sx={{
                position: 'relative',
                width: 40,
                height: 40,
                flexShrink: 0,
                bgcolor: `${color}.solidBg`,
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Radio
                overlay
                variant="solid"
                color={color}
                checkedIcon={<Done fontSize="xl2" />}
                value={color}
                slotProps={{
                  input: { 'aria-label': color },
                  radio: {
                    sx: {
                      display: 'contents',
                      '--variant-borderWidth': '2px',
                    },
                  },
                }}
                sx={{
                  '--joy-focus-outlineOffset': '4px',
                  '--joy-palette-focusVisible': (theme) =>
                    theme.vars.palette[color][500],
                  [`& .${radioClasses.action}.${radioClasses.focusVisible}`]: {
                    outlineWidth: '2px',
                  },
                }}
              />
            </Sheet>
          ),
        )}
      </RadioGroup>
      <br />
      <FormLabel
        id="product-size-attribute"
        sx={{
          mb: 1.5,
          fontWeight: 'xl',
          textTransform: 'uppercase',
          fontSize: 'xs',
          letterSpacing: '0.1em',
        }}
      >
        Size
      </FormLabel>
      <RadioGroup
        aria-labelledby="product-size-attribute"
        defaultValue="M"
        sx={{ gap: 2, mb: 2, flexWrap: 'wrap', flexDirection: 'row' }}
      >
        {['XS', 'S', 'M', 'L', 'XL'].map((size) => (
          <Sheet
            key={size}
            sx={{
              position: 'relative',
              width: 40,
              height: 40,
              flexShrink: 0,
              borderRadius: '50%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              '--joy-focus-outlineOffset': '4px',
              '--joy-palette-focusVisible': (theme) =>
                theme.vars.palette.neutral.outlinedBorder,
              [`& .${radioClasses.checked}`]: {
                [`& .${radioClasses.label}`]: {
                  fontWeight: 'lg',
                },
                [`& .${radioClasses.action}`]: {
                  '--variant-borderWidth': '2px',
                  borderColor: 'text.secondary',
                },
              },
              [`& .${radioClasses.action}.${radioClasses.focusVisible}`]: {
                outlineWidth: '2px',
              },
            }}
          >
            <Radio color="neutral" overlay disableIcon value={size} label={size} />
          </Sheet>
        ))}
      </RadioGroup>
    </Box>
  );
}
