import { useStore } from 'vuex';
import * as z from 'zod';
import { useField, useForm } from 'vee-validate';
import { toTypedSchema } from '@vee-validate/zod';
import { computed, watch } from 'vue';
import router, { PAGE } from '../router';

const useLoginForm = () => {
  const store = useStore();
  const schema = z.object({
    email:  z
      .string()
      .trim()
      .min(1, 'Обязательное поле')
      .email('Невалидный email')
      .default(''),
    password:  z
      .string()
      .trim()
      .min(1, 'Обязательное поле')
      .min(6, 'Должно содержать больше 6 символов')
      .default('')
  })

  const {handleSubmit, isSubmitting, submitCount} = useForm({
    validationSchema: toTypedSchema(schema)
  });

  const onSubmit = handleSubmit(async (values) => {
    await store.dispatch('auth/login', values);
    await router.push({name: PAGE.HOME});
  })

  const {value: email, errorMessage: eError, handleBlur: eBlur} = useField('email');
  const {value: password, errorMessage: pError, handleBlur: pBlur} = useField('password');

  const isTooManyAttempts = computed(() => submitCount.value > 2);
  const disabled = computed(() => isSubmitting.value || isTooManyAttempts.value)

  watch(isTooManyAttempts, (value) => {
    if (value) {
      setTimeout(() => {
        submitCount.value = 0;
      }, 2000)
    }
  })

  return {
    email,
    eError,
    eBlur,
    password,
    pError,
    pBlur,
    disabled,
    onSubmit,
    isTooManyAttempts,
  }
};

export default useLoginForm;