import { ChangeEvent, MouseEvent, useRef, useState } from 'react';
import styles from './styles/rt-checkbox.module.css';
import config from './styles/component-values-checkbox.module.css';
import { RtFrame } from '@dpa/react-frame-intro';
import classnames from 'classnames/bind';
import { RtCheckboxProps } from './rt-checkbox.types';
import { getIcon } from './utils/get-icon';
import { forwardRef, useMemo } from 'react';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';

const cn = classnames.bind(styles);

export const RtCheckbox = forwardRef(
  (
    props: RtCheckboxProps & RtBaseProps<HTMLLabelElement>,
    ref: React.ForwardedRef<HTMLLabelElement>
  ) => {
    const {
      name,
      value,
      use,
      modifier,
      size = 'sm',
      width = 'min-content',
      height = 'min-content',
      isActive = false,
      isIntermediate = false,
      radius = 'primary',
      isLoading = false,
      disabled = false,
      onChange,
      ariaLabel,
      ariaLabelledBy,
    } = props;

    const {
      onMouseEnter,
      onMouseOut,
      'data-size-scheme': dataSizeScheme,
      ...baseProps
    } = useRtBaseProps(props, '0.2.2');

    const [isHover, setIsHover] = useState(false);
    const inputRef = useRef<HTMLInputElement>(null);

    const mouseOverHandle = (event: MouseEvent<HTMLLabelElement>) => {
      setIsHover(true);
      onMouseEnter?.(event);
    };

    const mouseOutHandle = (event: MouseEvent<HTMLLabelElement>) => {
      setIsHover(false);
      onMouseOut?.(event);
    };

    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
      const { checked: value } = event.currentTarget;
      if (onChange) {
        onChange({ event, value, name: name || '' });
      }
    };

    const Icon = useMemo(() => {
      // TODO: Skeleton
      // if (isLoading) {
      //   return <Skeleton />}
      // }

      if (isHover && !disabled && (isActive || isIntermediate)) {
        return getIcon('hover', size);
      }
      if (isIntermediate) {
        return getIcon('intermediate', size);
      }
      if (isActive) {
        return getIcon('checked', size);
      }
    }, [isActive, disabled, isHover, isIntermediate, size]);

    const state = disabled ? 'disabled' : isLoading ? 'loading' : undefined;

    return (
      <RtFrame
        isFontSizeProvider
        className={cn(
          config[`rt-checkbox-${size}`],
          'checkbox-container',
          `checkbox-container--width-${width}`,
          `checkbox-container--height-${height}`
        )}
        data-size-scheme={dataSizeScheme}
      >
        <RtFrame
          ref={ref}
          as="label"
          surface="control"
          use={use}
          modifier={modifier}
          surfaceState={state}
          tabIndex={disabled ? 0 : 1}
          {...baseProps}
          className={cn(
            'checkbox',
            `checkbox--size-${size}`,
            `checkbox--radius-${radius}`,
            'checkbox--transition',
            {
              [`checkbox--disabled`]: disabled,
              [`checkbox--checked`]: isActive || isIntermediate,
              [`checkbox--intermediate`]: isIntermediate,
            }
          )}
          onMouseOut={mouseOutHandle}
          onMouseOver={mouseOverHandle}
          role="checkbox"
          onKeyUp={(e) => {
            if (e.code === 'Space') {
              inputRef.current?.click();
            }
          }}
        >
          <input
            ref={inputRef}
            name={name}
            type="checkbox"
            onChange={handleChange}
            checked={isActive}
            className={cn('checkbox__native')}
            value={value || Number(isActive)}
            onClick={(e) => {
              e.stopPropagation();
            }}
            aria-label={ariaLabel}
            aria-labelledby={ariaLabelledBy}
          />
          {Icon && <Icon />}
        </RtFrame>
      </RtFrame>
    );
  }
);

RtCheckbox.displayName = 'RtCheckbox';