import {
  RtData,
  RtFormFieldBaseProps,
  RtFormFieldSize,
  RtFormFieldTextSymbol,
  RtFormFieldUI,
} from '../types/rt-form-field-text.types';
import { RtFrame } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';
import classNames from 'classnames/bind';
import styles from '../styles/rt-form-field.module.css';
import {
  ChangeEvent,
  FocusEvent,
  Fragment,
  KeyboardEvent,
  MouseEvent,
  RefObject,
  useContext,
  useRef,
} from 'react';
import mergeRefs from 'merge-refs';
import {
  RtSymbolAction,
  RtSymbolActionOriginProps,
} from '@dpa/react-symbol-action';
import { CSSTransition } from 'react-transition-group';
import { RtFormFieldChevronShowContext } from '../context/chevron-context';
import { RtPopover } from '@dpa/react-popover';
import { RtSnackbar } from '@dpa/react-snackbar';

const cn = classNames.bind(styles);

export function useFormFieldLayout(
  props: RtFormFieldBaseProps<HTMLElement> &
    RtFormFieldTextSymbol & {
      ui: RtFormFieldUI;
      size: RtFormFieldSize;
    },
  {
    formatLabel,
    id,
    canClear,
    symbolActionSize,
    data: RtData,
    showPrefixSuffix,
    localInputRef,
    formFieldDataContentRef,
    handleClear,
    handleChange,
    handleFocus,
    handleBlur,
    handleKeyUp,
    handleKeyDown,
    handleTrailingActionClick,
    isAmbulantLabelFloating,
  }: {
    formatLabel: string;
    id: string;
    canClear: boolean;
    showPrefixSuffix: boolean;
    isAmbulantLabelFloating: boolean;
    symbolActionSize: {
      width: RtSymbolActionOriginProps['width'];
      height: RtSymbolActionOriginProps['height'];
    };
    localInputRef: RefObject<HTMLElement>;
    formFieldDataContentRef: RefObject<HTMLElement>;
    handleClear: (e: MouseEvent<HTMLButtonElement>) => void;
    handleChange: (e: ChangeEvent<HTMLElement>) => void;
    handleFocus: (e: FocusEvent<HTMLElement>) => void;
    handleBlur: (e: FocusEvent<HTMLElement>) => void;
    handleKeyUp: (e: KeyboardEvent<HTMLElement>) => void;
    handleKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
    handleTrailingActionClick: (e: MouseEvent<HTMLButtonElement>) => void;
    data: RtData<HTMLElement>;
  }
) {
  const {
    leadingIcon: LeadingIcon,
    trailingIcon: TrailingIcon,
    trailingAction: TrailingAction,
  } = props;
  const closeIconRef = useRef<HTMLButtonElement>(null);
  const chevronContext = useContext(RtFormFieldChevronShowContext);
  const isLarge = props.size === 'lg';

  const LinesLabel = props.ui === 'ambulant-label' && props.label && (
    <label htmlFor={`#${id}`} className={cn('rt-lines-label')}>
      <div className={cn('rt-label-scale')}>
        <RtText
          as="span"
          typography="symbol-md-secondary"
          specification={isAmbulantLabelFloating ? 'main' : 'variant'}
        >
          {formatLabel}
        </RtText>
      </div>
    </label>
  );

  const ContentLeadingSlotWrapper = props.leadingSlot && (
    <div className={cn('rt-content-leading-slot-wrapper')}>
      {props.leadingSlot}
    </div>
  );
  const ContentTrailingSlotWrapper = props.trailingSlot && (
    <div className={cn('rt-content-trailing-slot-wrapper')}>
      {props.trailingSlot}
    </div>
  );

  const FormFieldLabel = (props.ui === 'normal' || props.ui === 'space') &&
    props.label && (
      <div className={cn('rt-form-field-label-normal')}>
        <RtText typography="symbol-md-primary" as="label" htmlFor={`#${id}`}>
          {formatLabel}
        </RtText>
      </div>
    );

  const FormFieldDetails = props.detailsSlot ? (
    props.detailsSlot
  ) : props.details ? (
    <div className={cn('rt-form-field-details')}>
      <div className={cn('rt-form-field-details-text')}>
        <RtText typography="symbol-sm-secondary" specification="main">
          {props.details}
        </RtText>
      </div>
      {props.counter && (
        <div className={cn('rt-details-counter')}>
          <RtText typography="symbol-sm-secondary">
            {String(props.value.length)}
            {props.maxLength ? `/${props.maxLength}` : ''}
          </RtText>
        </div>
      )}
    </div>
  ) : (
    <Fragment />
  );

  const ContentLeadingIcon = LeadingIcon && (
    <RtFrame
      as="div"
      modifier="base"
      className={cn('rt-content-leading-icon-wrapper')}
    >
      {
        <LeadingIcon
          typography="symbol-md-primary"
          specification="main"
          scale="default"
        />
      }
    </RtFrame>
  );

  const ContentTrailingIcon = TrailingIcon && (
    <RtFrame
      as="div"
      modifier="base"
      className={cn('rt-content-trailing-icon-wrapper')}
    >
      <TrailingIcon
        typography="symbol-md-primary"
        specification="main"
        scale="default"
      />
    </RtFrame>
  );

  const ClearButton = (
    <CSSTransition
      in={canClear}
      nodeRef={closeIconRef}
      timeout={200}
      classNames={{
        enter: styles['rt-clear-button--enter'],
        enterActive: styles['rt-clear-button--enter-active'],
        exit: styles['rt-clear-button--exit'],
        exitActive: styles['rt-clear-button--exit-active'],
      }}
      unmountOnExit
    >
      <RtFrame as="span" use="neutral" ref={closeIconRef}>
        <RtSymbolAction.Clear
          symbol="xmark"
          width={symbolActionSize.width}
          height={symbolActionSize.height}
          onClick={handleClear}
          targetSize="minimum"
          onMouseDown={(e) => {
            e.preventDefault();
            e.stopPropagation();
          }}
        />
      </RtFrame>
    </CSSTransition>
  );

  const ChevronButton = chevronContext.isVisible && (
    <RtFrame
      as="span"
      modifier="base"
      className={cn('rt-chevron-button', {
        'rt-chevron-button_rotated': chevronContext.isRotated,
      })}
      onClick={chevronContext.rotate}
      onMouseDown={(e) => {
        e.preventDefault();
        e.stopPropagation();
      }}
    >
      <RtSymbolAction.Chevron
        symbol="chevron-bottom"
        width={symbolActionSize.width}
        height={symbolActionSize.height}
        onClick={chevronContext.rotate}
        targetSize="minimum"
      />
    </RtFrame>
  );

  const TrailingActionWithPopover = TrailingAction && (
    <RtPopover
      use="achromatic-ashy"
      size="xs"
      position="top"
      alignment="middle"
      label={props.trailingActionTooltipHint}
      trigger={props.trailingActionTooltipHint ? ['hover'] : []}
    >
      <TrailingAction
        width={symbolActionSize.width}
        height={symbolActionSize.height}
        targetSize="recommended"
        symbol={props.trailingActionSymbol as undefined}
        onClick={handleTrailingActionClick}
        onMouseEnter={props.onTrailingActionMouseEnter}
        onMouseLeave={props.onTrailingActionMouseLeave}
      />
    </RtPopover>
  );

  const ContentLines = (
    <RtFrame as="div" modifier="base" className={cn('rt-content-lines')}>
      {LinesLabel}
      <div className={cn('rt-lines-display-data')}>
        {props.prefix && showPrefixSuffix && (
          <RtText
            className={cn('rt-prefix')}
            typography={isLarge ? 'symbol-md-secondary' : 'symbol-sm-primary'}
          >
            {props.prefix}
          </RtText>
        )}

        <RtData
          id={id}
          size={props.size}
          type={props.type}
          typography={
            props.size === 'lg' ? 'symbol-md-primary' : 'symbol-sm-primary'
          }
          ui={props.ui}
          placeholder={props.placeholder}
          className={cn('rt-data')}
          forwardedRef={mergeRefs(props.inputRef, localInputRef)}
          isAmbulantLabelFloating={isAmbulantLabelFloating}
          value={props.value}
          name={props.name}
          readonly={props.readonly}
          required={props.required}
          disabled={props.disabled}
          autoComplete={props.autoComplete}
          minLength={props.minLength}
          maxLength={props.maxLength}
          onChange={handleChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
          onKeyUp={handleKeyUp}
          onKeyDown={handleKeyDown}
        />
        {props.suffix && showPrefixSuffix && (
          <RtText
            className={cn('rt-suffix')}
            typography={isLarge ? 'symbol-md-secondary' : 'symbol-sm-primary'}
          >
            {props.suffix}
          </RtText>
        )}
      </div>
    </RtFrame>
  );

  const Hint = props.hint ? (
    <RtSnackbar
      surface="foundation-tint"
      use={props.use}
      hint={props.hint}
      width="full"
      radius="inherit-bottom"
      inheritRadiusFrom={formFieldDataContentRef}
      showCloseButton={false}
    />
  ) : (
    <Fragment />
  );

  return {
    LinesLabel,
    ContentLeadingIcon,
    ContentLeadingSlotWrapper,
    ContentTrailingSlotWrapper,
    FormFieldLabel,
    FormFieldDetails,
    ContentTrailingIcon,
    ClearButton,
    ChevronButton,
    ContentLines,
    TrailingAction: TrailingActionWithPopover,
    Hint,
  };
}