import React, { useRef, InputHTMLAttributes, useImperativeHandle } from 'react';
import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useTheme } from 'styled-components';
import { ITheme, ThemeDefault } from '../../types/theme.interface';
import { FormStyle } from '../styles';
import { ICheckboxProps, ICheckboxPureComponentProps } from './Checkbox.interface';
import Style from './Checkbox.style';
import { CheckBoxCore } from './CheckboxCore';

export const CheckBoxPure = React.forwardRef<InputHTMLAttributes<any>, ICheckboxPureComponentProps>(
   function CheckBoxPure(props, inputRef: any) {
      // default theme
      const theme = useTheme() as ITheme;
      const { checkbox = {} } = theme ?? {};
      const {
         defaultColor: defaultColorTheme,
         size: sizeTheme,
         rounded: roundedTheme,
      } = checkbox as ITheme['checkbox'];

      const {
         title,
         color,
         checked,
         icon,
         rounded = roundedTheme,
         size = sizeTheme ?? 18,
         variant = 'primary',
         valueTrue = true,
         valueFalse = false,
         error,
         disabled = false,
         onChange,
         ...rest
      } = props;
      const ref = useRef(null);
      useImperativeHandle(inputRef, () => ref.current, []);

      const checkboxColor =
         color ?? defaultColorTheme ?? (theme ?? {})[variant] ?? ThemeDefault[variant] ?? ThemeDefault.primary;

      return (
         <FormStyle>
            <Style color={checkboxColor} rounded={rounded} size={size}>
               <div className="checkbox-container clean">
                  <label className="checkbox-container clean">
                     <input
                        ref={ref}
                        type="checkbox"
                        checked={checked}
                        disabled={disabled}
                        {...rest}
                        onChange={(e) => {
                           if (onChange) onChange(e.currentTarget.checked ? valueTrue : valueFalse);
                        }}
                     />
                     <span
                        className={`checkbox ${error && 'has-error'} ${disabled && 'disabled'}`}
                        data-testid="input-checkbox-error"
                     >
                        {icon || <FontAwesomeIcon icon={faCheck} />}
                     </span>
                     <span className={`title ${disabled && 'disabled'}`}>{title}</span>
                  </label>
               </div>

               {error && (
                  <div className="error-input" data-testid="input-error">
                     {error}
                  </div>
               )}
            </Style>
         </FormStyle>
      );
   },
);

export const Checkbox = React.forwardRef<InputHTMLAttributes<any>, ICheckboxProps>(function Checkbox(
   props,
   inputRef: any,
) {
   return <CheckBoxCore {...props} ref={inputRef} as={CheckBoxPure} />;
});
