import {
  ChangeEvent,
  ForwardedRef,
  forwardRef,
  useContext,
  useRef,
  FocusEvent,
} from 'react';
import {
  RtData,
  RtFormFieldNumberProps,
  RtFormFieldTextProps,
} from '../types/rt-form-field-text.types';
import { RtFormField } from './rt-form-field';
import { RtText } from '@dpa/react-text';
import mergeRefs from 'merge-refs';
import { createContext } from 'react';
import { createSyntheticEvent } from '../utils/create-synthetic-event';

const RtFormFieldNumberContext = createContext<{
  min?: RtFormFieldNumberProps['min'];
  max?: RtFormFieldNumberProps['max'];
  step?: RtFormFieldNumberProps['step'];
}>({});

const RtDataComponent: RtData<HTMLInputElement> = (props) => {
  const localRef = useRef<HTMLInputElement>(null);
  const { min, max, step } = useContext(RtFormFieldNumberContext);

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    const v = e.target.value;
    let newValue = `${v}`;
    if (new RegExp(/^-?0+\d*$/).test(v) && v) {
      if (new RegExp(/^-?0*$/).test(v)) newValue = newValue.replace(/0+/g, '0');
      else newValue = newValue.replace(/0+/g, '');
    }
    newValue = newValue.replaceAll('e', '');
    if (newValue !== v) e.target.value = newValue;

    props.onChange(e);
  }

  function handleBlur(e: FocusEvent<HTMLInputElement>) {
    const change = () => {
      const event = createSyntheticEvent({
        type: 'change',
        event: e,
        target: e.target!,
      }) as ChangeEvent<HTMLInputElement>;
      handleChange(event);
    };

    if (e.target.value.length > 0) {
      if (typeof min !== 'undefined' && +e.target.value < min) {
        e.target.value = `${min}`;
        change();
      } else if (typeof max !== 'undefined' && +e.target.value > max) {
        e.target.value = `${max}`;
        change();
      }
    }

    props.onBlur(e);
  }

  return (
    <RtText
      as="input"
      id={props.id}
      typography={props.typography}
      specification="main"
      type="number"
      placeholder={props.placeholder}
      className={props.className}
      ref={mergeRefs(props.forwardedRef, localRef)}
      value={!!props.value || (props.value as any) === 0 ? props.value : ''}
      name={props.name}
      readOnly={props.readonly}
      required={props.required}
      disabled={props.disabled}
      autoComplete={props.autoComplete}
      min={min}
      max={max}
      step={step}
      onChange={handleChange}
      onFocus={props.onFocus}
      onBlur={handleBlur}
      onKeyUp={props.onKeyUp}
      onKeyDown={props.onKeyDown}
    />
  );
};

export const RtFormFieldNumber = forwardRef(function RtFormFieldNumber(
  { onChange, ...props }: RtFormFieldNumberProps,
  ref: ForwardedRef<HTMLDivElement>
) {
  const handleChange: RtFormFieldTextProps<HTMLInputElement>['onChange'] = ({
    event,
    value,
  }) => {
    onChange?.({ event, value: value.length === 0 ? null : +value });
  };

  return (
    <RtFormFieldNumberContext.Provider
      value={{ min: props.min, max: props.max, step: props.step }}
    >
      <RtFormField
        {...props}
        ref={ref}
        onChange={handleChange}
        data={RtDataComponent}
      />
    </RtFormFieldNumberContext.Provider>
  );
});

RtFormFieldNumber.displayName = 'RtFormFieldNumber';