import React from 'react';

import MaterialCheckbox from '@mui/material/Checkbox';
import { StyledEngineProvider } from '@mui/material/styles';

import { bem } from 'utils/bem';
import { Icon } from 'components/Icon/Icon';

import { THEME } from '../../constants';
import { ICheckboxProps } from './types';

import styles from './checkbox.scss';

const classes = bem(styles, 'checkbox');

export const Checkbox: React.FC<ICheckboxProps> = ({
  theme = THEME.light,
  checked,
  disabled,
  intermediate,
  hasError,
  onChange,
  ...htmlAttributes
}: ICheckboxProps) => (
  <StyledEngineProvider injectFirst>
    <MaterialCheckbox
      onChange={onChange}
      className={classes(null, { [theme]: true, error: !!hasError })}
      disabled={disabled}
      checked={checked}
      disableRipple
      checkedIcon={intermediate ? <span className={classes('line')} /> : <Icon name="check" />}
      size="small"
      inputProps={htmlAttributes}
    />
  </StyledEngineProvider>
);