import React, {
  createContext,
  ForwardedRef,
  forwardRef,
  useContext,
  useMemo,
  KeyboardEvent,
  useRef,
  useEffect,
} from 'react';
import { RtFormField, RtData } from '@dpa/react-form-field-text';
import { RtText } from '@dpa/react-text';
import {
  RtFormFieldTextareaInternalProps,
  RtFormFieldTextareaProps,
} from './rt-form-field-textarea.types';
import mergeRefs from 'merge-refs';
import styles from './styles/rt-form-field-textarea.module.css';
import classNames from 'classnames/bind';
import { Resize } from './assets/resize';
import { mapTextareaRows } from './utils/map-textarea-rows';
import { computeMaxMinHeight } from './utils/compute-max-min-height';

const cn = classNames.bind(styles);
const RtTextareaContext = createContext<RtFormFieldTextareaInternalProps>({
  rows: 1,
  resize: 'vertical',
});

const RtDataComponent: RtData<HTMLTextAreaElement> = (props) => {
  const textareaProps = useContext(RtTextareaContext);
  const { minRows, maxRows } = textareaProps;

  const localRef = useRef<HTMLTextAreaElement>(null);
  const resizeRef = useRef<HTMLButtonElement>(null);
  const touchStartData = useRef<{ y: number; height: number }>({
    y: 0,
    height: 0,
  });

  const rows = useMemo(() => {
    return mapTextareaRows(textareaProps.rows);
  }, [textareaProps.rows]);

  const computeAutoHeight = () => {
    if (!localRef.current) return;

    if (textareaProps.resize !== 'none') {
      const { totalMaxHeight, totalMinHeight } = computeMaxMinHeight(
        textareaProps,
        localRef.current
      );
      if (textareaProps.resize === 'auto') {
        localRef.current.style.height = 'auto';
        localRef.current.style.overflowY = 'hidden';

        const height = localRef.current.scrollHeight;

        if (height < totalMinHeight) {
          localRef.current.style.height = `${totalMinHeight}px`;
        } else if (totalMaxHeight && height > totalMaxHeight) {
          localRef.current.style.height = `${totalMaxHeight}px`;
          localRef.current.style.overflowY = 'auto';
        } else {
          localRef.current.style.height = `${height}px`;
        }
      } else {
        localRef.current.style.minHeight = `${totalMinHeight}px`;
        localRef.current.style.maxHeight = `${totalMaxHeight}px`;
      }
    }
  };

  useEffect(() => {
    const resizeElement = resizeRef.current;

    const touchMove = (e: MouseEvent | TouchEvent) => {
      e.stopPropagation();
      e.preventDefault();
      window.requestAnimationFrame(() => {
        const y =
          (e as MouseEvent).clientY ||
          ((e as TouchEvent).touches
            ? (e as TouchEvent).touches[0]?.clientY
            : 0);
        const dY = y - touchStartData.current.y;
        localRef.current!.style.height = `${
          touchStartData.current.height + dY
        }px`;
      });
    };

    const touchEnd = (e: MouseEvent | TouchEvent) => {
      document.removeEventListener('mousemove', touchMove);
      document.removeEventListener('touchmove', touchMove);
      document.removeEventListener('mouseup', touchEnd);
      document.removeEventListener('touchend', touchEnd);
    };

    const touchStart = (e: MouseEvent | TouchEvent) => {
      e.preventDefault();
      e.stopPropagation();
      touchStartData.current = {
        y:
          (e as MouseEvent).clientY ||
          ((e as TouchEvent).touches
            ? (e as TouchEvent).touches[0]?.clientY
            : 0),
        height: localRef.current!.clientHeight,
      };
      document.addEventListener('mousemove', touchMove);
      document.addEventListener('touchmove', touchMove);

      document.addEventListener('mouseup', touchEnd);
      document.addEventListener('touchend', touchEnd);
    };

    resizeElement?.addEventListener('mousedown', touchStart);
    resizeElement?.addEventListener('touchstart', touchStart);

    return () => {
      resizeElement?.removeEventListener('mousedown', touchStart);
      resizeElement?.removeEventListener('touchstart', touchStart);
    };
  }, []);

  useEffect(() => {
    window.requestAnimationFrame(computeAutoHeight);
  }, [props.value]);

  useEffect(() => {
    const timer = setTimeout(computeAutoHeight, 10);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    if (typeof document === 'undefined') return;
    if (document.readyState === 'complete') {
      computeAutoHeight();
    } else {
      window.addEventListener('load', computeAutoHeight);
      return () => window.removeEventListener('load', computeAutoHeight);
    }
  }, []);

  return (
    <>
      <RtText
        as="textarea"
        id={props.id}
        rows={textareaProps.resize === 'auto' ? 1 : rows}
        typography={props.typography}
        specification="main"
        placeholder={props.placeholder}
        className={cn(
          props.className,
          'rt-textarea',
          `rt-textarea--${textareaProps.resize}`
        )}
        ref={mergeRefs(props.forwardedRef, localRef)}
        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={props.onChange}
        onFocus={props.onFocus}
        onBlur={props.onBlur}
        onKeyUp={props.onKeyUp}
        onKeyDown={props.onKeyDown}
        onInput={computeAutoHeight}
      />
      {textareaProps.resize === 'vertical' && (
        <button
          className={cn('rt-textarea__resize')}
          aria-controls={props.id}
          tabIndex={-1}
          aria-label="Изменить размер текстового поля"
          ref={resizeRef}
        >
          <Resize />
        </button>
      )}
    </>
  );
};

export const RtFormFieldTextarea = forwardRef(function RtFormFieldTextarea(
  props: RtFormFieldTextareaProps,
  ref: ForwardedRef<HTMLDivElement>
) {
  const { resize = 'vertical', rows = 'min', minRows, maxRows } = props;

  const textareaProps = useMemo(() => {
    return { rows, resize, minRows, maxRows };
  }, [rows, resize, minRows, maxRows]);

  return (
    <RtTextareaContext.Provider value={textareaProps}>
      <RtFormField
        type="text"
        {...(props as RtFormFieldTextareaProps)}
        ref={ref}
        data={RtDataComponent}
      />
    </RtTextareaContext.Provider>
  );
});

RtFormFieldTextarea.displayName = 'RtFormFieldTextarea';