// 1. _state.mount 상태 변경
_state.mount = true;

// 2. 필요 변수 확인
const target = event.target;
let name = target.name as string;
const field: Field = get(_fields, name);

// 3. isFieldValueUpdated 업데이트
let isFieldValueUpdated = true;
const _updateIsFieldValueUpdated = (fieldValue: any): void => {
  isFieldValueUpdated =
    Number.isNaN(fieldValue) ||
    deepEqual(fieldValue, get(_formValues, name, fieldValue));
};

// 4. field에 담겨있는 value를 추출합니다.
const getCurrentFieldValue = () =>
  target.type ? getFieldValue(field._f) : getEventValue(event);

export default function getFieldValue(_f: Field["_f"]) {
  const ref = _f.ref;

  // 1. disabled 상태이면 빈값 반환
  if (_f.refs ? _f.refs.every((ref) => ref.disabled) : ref.disabled) {
    return;
  }

  // 2. type="file" input인 경우 files 반환
  if (isFileInput(ref)) {
    return ref.files;
  }

  // 3. type="radio" input인 경우 getRadioValue 함수 호출후 value 반환
  if (isRadioInput(ref)) {
    return getRadioValue(_f.refs).value;
  }

  // 4. type="select-multiple" input인 경우 selectedOptions에서 value 꺼내어 반환
  if (isMultipleSelect(ref)) {
    return [...ref.selectedOptions].map(({ value }) => value);
  }

  // 5. type="checkbox" input인 경우 selectedOptions에서 value 꺼내어 반환
  if (isCheckBox(ref)) {
    return getCheckboxValue(_f.refs).value;
  }
  
  // 6. type="text" input인 경우
  return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
}

function getFieldValueAs<T extends NativeFieldValue>(
  value: T,
  { valueAsNumber, valueAsDate, setValueAs }: Field["_f"]
) {
  return isUndefined(value)
    ? value
    : valueAsNumber
    ? value === ""
      ? NaN
      : value
      ? +value
      : value
    : valueAsDate && isString(value)
    ? new Date(value)
    : setValueAs
    ? setValueAs(value)
    : value;
}

export default (event: unknown) =>
  isObject(event) && (event as Event).target
    ? isCheckBoxInput((event as Event).target)
      ? // checkbox는 checked가 값
        (event as Event).target.checked
      : // 그외는 value가 값
        (event as Event).target.value
    : event;

const {onChange} = register("test")

const App = <input name="noop" onChange={onChange}/>

// 1. 사용변수
let error;
let isValid;
const fieldValue = getCurrentFieldValue();
// 함수이름이 onChange이지만 onBlur에도 사용되므로 구분 필요
const isBlurEvent =
  event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;

// 2. validation 스킵 조건
const shouldSkipValidation =
  (!hasValidation(field._f) &&
    !_options.resolver &&
    !get(_formState.errors, name) &&
    !field._f.deps) ||
  skipValidation(
    isBlurEvent,
    get(_formState.touchedFields, name),
    _formState.isSubmitted,
    validationModeAfterSubmit,
    validationModeBeforeSubmit
  );

// 3. 현재 필드가 watch 상태인지 확인
const watched = isWatched(name, _names, isBlurEvent);

// 4. _formValues에 값 설정.
set(_formValues, name, fieldValue);

// 5. register 등록시 옵션으로 넘긴 onBlur, onChange 이벤트 핸들러를 현재 발생한 이벤트에 맞게 실행해줍니다.
if (isBlurEvent) {
  field._f.onBlur && field._f.onBlur(event);
  delayErrorCallback && delayErrorCallback(0);
} else if (field._f.onChange) {
  field._f.onChange(event);
}

// 6. updateTouchAndDirty
const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);

// 7. shouldRender
const shouldRender = !isEmptyObject(fieldState) || watched;

// 8. blur 이벤트는 포커스를 잃을때 동작하므로 값이 변경되지 않지만, change 이벤트인 경우 실질적으로 값이 변경되므로 values를 업데이트 해줍니다.
!isBlurEvent &&
  _subjects.values.next({
    name,
    type: event.type,
    values: { ..._formValues },
  });

// 9. validation을 패스한다면, 아래 라인을 실행하지 않아도 되므로 조기 반환합니다. 이때 렌더링이 꼭 필요하다면 state도 업데이트 합니다.
if (shouldSkipValidation) {
  if (_proxyFormState.isValid) {
    if (props.mode === "onBlur") {
      if (isBlurEvent) {
        _updateValid();
      }
    } else {
      _updateValid();
    }
  }

  return (
    shouldRender &&
    _subjects.state.next({ name, ...(watched ? {} : fieldState) })
  );
}

// 10. blur 이벤트가 아니고(change 이벤트이고), 현재 필드가 watched 상태이면 state를 업데이트 합니다.
!isBlurEvent && watched && _subjects.state.next({ ..._formState });

