import { RtFrame } from '@dpa/react-frame-intro';
import styles from './rt-chips-action.module.css';
import classNames from 'classnames/bind';
import { RtSymbolAction } from '@dpa/react-symbol-action';
import { RtText } from '@dpa/react-text';
import config from '../styles/component-values-chips.module.css';
import { getPropBySize } from '../utils';
import stylesBaseChips from '../styles/base-chips.module.css';
import { RtChipsActionProps } from './rt-chips-action.types';
import {
  forwardRef,
  Fragment,
  useCallback,
  useImperativeHandle,
  useState,
} from 'react';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';
import { RtDropdown, RtDropdownProps } from '@dpa/react-dropdown';
import {
  ChevronUpTypographyIcon,
  ChevronDownTypographyIcon,
} from '@dpa/react-typography-icons';
import { useGridChild } from '@dpa/react-grid';

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

export const RtChipsAction = forwardRef<
  HTMLDivElement,
  RtBaseProps<HTMLDivElement> & RtChipsActionProps
>((props, ref) => {
  const baseProps = useRtBaseProps(props, '0.2.2');
  const {
    defaultLabel,
    onRemove,
    slot,
    disabled,
    leadingIcon: LeadingIcon,
    size = 'md',
    radius = 'primary',
    modifier,
    use,
    labels,
    isRemovable = false,
    apiRef,
    onShowChange,
  } = props;
  const [showDropdown, setShowDropdown] = useState(false);

  const { gridAttributes, gridChildClassname } = useGridChild({ size, radius });

  const openDropdown = useCallback(() => {
    setShowDropdown(true);
  }, []);

  const closeDropdown = useCallback(() => {
    setShowDropdown(false);
  }, []);

  useImperativeHandle(apiRef, () => ({
    closeDropdown,
    openDropdown,
  }));

  const handleShowChange = useCallback<
    NonNullable<RtDropdownProps['onShowChange']>
  >(
    (show) => {
      setShowDropdown(show);
      onShowChange?.(show);
    },
    [onShowChange]
  );

  const handleRemove = useCallback(
    (event: React.MouseEvent) => {
      event.stopPropagation();

      setShowDropdown(false);
      onRemove?.();
    },
    [onRemove]
  );

  const renderLabels = useCallback(() => {
    if (!labels?.length)
      return (
        <RtText
          typography={getPropBySize(size).labelFont}
          className={cn('rt-chips-action__label')}
        >
          {defaultLabel}
        </RtText>
      );

    if (labels.length === 1) {
      return (
        <RtText
          typography={getPropBySize(size).labelFont}
          className={cn('rt-chips-action__label')}
        >
          {labels[0]}
        </RtText>
      );
    }

    return labels.map((label, i) => {
      const isLast = i === labels.length - 1;
      return (
        <Fragment key={label}>
          <RtText
            typography={getPropBySize(size).labelFont}
            className={cn('rt-chips-action__label')}
          >
            {label}
          </RtText>
          {!isLast && (
            <RtText
              typography={getPropBySize(size).labelFont}
              specification="variant"
            >
              +
            </RtText>
          )}
        </Fragment>
      );
    });
  }, [labels, defaultLabel, size]);

  const renderChevron = useCallback(() => {
    if (isRemovable) return;

    const Icon = showDropdown
      ? ChevronUpTypographyIcon
      : ChevronDownTypographyIcon;

    return <Icon typography={getPropBySize(size).iconFont} />;
  }, [isRemovable, showDropdown, size]);

  const renderContent = () => {
    return (
      <div className={cn('rt-chips-action__layer-chips')}>
        {LeadingIcon && (
          <LeadingIcon typography={getPropBySize(size).iconFont} />
        )}
        {renderLabels()}
        {renderChevron()}
        {!disabled && labels?.length && isRemovable ? (
          <RtSymbolAction.Clear
            onClick={handleRemove}
            width="min-content"
            height="min-content"
            size={size}
          />
        ) : undefined}
      </div>
    );
  };

  return (
    <RtDropdown
      disabled={disabled}
      use="cloudy"
      trigger={['click', 'manual']}
      radius={radius}
      model="min-content"
      position="bottom"
      alignment="start"
      animation="smooth"
      show={showDropdown}
      size={size}
      slot={
        <div
          className={cnBaseChips(
            config[`rt-chips-${size}`],
            `base-chips--size-${size}`
          )}
        >
          <div className={cn('rt-chips-action__layer-slot')}>{slot}</div>
        </div>
      }
      closeOnOutsidePress
      onShowChange={handleShowChange}
    >
      <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}
      >
        {renderContent()}
      </RtFrame>
    </RtDropdown>
  );
});

RtChipsAction.displayName = 'RtChipsAction';