import React, {
  ForwardedRef,
  forwardRef,
  ElementType,
  ElementRef,
  useId,
  cloneElement,
  ReactElement,
  useRef,
  MouseEventHandler,
  MouseEvent,
  useMemo,
} from 'react';
import { RtSpinner } from '@dpa/react-loaders';
import { RtItemProps } from '../types/rt-item.types';
import { RtText } from '@dpa/react-text';
import { useRtBaseProps } from '@dpa/react-hoc';
import styles from '../styles/rt-item.module.css';
import classNames from 'classnames/bind';
import { itemIconSizeMap, itemSizeTypographyMap } from '../constants';
import { RtSymbolAction } from '@dpa/react-symbol-action';
import mergeRefs from 'merge-refs';
import { RtGridChildContext, useGridChild } from '@dpa/react-grid';
import { RtFrame } from '@dpa/react-frame-intro';
import { getSurfaceState } from '../utils/get-surface-state';
import config from '../styles/item-config.module.css';
import { useDndItem } from '../hooks/useDndItem';
import { getSlotInfo } from '../utils/get-slot-info';
import { createClickEvent } from '../utils/create-click-event';

const cn = classNames.bind(styles);

const selectorComponents = ['RtToggle', 'RtRadio', 'RtCheckbox'];

const stopPropagation = (
  e: MouseEvent<HTMLElement>,
  fn?: (() => void) | false
) => {
  e.stopPropagation();
  if (fn) fn?.();
};