const schema = yup
  .object()
  .shape({
    name: yup.string().required(),
    age: yup.number().required(),
  })
  .required()

const App = () => {
  const { register, handleSubmit } = useForm<Inputs>({
    resolver: yupResolver(schema), // yup, joi and even your own.
  })

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input {...register("name")} />
      <input type="number" {...register("age")} />
      <input type="submit" />
    </form>
  )
}

// 1. resolver 옵션으로 넘어온 함수 실행하기
const { errors } = await _executeSchema([name]);

// 2. validation 사후 처리
_updateIsFieldValueUpdated(fieldValue);

if (isFieldValueUpdated) {
  const previousErrorLookupResult = schemaErrorLookup(
    _formState.errors,
    _fields,
    name
  );
  const errorLookupResult = schemaErrorLookup(
    errors,
    _fields,
    previousErrorLookupResult.name || name
  );

  error = errorLookupResult.error;
  name = errorLookupResult.name;

  isValid = isEmptyObject(errors);
}

const _executeSchema = async (name?: InternalFieldName[]) => {
  // 유효성 업데이트 시작 업데이트
  _updateIsValidating(name, true);
  const result = await _options.resolver!(
    _formValues as TFieldValues,
    _options.context,
    getResolverOptions(
      name || _names.mount,
      _fields,
      _options.criteriaMode,
      _options.shouldUseNativeValidation
    )
  );
  // 유효성 업데이트 종료 업데이트
  _updateIsValidating(name);
  return result;
};

export default function schemaErrorLookup<T extends FieldValues = FieldValues>(
  errors: FieldErrors<T>,
  _fields: FieldValues,
  name: string,
): {
  error?: FieldError;
  name: string;
} {
  // 에러 객체에서 name에 해당하는 에러 추출
  const error = get(errors, name);

  // 에러가 있거나 name이 키라면 조기 반환
  if (error || isKey(name)) {
    return {
      error,
      name,
    };
  }

  // 여러 이름을 넘긴경우 처리
  const names = name.split('.');

  while (names.length) {
    const fieldName = names.join('.');
    const field = get(_fields, fieldName);
    const foundError = get(errors, fieldName);

    if (field && !Array.isArray(field) && name !== fieldName) {
      return { name };
    }

    if (foundError && foundError.type) {
      return {
        name: fieldName,
        error: foundError,
      };
    }

    names.pop();
  }

  return {
    name,
  };
}

// 1. error 객체 생성 및 할당
_updateIsValidating([name], true);
error = (
  await validateField(
    field,
    _formValues,
    shouldDisplayAllAssociatedErrors,
    _options.shouldUseNativeValidation
  )
)[name];
_updateIsValidating([name]);

// 2. _updateIsFieldValueUpdated 업데이트 및 이에 따라 로직 실행
_updateIsFieldValueUpdated(fieldValue);

// 3. 
if (isFieldValueUpdated) {
  if (error) {
    isValid = false;
  } else if (_proxyFormState.isValid) {
    isValid = await executeBuiltInValidation(_fields, true);
  }
}

if (isFieldValueUpdated) {
  // 1. deps 에 명시된 의존성이 있는 요소 트리거
  field._f.deps &&
    trigger(
      field._f.deps as FieldPath<TFieldValues> | FieldPath<TFieldValues>[]
    );
  
  // 2. shouldRenderByError 함수 실행
  shouldRenderByError(name, isValid, error, fieldState);
}

const shouldRenderByError = (
  name: InternalFieldName,
  isValid?: boolean,
  error?: FieldError,
  fieldState?: {
    dirty?: FieldNamesMarkedBoolean<TFieldValues>;
    isDirty?: boolean;
    touched?: FieldNamesMarkedBoolean<TFieldValues>;
  }
) => {
  // 1. 사용중인 변수
  const previousFieldError = get(_formState.errors, name);
  // isValid를 사용중이고, isValid값이 불리언이고, 이전 valid값과 다른경우에만 valid를 업데이트합니다.
  const shouldUpdateValid =
    _proxyFormState.isValid &&
    isBoolean(isValid) &&
    _formState.isValid !== isValid;

  // 2. 에러 업데이트
  if (props.delayError && error) {
    delayErrorCallback = debounce(() => updateErrors(name, error));
    delayErrorCallback(props.delayError);
  } else {
    clearTimeout(timer);
    delayErrorCallback = null;
    error
      ? set(_formState.errors, name, error)
      : unset(_formState.errors, name);
  }

  // 3. 에러 발행
  if (
    (error ? !deepEqual(previousFieldError, error) : previousFieldError) ||
    !isEmptyObject(fieldState) ||
    shouldUpdateValid
  ) {
    const updatedFormState = {
      ...fieldState,
      ...(shouldUpdateValid && isBoolean(isValid) ? { isValid } : {}),
      errors: _formState.errors,
      name,
    };

    _formState = {
      ..._formState,
      ...updatedFormState,
    };

    _subjects.state.next(updatedFormState);
  }
};