/* eslint-disable react/jsx-props-no-spreading */
import React, { FunctionComponent } from 'react';
import omit from 'lodash/omit';
import cn from 'classnames';

import { CheckboxProps } from './types.d';
import { useTheme } from '../Theme';
import { StyledCheckBox } from './styled-component';
import { checkedIcons, uncheckedIcon } from './icons';

export const Checkbox: FunctionComponent<CheckboxProps> = (props): React.ReactElement => {
  const { checkedIcon, typeIcon = 'checkSquare', color = 'primaryColor', icon, iconColor = 'white', className = '' } = props;
  const theme = useTheme();

  const classNames = cn({
    'square-checkbox': true,
    [className]: true,
  });

  const checkIcon = checkedIcon ?? checkedIcons(theme, color, iconColor)[typeIcon];

  return (
    <StyledCheckBox
      $theme={theme}
      $color={color}
      {...omit(props, 'color', 'className', 'typeIcon')}
      className={classNames}
      checkedIcon={checkIcon}
      icon={icon ?? uncheckedIcon(theme)}
    />
  );
};
