import {
  ForwardedRef,
  forwardRef,
  MouseEvent,
  useRef,
  createContext,
  useContext,
} from 'react';
import {
  RtData,
  RtFormField,
  RtFormFieldSizeUI,
  RtFormFieldTextProps,
} from '@dpa/react-form-field-text';
import { RtBaseProps } from '@dpa/react-hoc';
import { RtText } from '@dpa/react-text';
import styles from './styles/rt-form-field-date-picker.module.css';
import classNames from 'classnames/bind';
import { CalendarTypographyIcon } from '@dpa/react-typography-icons';
import { RtFormFieldDatePickerProps } from './rt-form-field-date-picker.types';
import dayjs from 'dayjs';
import mergeRefs from 'merge-refs';

const cn = classNames.bind(styles);

const RtDatepickerContext = createContext<Partial<RtFormFieldDatePickerProps>>(
  {}
);

const RtDataComponent: RtData<HTMLInputElement> = (props) => {
  const { min, max } = useContext(RtDatepickerContext);

  return (
    <RtText
      as="input"
      id={props.id}
      type="date"
      typography={props.typography}
      specification="main"
      placeholder={props.placeholder}
      className={cn('rt-date-picker', props.className)}
      ref={props.forwardedRef}
      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}
      min={min ? dayjs(min).format('YYYY-MM-DD') : undefined}
      max={max ? dayjs(max).format('YYYY-MM-DD') : undefined}
    />
  );
};

type PropType = RtFormFieldDatePickerProps & RtBaseProps<HTMLDivElement>;

export const RtFormFieldDatePicker = forwardRef(function RtFormFieldDatePicker(
  props: PropType,
  ref: ForwardedRef<HTMLDivElement>
) {
  const localInputRef = useRef<HTMLInputElement>(null);

  const handleChange: RtFormFieldTextProps<HTMLInputElement>['onChange'] = (
    e
  ) => {
    const value = e.value;
    props.onChange?.({
      value: value ? dayjs(e.value).toDate() : null,
      event: e.event,
    });
  };

  function clickHandle(e: MouseEvent<HTMLDivElement>) {
    props.onClick?.(e);
    localInputRef.current?.showPicker();
  }

  return (
    <RtDatepickerContext.Provider
      value={{
        min: props.min,
        max: props.max,
      }}
    >
      <RtFormField
        {...(props as Omit<
          PropType,
          'trailingAction' | 'trailingActionSymbol'
        >)}
        {...({ ui: props.ui, size: props.size } as RtFormFieldSizeUI)}
        value={props.value ? dayjs(props.value).format('YYYY-MM-DD') : ''}
        type="text"
        data={RtDataComponent}
        ref={ref}
        inputRef={mergeRefs(props.inputRef, localInputRef)}
        trailingIcon={CalendarTypographyIcon}
        onChange={handleChange}
        onClick={clickHandle}
      />
    </RtDatepickerContext.Provider>
  );
});

RtFormFieldDatePicker.displayName = 'RtFormFieldDatePicker';