import React from 'react';
import type { Theme } from '@mui/material';
import { checkboxClasses, svgIconClasses } from '@mui/material';
import type { Components } from '@mui/material/styles';
import { CheckBoxOutlineBlankRounded, CheckBoxRounded, IndeterminateCheckBoxRounded } from '@mui/icons-material';

import { SIZE_LARGE, SIZE_SMALL, SIZE_X_SMALL } from '@/mui/constants';

export default function MuiCheckbox(theme: Theme): Components['MuiCheckbox'] {
  return {
    defaultProps: {
      color: 'primary',
      icon: <CheckBoxOutlineBlankRounded />,
      checkedIcon: <CheckBoxRounded />,
      indeterminateIcon: <IndeterminateCheckBoxRounded />,
    },
    variants: [
      {
        props: { size: SIZE_X_SMALL },
        style: {
          padding: '3px',
          fontSize: '18px',
        },
      },
      {
        props: { size: SIZE_SMALL },
        style: {
          padding: '5px',
          fontSize: '20px',
        },
      },
      {
        props: { size: SIZE_LARGE },
        style: {
          padding: '7px',
          fontSize: '28px',
        },
      },
    ],
    styleOverrides: {
      root: {
        padding: '6px',
        fontSize: '24px',

        [`& .${svgIconClasses.root}`]: {
          fontSize: 'inherit',
        },
      },
      colorNeutral: {
        color: theme.palette.shades[600],

        [`&.${checkboxClasses.checked}`]: {
          color: theme.palette.shades[700],
        },
        '&:hover': {
          backgroundColor: theme.palette.action.hover,
        },
        '&:focus': {
          backgroundColor: theme.palette.action.focus,
        },
      },
    },
  };
}
