import styles from './styles/rt-button.module.css';
import config from './styles/component-values-button.module.css';
import classnames from 'classnames/bind';
import { RtButtonProps } from './rt-button.types';
import {
  ElementRef,
  ElementType,
  ForwardedRef,
  forwardRef,
  ReactNode,
  useMemo,
} from 'react';
import { RtText } from '@dpa/react-text';
import { RtFrame } from '@dpa/react-frame-intro';
import { useRtBaseProps } from '@dpa/react-hoc';
import { useGridChild } from '@dpa/react-grid';
import { RtSpinner } from '@dpa/react-loaders';
import { getSurfaceState } from './utils/getSurfaceState';
import { getSpinnerSize } from './utils/getSpinnerSize';
import { mapIconSize } from './utils/map-icon-size';

const cn = classnames.bind(styles);

/**
 * Примечание:
 *    - кнопка не должна содержать одновременно leadingIcon и leadingSlot
 *    - кнопка не должна содержать одновременно trailingIcon и trailingSlot
 *    - кнопка не должна содержать одновременно topIcon и prependSlot
 *    - кнопка не должна содержать одновременно bottomIcon и appendSlot
 * */
export const RtInternalButton = <T extends ElementType = 'button'>(
  props: RtButtonProps<T>,
  ref: ForwardedRef<any>
) => {
  const {
    modifier,
    use = 'primary',
    label,
    subLabel,
    leadingIcon: LeadingIcon,
    trailingIcon: TrailingIcon,
    prependIcon: TopIcon,
    appendIcon: BottomIcon,
    leadingSlot,
    trailingSlot,
    prependSlot,
    appendSlot,
    height = 'hug',
    width = 'hug',
    textWidth = 'hug',
    textHeight = 'hug',
    textJustify = 'center',
    disabled,
    size = 'sm',
    radius = 'primary',
    textWrap = false,
    name,
    type,
    tabIndex,
    loading,
    textDecorationLine = 'none',
    as: renderAs,
    className: __cn__,
    style: __style__,
    ...otherProps
  } = props;

  const showLabels = [
    label,
    subLabel,
    prependSlot,
    TopIcon,
    appendSlot,
    BottomIcon,
  ].some((item) => item !== undefined);
  const showLabelsGroup = [label, subLabel].some((item) => item !== undefined);

  const baseProps = useRtBaseProps<ElementType>(otherProps, '0.2.2');
  const { gridChildClassname, gridAttributes } = useGridChild({
    size: size === 'xl' ? 'lg' : size,
    radius,
  });

  const surfaceState = getSurfaceState({ disabled, loading });
  const spinnerSize = getSpinnerSize(size);
  const iconTypography = `symbol-${mapIconSize(size)}-primary`;

  const Component = renderAs ?? 'button';

  const buttonProps = useMemo(() => {
    if (Component === 'button') {
      return {
        name,
        type,
        tabIndex,
        disabled: disabled || loading,
      };
    }

    return {};
  }, [name, type, tabIndex, disabled, loading, Component]);

  return (
    <RtFrame
      as={Component}
      id={baseProps.id}
      ref={ref}
      className={cn(
        config[`rt-button-${size}`],
        'rt-button',
        `rt-button__container--block-width-${width}`,
        `rt-button__container--block-height-${height}`,
        {
          'rt-button--disabled': disabled,
          'rt-button--loading': loading,
          'rt-button--xl': size === 'xl',
        },
        gridChildClassname
      )}
      modifier={modifier}
      surface="control"
      use={use}
      surfaceState={surfaceState}
      isFontSizeProvider
      {...baseProps}
      {...gridAttributes}
      {...otherProps}
      {...buttonProps}
    >
      <span className={cn('rt-button__inner')}>
        {!!LeadingIcon && <LeadingIcon typography={iconTypography} />}

        {leadingSlot !== undefined && leadingSlot}

        {showLabels && (
          <span
            className={cn(
              styles[`rt-button__labels`],
              styles[`rt-button__labels--text-justify-${textJustify}`],
              styles[`rt-button__labels--text-width-${textWidth}`],
              styles[`rt-button__labels--text-height-${textHeight}`]
            )}
          >
            {!!TopIcon && <TopIcon typography={iconTypography} />}

            {prependSlot !== undefined && prependSlot}

            {showLabelsGroup && (
              <span
                className={cn(
                  `rt-button__labels-group`,
                  `rt-button__labels-group--text-justify-${textJustify}`,
                  `rt-button__labels-group--text-height-${textHeight}`,
                  textWrap && `rt-button__labels-group--text-wrap`
                )}
              >
                {label !== undefined && (
                  <RtText
                    className={cn('rt-button__labels-group-text')}
                    style={{ textDecorationLine }}
                    typography={
                      ['lg', 'xl'].includes(size)
                        ? 'symbol-md-primary'
                        : 'symbol-sm-primary'
                    }
                    as="span"
                  >
                    {label}
                  </RtText>
                )}

                {subLabel !== undefined && (
                  <RtText
                    className={cn('rt-button__labels-group-text')}
                    typography={
                      ['lg', 'xl'].includes(size)
                        ? 'symbol-sm-regular'
                        : 'symbol-xs-regular'
                    }
                    as="span"
                    specification="variant"
                  >
                    {subLabel}
                  </RtText>
                )}
              </span>
            )}
            {appendSlot !== undefined && appendSlot}

            {!!BottomIcon && <BottomIcon typography={iconTypography} />}
          </span>
        )}

        {TrailingIcon && <TrailingIcon typography={iconTypography} />}

        {trailingSlot !== undefined && trailingSlot}

        {loading && (
          <span className={cn(`rt-button__loader`)}>
            <RtSpinner
              size={spinnerSize}
              width="min-content"
              height="min-content"
            />
          </span>
        )}
      </span>
    </RtFrame>
  );
};

export const RtButton = forwardRef(RtInternalButton) as <
  T extends ElementType = 'button'
>(
  props: RtButtonProps<T> & {
    ref?: ForwardedRef<ElementRef<T>>;
  }
) => ReactNode;

RtButton.displayName = 'RtButton';