import { useState } from 'react'
import { useForm } from 'react-hook-form'
import { useMutation } from 'react-query'
import useLocalStorageState from 'use-local-storage-state'
import { addLeaderToGroup, createLeader, Leader } from '../../api/leaders'
import InputError from '../../components/InputError'

const AddLeader = () => {
  const [isAlertVisible, setIsAlertVisible] = useState(false)
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
    getValues,
  } = useForm<Leader>()
  const [yearGroupId] = useLocalStorageState('yearGroupId')

  const { mutate: mutateCreateLeader } = useMutation(
    'createLeader',
    (payload: Leader) => {
      delete payload.limit_group
      return createLeader(payload)
    },
    {
      onSuccess: (data) => {
        setIsAlertVisible(true)
        mutateAddToYearGroup({
          id: data?.data?.id,
          year_group_id: Number(yearGroupId),
          limit_group: getValues('limit_group') ?? 0,
        })
        reset()
      },
    },
  )
  const { mutate: mutateAddToYearGroup } = useMutation(
    'addLeaderToGroup',
    (payload: { id: any; year_group_id: number; limit_group: number }) =>
      addLeaderToGroup(payload.id, payload.year_group_id, {
        limit_group: payload.limit_group,
      }),
  )

  const onSubmit = (data: Leader) => {
    mutateCreateLeader(data)
  }

  return (
    <form
      className="w-full lg:w-1/4 flex flex-col mx-auto"
      onSubmit={handleSubmit(onSubmit)}
    >
      {isAlertVisible && (
        <div className="alert alert-success shadow-lg">
          <span>Udało się dodać opiekuna!</span>
        </div>
      )}

      <div className="form-control">
        <label className="label" htmlFor="first_name">
          Imię
        </label>
        <input
          className="input input-bordered"
          id="first_name"
          type="text"
          {...register('first_name', { required: true })}
        />
        {errors.first_name?.type === 'required' && (
          <InputError>Imię jest wymagane</InputError>
        )}
      </div>
      <div className="form-control">
        <label className="label" htmlFor="last_name">
          Nazwisko
        </label>
        <input
          className="input input-bordered"
          id="last_name"
          type="text"
          {...register('last_name', { required: true })}
        />
        {errors.last_name?.type === 'required' && (
          <InputError>Nazwisko jest wymagane</InputError>
        )}
      </div>
      <div className="form-control">
        <label className="label" htmlFor="email">
          Email
        </label>
        <input
          className="input input-bordered"
          id="email"
          type="text"
          {...register('email', {
            required: true,
          })}
        />
        {errors.email?.type === 'required' && (
          <InputError>Email jest wymagany</InputError>
        )}
      </div>
      <div className="form-control">
        <label className="label" htmlFor="limit_group">
          Limit grup
        </label>
        <input
          className="input input-bordered"
          id="limit_group"
          type="text"
          {...register('limit_group', {
            required: false,
            pattern: /^[1-9][0-9]*$/,
          })}
        />
        {errors.limit_group?.type === 'pattern' && (
          <InputError>Limit grup musi być liczbą dodatnią</InputError>
        )}
      </div>
      <button className="btn btn-success mt-4">Dodaj opiekuna</button>
    </form>
  )
}

export default AddLeader