import React from 'react';
import {Check, COLOR, SIZE} from '@propellerads/icon';

import {InputCheckboxProps} from './types';

import {
  StyledCheckbox,
  StyledDescription,
  StyledIcon,
  StyledLabel,
} from './style';

const InputCheckbox = ({
  hasError = false,
  isChecked = false,
  isDisabled = false,
  checkboxRef = null,
  onChange,
  elementId,
  label = '',
  description = '',
}: InputCheckboxProps) => {
  function handleInputChange() {
    onChange(!isChecked);
  }

  return (
    <StyledCheckbox htmlFor={elementId}>
      <input
        id={elementId}
        onChange={handleInputChange}
        disabled={isDisabled}
        checked={isChecked}
        type="checkbox"
        data-has-error={hasError}
        ref={checkboxRef}
      />
      <StyledLabel isChecked={isChecked} isDisabled={isDisabled} hasError={hasError}>
        {label}
      </StyledLabel>

      <StyledIcon isChecked={isChecked}>
        <Check
          size={SIZE.EXTRA_SMALL}
          color={COLOR.WHITE}
          hoverColor={COLOR.WHITE}
        />
      </StyledIcon>

      {description && (<StyledDescription>{description}</StyledDescription>)}
    </StyledCheckbox>
  );
};

export default InputCheckbox;