import React, { memo } from 'react';
import clsx from 'clsx';

import MuiCheckbox from '@mui/material/Checkbox';
import type { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import type { FormControlLabelProps } from '@mui/material/FormControlLabel';
import { ASSETS_URL } from '../../../consts/common';
import { CustomIcon } from '../../custom-icon';
import createClasses from './styles';

export interface CheckboxProps extends MuiCheckboxProps {
  /**
   * An error state flag for the checkbox component.
   */
  error?: boolean;
  /**
   * Props which will be supplied directly into the form control label component.
   */
  formControlLabelProps?: Omit<FormControlLabelProps, 'control'>;
}

const Checkbox = (props: CheckboxProps) => {
  const { checked, disabled, error, indeterminate, formControlLabelProps, ...checkboxProps } =
    props;

  const styles = createClasses();
  const renderedCheckbox = (
    <MuiCheckbox
      {...checkboxProps}
      className={error ? clsx(checkboxProps.className, styles.error) : checkboxProps.className}
      checked={checked}
      checkedIcon={<CustomIcon color="inherit" src={`${ASSETS_URL}/icons2/icon_boldV.svg`} />}
      disabled={disabled}
      indeterminate={indeterminate}
      indeterminateIcon={
        <CustomIcon color="inherit" src={`${ASSETS_URL}/icons/icon_partiallyChecked.svg`} />
      }
    />
  );

  return formControlLabelProps ? (
    <FormControlLabel
      data-testid="checkboxFormWrapper"
      className={styles.root}
      {...formControlLabelProps}
      control={renderedCheckbox}
    />
  ) : (
    renderedCheckbox
  );
};

const m = memo(Checkbox);
export { m as Checkbox };