import React,{useRef} from 'react';
import { useForm, SubmitHandler, FormProvider } from "react-hook-form";
import { Select, Input, Link_str, SelectNominations } from "./UX";

interface IFormInputs {
  name_team_coach: string,
  coach_telefon_number: string,
  nominations: string,
  city_team: string,
  training_institution_team: string,
  team_name: string,
  name_first_participant: string,
  first_partial_class: number,
  name_second_participant: string,
  second_class: number,
  name_third_party: string,
  third_part_class: number,
  body?: string[] | number[]
}

const defaultValues = {
  name_team_coach: '',
  coach_telefon_number: '',
  nominations: '0',
  city_team: '',
  training_institution_team: '',
  team_name: '',
  name_first_participant: '',
  first_partial_class: 0,
  name_second_participant: '',
  second_class: 0,
  name_third_party: 'нет',
  third_part_class: 0,
};

export const UserForm = (props): JSX.Element => {
  const form = useRef(null);
  const methods = useForm({ defaultValues });

  const onSubmit: SubmitHandler<IFormInputs> = data => {
    fetch('/api/registration', { method: 'POST', body: Object.values(data) as any})
      .then((data) => {
        props.updateData(data);
      })
      methods.reset(defaultValues);
  }
  return (
    <>
      <div className="mt-10 sm:mt-0">
      <p>Личный кабинет</p>
      <div className="tabs">
        <a className="tab tab-bordered tab-active">Команды</a> 
        <a className="tab tab-bordered ">Персональные данные</a> 
      </div>
        <div className="md:gap-6">
          
          <div className="mt-5 md:mt-0 md:col-span-2">
          <FormProvider {...methods} >
            <form ref={form} onSubmit={methods.handleSubmit(onSubmit)}>
              <div className="shadow overflow-hidden sm:rounded-md">
                <div className="px-4 py-5 bg-white sm:p-6">
                  <div className="grid grid-cols-6 gap-6">

                      <div className="col-span-6 sm:col-span-3">
                        <Input placeholder="Фиксики" name="team_name" text="Название команды" additional={""} />
                      </div>

                      <div className="col-span-6 sm:col-span-3">
                        <SelectNominations text={'Номинация'} name={'nominations'}/>
                      </div>

                      <div className="col-span-6 sm:col-span-3">
                        <Input placeholder="Иванов Иван Иванович" name="name_first_participant" text="ФИО первого участника" additional={""} />
                      </div>

                      <div className="col-span-6 sm:col-span-3">
                        <Select text={'Класс участника'} name={'first_partial_class'}/>
                      </div>

                      <div className="col-span-6 sm:col-span-3">
                        <Input placeholder="Иванов Петр Иванович" name="name_second_participant" text="ФИО второго участника" additional={""} />
                      </div>

                      <div className="col-span-6 sm:col-span-3">
                        <Select text={'Класс участника'} name={'second_class'}/>
                      </div>
                  </div>
                </div>
                <div className="px-4 py-3 bg-gray-50 text-left sm:px-6">
                <label className="form-check-label inline-block text-gray-800" >
                  Нажимая на кнопку &quot;Зарегистрировать команду&quot;, настоящим участники (их законные представители) и тренер (руководитель) подтверждают свое согласие на обработку персональных данных МАОУ СОШ № 103
                </label>

                </div>
                <div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
                  <button
                    type="submit"
                    className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                  >
                    Зарегистрировать команду
                  </button>
                </div>
              </div>
            </form>
            </FormProvider>
          </div>
        </div>
      </div>
</>
  );
};

export default UserForm;
