import config from './styles/component-values-symbol-action.module.css';
import styles from './styles/rt-symbol-action.module.css';
import classNames from 'classnames/bind';
import {
  RtSymbolActionChevron,
  RtSymbolActionClear,
  RtSymbolActionDnd,
  RtSymbolActionEye,
  RtSymbolActionFavorites,
  RtSymbolActionInfo,
  RtSymbolActionMore,
  RtSymbolActionOriginProps,
} from './rt-symbol-action.types';
import { FC, ForwardedRef, forwardRef } from 'react';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';
import { RtText } from '@dpa/react-text';
import {
  Ellipsis2VerticalTypographyIcon,
  EllipsisTypographyIcon,
  HeartFillTypographyIcon,
  HeartTypographyIcon,
  RtTypographyIconProps,
} from '@dpa/react-typography-icons';
import { RtFrame } from '@dpa/react-frame-intro';
import { getPropBySize } from './utils';

import {
  XmarkCircleAnimatedIcon,
  XmarkAnimatedIcon,
  XmarkCircleFillAnimatedIcon,
  EyeAnimatedIcon,
  EyeSlashAnimatedIcon,
  ChevronUpAnimatedIcon,
  ChevronDownAnimatedIcon,
  ChevronRightAnimatedIcon,
  ChevronLeftAnimatedIcon,
  InfoCircleFillAnimatedIcon,
  Line3AnimatedIcon,
} from '@dpa/react-animated-icons';

const cn = classNames.bind(styles);

const RtSymbolActionInternal = forwardRef(function RtSymbolActionInternal(
  props: RtSymbolActionOriginProps & RtBaseProps<HTMLButtonElement>,
  ref: ForwardedRef<HTMLButtonElement>
) {
  const {
    use,
    specification = 'main',
    height = 'min-content',
    width = 'min-content',
    trailingIcon: ActionIcon,
    targetSize = 'minimum',
    trailingIconScale = 'default',
    icon = true,
    labelPosition = 'leading',
    size = 'sm',
  } = props;

  const baseProps = useRtBaseProps(props, '0.2.2');

  return (
    <RtFrame
      as="button"
      isFontSizeProvider
      tabIndex={-1}
      use={use}
      surface={use && 'control'}
      modifier={use && 'filling'}
      className={cn(
        config['rt-symbol-action'],
        'rt-symbol-action',
        `rt-symbol-action--width-${width}`,
        `rt-symbol-action--height-${height}`,
        `rt-symbol-action--${targetSize}`,
        { 'rt-symbol-action--row-reverse': labelPosition === 'trailing' }
      )}
      ref={ref}
      type="button"
      bgTransparent
      surfaceState="static"
      {...baseProps}
    >
      {props.label && (
        <RtText
          typography={getPropBySize(size).labelFont}
          specification={specification}
        >
          {props.label}
        </RtText>
      )}
      {!!ActionIcon && icon && (
        <div className={cn('rt-action-icon')}>
          <ActionIcon
            typography={getPropBySize(size).iconFont}
            scale={trailingIconScale}
            specification={specification}
            animateStrategy="hover"
          />
        </div>
      )}
    </RtFrame>
  );
});

RtSymbolActionInternal.displayName = 'RtSymbolAction';

type RtIconBySymbolType = Record<string, FC<RtTypographyIconProps>>;

function makeSymbolAction<
  T extends { symbol?: keyof I },
  I extends RtIconBySymbolType
>(iconBySymbol: I) {
  return forwardRef(
    (
      props: T & RtSymbolActionOriginProps & RtBaseProps<HTMLButtonElement>,
      ref: ForwardedRef<HTMLButtonElement>
    ) => {
      const { symbol, ...otherProps } = props;
      const IconComponent = symbol
        ? iconBySymbol[symbol]
        : iconBySymbol[Object.keys(iconBySymbol)[0]];

      return (
        <RtSymbolActionInternal
          {...otherProps}
          trailingIcon={IconComponent}
          ref={ref}
        />
      );
    }
  );
}

export const RtSymbolAction = {
  Clear: makeSymbolAction({
    'xmark-circle-fill': XmarkCircleFillAnimatedIcon,
    'xmark-circle': XmarkCircleAnimatedIcon,
    xmark: XmarkAnimatedIcon,
  }) as RtSymbolActionClear,
  Eye: makeSymbolAction({
    eye: EyeAnimatedIcon,
    'eye-slash': EyeSlashAnimatedIcon,
  }) as RtSymbolActionEye,
  Chevron: makeSymbolAction({
    'chevron-top': ChevronUpAnimatedIcon,
    'chevron-right': ChevronRightAnimatedIcon,
    'chevron-bottom': ChevronDownAnimatedIcon,
    'chevron-left': ChevronLeftAnimatedIcon,
  }) as RtSymbolActionChevron,
  Info: makeSymbolAction({
    'info-circle-fill': InfoCircleFillAnimatedIcon,
  }) as RtSymbolActionInfo,
  Dnd: makeSymbolAction({
    'line-3': Line3AnimatedIcon,
    // TODO: анимированные иконки
    'ellipsis-2-vertical': Ellipsis2VerticalTypographyIcon,
  }) as RtSymbolActionDnd,
  More: makeSymbolAction({
    // TODO: анимированные иконки
    ellipsis: EllipsisTypographyIcon,
  }) as RtSymbolActionMore,
  Favorites: makeSymbolAction({
    // TODO: анимированные иконки
    'heart-fill': HeartFillTypographyIcon,
    heart: HeartTypographyIcon,
    xmark: XmarkAnimatedIcon,
  }) as RtSymbolActionFavorites,
};