import {
  checkboxClasses,
  Checkbox as MuiCheckbox,
  useTheme,
} from '@mui/material';
import { IconCheck, IconMinus, IconSquare } from '@tabler/icons-react';

import { type CheckboxBaseProps } from './types';

const CheckboxBase = ({
  error,
  primaryColor,
  hoverBackgroundColor,
  readOnly,
  'aria-labelledby': ariaLabelledBy,
  inputProps,
  sx,
  ...props
}: CheckboxBaseProps) => {
  const theme = useTheme();

  const newPalette = theme.palette?.new;
  const brand500 = theme.palette.newBase?.brand[500];

  const defaultBorderColor = error
    ? newPalette?.action.button.background.error.focus
    : newPalette?.icon.neutral.lighter;
  const defaultBackgroundColor = newPalette?.background.elements.default;

  return (
    <MuiCheckbox
      size="small"
      inputProps={{
        ...inputProps,
        'aria-readonly': readOnly || inputProps?.['aria-readonly'],
        'aria-labelledby': ariaLabelledBy ?? inputProps?.['aria-labelledby'],
        tabIndex: readOnly ? -1 : inputProps?.tabIndex,
      }}
      icon={<IconSquare stroke={0} />}
      checkedIcon={
        <IconCheck
          size={18}
          color={newPalette?.icon.neutral.inverted}
        />
      }
      indeterminateIcon={
        <IconMinus
          size={18}
          color={brand500}
        />
      }
      sx={{
        border: `1px solid ${defaultBorderColor}`,
        borderRadius: 0.5,
        width: '20px',
        height: '20px',
        aspectRatio: 1,
        padding: 0,
        zIndex: 0,
        backgroundColor: defaultBackgroundColor,
        ...(readOnly && { pointerEvents: 'none' }),
        transition:
          'border 125ms ease-in-out, background 125ms ease-in-out, transform 125ms ease-in-out',
        '&:hover': {
          borderColor: error
            ? newPalette?.action.button.background.error.focus
            : brand500,
          backgroundColor:
            hoverBackgroundColor || newPalette?.action.background.neutral.hover,
        },
        '&:active': {
          transform: 'scale(0.95)',
        },
        '&:focus-visible': {
          ':before': {
            content: '""',
            position: 'absolute',
            top: '-20%',
            left: '-20%',
            width: '140%',
            height: '140%',
            borderRadius: '50%',
            backgroundColor: error
              ? newPalette?.action.button.background.error.focus
              : brand500,
            opacity: 0.2,
            outline: 'none',
            zIndex: 0,
          },
        },
        input: {
          border: `1px solid ${defaultBorderColor}`,
          borderRadius: 0.5,
          width: '20px',
          height: '20px',
          aspectRatio: 1,
          padding: 0,
          zIndex: 0,
          transition: 'border 125ms ease-in-out',
        },
        // Checked state - default
        [`&.${checkboxClasses.checked}:not(.${checkboxClasses.disabled})`]: {
          borderColor: error
            ? newPalette?.action.button.background.error.focus
            : brand500,
          backgroundColor: error
            ? newPalette?.action.button.background.error.focus
            : brand500,
        },
        // Indeterminate state - default
        [`&.${checkboxClasses.indeterminate}:not(.${checkboxClasses.disabled})`]:
          {
            borderColor: error
              ? newPalette?.action.button.background.error.focus
              : brand500,
            backgroundColor: defaultBackgroundColor,
            '& svg': {
              color: brand500,
            },
          },
        // Disabled state - not selected
        [`&.${checkboxClasses.disabled}:not(.${checkboxClasses.checked}):not(.${checkboxClasses.indeterminate})`]:
          {
            borderColor: newPalette?.action.button.background.error.disabled,
            backgroundColor: defaultBackgroundColor,
          },
        // Disabled state - selected
        [`&.${checkboxClasses.disabled}.${checkboxClasses.checked}`]: {
          borderColor: newPalette?.action.button.background.error.disabled,
          backgroundColor: newPalette?.action.button.background.error.disabled,
        },
        // Disabled state - indeterminate
        [`&.${checkboxClasses.disabled}.${checkboxClasses.indeterminate}`]: {
          borderColor: newPalette?.action.button.background.error.disabled,
          backgroundColor: newPalette?.action.button.background.error.disabled,
          '& svg': {
            color: newPalette?.icon.neutral.inverted,
          },
        },
        ...sx,
      }}
      {...props}
      disableRipple
    />
  );
};

export type { CheckboxBaseProps };

export default CheckboxBase;