export const RtInternalItem = <T extends ElementType = 'div'>(
  props: RtItemProps<T>,
  ref: ForwardedRef<ElementRef<T>>
) => {
  const {
    as = 'div',
    disabled,
    leadingIcon: LeadingIcon,
    leadingSlot,
    trailingIcon: TrailingIcon,
    trailingSlot,
    variant = 'normal',
    labelSlot,
    action,
    actionSymbol,
    actionSlot,
    actionLabel,
    actionIcon = true,
    subLabelSpecification = 'main',
    selectorSlot,
    selectorReverse = false,
    label,
    subLabel,
    size = 'md',
    onActionClick,
    onClear,
    readOnly,
    readonlyEffectState,
    readonlyEffectVariant,
    labelLineClamp,
    subLabelLineClamp,
    cursor,
    squeeze = false,
    ...otherProps
  } = props;
  const { onClick, id: propsId, ...baseProps } = useRtBaseProps(props, '0.2.2');

  const TrailingAction = action || RtSymbolAction.Chevron;

  const localId = useId();
  const labelId = useId();
  const id = propsId || localId;

  const localRef = useRef<HTMLDivElement>(null);

  const isSelector = useMemo(() => {
    return selectorComponents.includes(getSlotInfo(selectorSlot)?.displayName);
  }, [selectorSlot]);

  const cursorComputed = cursor ? cursor : isSelector ? 'pointer' : 'default';
  const isNormal = variant === 'normal';

  const SelectorSlot =
    selectorSlot &&
    selectorComponents.includes(getSlotInfo(selectorSlot)?.displayName)
      ? cloneElement(selectorSlot as ReactElement, {
          ariaLabelledBy: labelId,
          modifier: selectorSlot?.props?.modifier || 'base',
        })
      : selectorSlot;

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

  const { attributes, listeners, setNodeRef, style, draggingStyle } =
    useDndItem(id);

  const handleClick: MouseEventHandler<T> = (e) => {
    if (disabled || readOnly) return;
    if (['LABEL', 'INPUT'].includes((e.target as HTMLElement)?.tagName)) return;

    const clickEvent = createClickEvent();

    localRef.current
      ?.querySelectorAll('input')
      .forEach((el) => el?.dispatchEvent(clickEvent));
    onClick?.(e);
  };

  const renderreadonlyEffectVariantComponent = () => {
    switch (readonlyEffectVariant) {
      case 'info':
        return (
          <RtSymbolAction.Info
            width="md"
            height="md"
            size="sm"
            onClick={(e) => stopPropagation(e, !disabled && onActionClick)}
          />
        );

      case 'clear':
        return (
          <RtSymbolAction.Clear
            use="error"
            width="md"
            height="md"
            size="sm"
            onClick={(e) => stopPropagation(e, !disabled && onClear)}
          />
        );
      default:
        return '';
    }
  };

  const renderreadonlyEffectStateComponent = () => {
    switch (readonlyEffectState) {
      case 'loading':
        return <RtSpinner onClick={stopPropagation} />;

      case 'dragging':
        return (
          <RtSymbolAction.Dnd
            width="md"
            height="md"
            size="sm"
            trailingIconScale="large"
            {...attributes}
            {...listeners}
            onClick={stopPropagation}
          />
        );
      default:
        return '';
    }
  };

  const renderLabels = () => {
    return (
      <div className={cn('rt-item__grid-lines')}>
        <div className={cn('rt-item__lines-primary')}>
          <RtText
            typography={itemSizeTypographyMap[size].label}
            lineClamp={labelLineClamp}
            id={labelId}
          >
            {label}
          </RtText>
          {labelSlot && labelSlot}
        </div>
        {subLabel && (
          <div className={cn('rt-item__lines-secondary')}>
            <RtText
              typography={itemSizeTypographyMap[size].subLabel}
              specification={subLabelSpecification}
              lineClamp={subLabelLineClamp}
            >
              {subLabel}
            </RtText>
          </div>
        )}
      </div>
    );
  };

  const renderContent = () => {
    if (readOnly) {
      return (
        <>
          {renderreadonlyEffectVariantComponent()}
          <div
            className={cn(
              'rt-item__content-grid',
              `rt-item__content-grid--variant-${variant}`,
              { 'rt-item--readOnly': readOnly }
            )}
          >
            {renderLabels()}
          </div>
          {renderreadonlyEffectStateComponent()}
        </>
      );
    }

    return (
      <>
        {leadingSlot && (
          <div className={cn('rt-item__leading-slot')}>{leadingSlot}</div>
        )}
        {!isNormal && !selectorReverse && SelectorSlot}
        <div
          className={cn(
            'rt-item__content-grid',
            `rt-item__content-grid--variant-${variant}`
          )}
        >
          {isNormal && !selectorReverse && SelectorSlot}
          {LeadingIcon && (
            <LeadingIcon typography={itemIconSizeMap[size]} scale="large" />
          )}
          {renderLabels()}
          {TrailingIcon && (
            <TrailingIcon typography={itemIconSizeMap[size]} scale="large" />
          )}
          {isNormal && selectorReverse && SelectorSlot}
        </div>
        {!isNormal && selectorReverse && SelectorSlot}
        {(actionLabel || action || actionSlot) && (
          <div
            className={cn(
              'rt-item__content-action',
              `rt-item__content-action--variant-${variant}`
            )}
          >
            {actionSlot && actionSlot}
            <TrailingAction
              width="min-content"
              height="min-content"
              symbol={actionSymbol as any}
              size="sm"
              specification="variant"
              icon={actionIcon}
              label={actionLabel}
              onClick={(e) => stopPropagation(e, disabled && onActionClick)}
            />
          </div>
        )}
        {trailingSlot && (
          <div className={cn('rt-item__trailing-slot')}>{trailingSlot}</div>
        )}
      </>
    );
  };

  return (
    <RtFrame
      {...baseProps}
      {...gridAttributes}
      {...otherProps}
      ref={mergeRefs(
        ref as React.ForwardedRef<unknown>,
        setNodeRef as React.ForwardedRef<T>,
        localRef
      )}
      as={as}
      surface="wrapper"
      isFontSizeProvider
      className={cn(gridChildClassname, config[`rt-item-${size}`], 'rt-item', {
        'rt-item_squeeze': squeeze,
        'rt-item_icon-start': variant === 'space',
      })}
      modifier={squeeze ? 'filling' : undefined}
      surfaceState={getSurfaceState(
        disabled,
        readonlyEffectState === 'loading',
        squeeze
      )}
      style={{
        ...style,
        ...(readOnly ? draggingStyle : {}),
        cursor: cursorComputed,
      }}
      aria-labelledby={labelId}
      onClick={handleClick}
    >
      <div
        className={cn(
          'rt-item__content',
          `rt-item__content--variant-${variant}`
        )}
      >
        <RtGridChildContext.Provider value={null}>
          {renderContent()}
        </RtGridChildContext.Provider>
      </div>
    </RtFrame>
  );
};

/**
 * Универсальный компонент для отображения единицы контента.
 * Может использоваться как самостоятельный (одиночный) компонент, так и в составе RtList.
 *
 * {@link RtItemProps}
 */
export const RtItem = forwardRef(RtInternalItem);
RtItem.displayName = 'RtItem';