import { RtFrame } from '@dpa/react-frame-intro';
import config from '../styles/component-values-chips.module.css';
import styles from './rt-chips-checkbox.module.css';
import stylesBaseChips from '../styles/base-chips.module.css';
import { RtText } from '@dpa/react-text';
import { getPropBySize } from '../utils';
import classNames from 'classnames/bind';
import {
  CheckmarkTypographyIcon,
  MinusTypographyIcon,
} from '@dpa/react-typography-icons';
import { RtChipsCheckboxProps } from './rt-chips-checkbox.types';
import { forwardRef, useState } from 'react';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';
import { useGridChild } from '@dpa/react-grid';

const cn = classNames.bind(styles);
const cnBaseChips = classNames.bind(stylesBaseChips);

export const RtChipsCheckbox = forwardRef<
  HTMLDivElement,
  RtBaseProps<HTMLDivElement> & RtChipsCheckboxProps
>((props, ref) => {
  const baseProps = useRtBaseProps(props, '0.2.2');
  const {
    label,
    size = 'md',
    radius = 'primary',
    use,
    disabled,
    trailingIcon: TrailingIcon,
    checked,
    modifier,
    onChange,
  } = props;
  const [isHovered, setIsHovered] = useState(false);
  const { gridAttributes, gridChildClassname } = useGridChild({ size, radius });

  const getIcon = (
    isHovered: boolean,
    disabled?: boolean,
    checked?: boolean
  ) => {
    if (!checked) return null;

    const Icon =
      isHovered && !disabled ? MinusTypographyIcon : CheckmarkTypographyIcon;

    return <Icon typography={getPropBySize(size).iconFont} />;
  };

  const handleClick = () => {
    if (disabled) return;

    onChange?.(!checked);
  };

  const renderContent = () => {
    return (
      <div
        className={cn('rt-chips-checkbox__layer-chips')}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        {getIcon(isHovered, disabled, checked)}
        <RtText
          typography={getPropBySize(size).labelFont}
          className={cn('rt-chips-checkbox__label')}
        >
          {label}
        </RtText>
        {TrailingIcon && (
          <TrailingIcon typography={getPropBySize(size).iconFont} />
        )}
      </div>
    );
  };

  return (
    <RtFrame
      {...baseProps}
      {...gridAttributes}
      surface="control"
      use={use}
      modifier={modifier}
      as="div"
      isFontSizeProvider
      className={cnBaseChips(
        config[`rt-chips-${size}`],
        gridChildClassname,
        'base-chips',
        `base-chips--size-${size}`,
        `base-chips--radius-${radius}`,
        {
          'base-chips--disabled': disabled,
        }
      )}
      surfaceState={disabled ? 'disabled' : 'native'}
      ref={ref}
      onClick={handleClick}
    >
      {renderContent()}
    </RtFrame>
  );
});

RtChipsCheckbox.displayName = 'RtChipsCheckbox';