import React, { useState } from 'react';
import Helmet from 'react-helmet';
import { Inertia } from '@inertiajs/inertia';
import { InertiaLink, usePage } from '@inertiajs/inertia-react';
import Layout from '@/Shared/Layout';
import LoadingButton from '@/Shared/LoadingButton';
import TextInput from '@/Shared/TextInput';
import SelectInput from '@/Shared/SelectInput';

export default () => {
  const { users, indicators, errors } = usePage();
  const [sending, setSending] = useState(false);
  const [values, setValues] = useState({
    name: '',
    date_start: '',
    fixed_value: '',
    fixed_period: ''
  });
  const [targets, setTargets] = useState([{
       indicator_id: '',
       function: '',
       condition: '',
       goal_value: '',
       award_value: '',
       award_type: '',
       fine_value: '',
       fine_type: '',
  }]);

  function handleChange(e) {
    const key = e.target.name;
    const value = e.target.value;
    setValues(values => ({
      ...values,
      [key]: value
    }));
  }

  function handleSubmit(e) {
    e.preventDefault();
    setSending(true);
    Inertia.post(route('schemes.store'), values).then(() => {
      setSending(false);
    });
  }

  return (
    <Layout>
      <div>
        <Helmet title="Новая зарплатная схема" />
        <h1 className="mb-8 font-bold text-3xl">
          Зарплатная схема {values.name ? '"' + values.name + '"' : ''}
        </h1>
        <div className="bg-white rounded shadow overflow-hidden">
          <form onSubmit={handleSubmit}>
            <div className="p-6 -mr-6 -mb-8 flex flex-wrap">
              <TextInput
                className="pr-6 pb-8 w-full lg:w-1/4"
                label="Название"
                name="name"
                errors={errors.name}
                value={values.name}
                onChange={handleChange}
              />
              <TextInput
               className="pr-6 pb-8 w-full lg:w-1/4"
               label="Действует с"
               name="date_start"
               type="month"
               errors={errors.date_start}
               value={values.date_start}
               onChange={handleChange}
              />
              <TextInput
               className="pr-6 pb-8 w-full lg:w-1/4"
               label="Фиксированный оклад"
               name="fixed_value"
               errors={errors.fixed_value}
               value={values.fixed_value}
               onChange={handleChange}
              />
              <SelectInput
               className="pr-6 pb-8 w-full lg:w-1/4"
               label="Тип ставки"
               name="fixed_period"
               errors={errors.fixed_period}
               value={values.fixed_period}
               onChange={handleChange}
              >
               <option value="month">В месяц</option>
               <option value="day">В день</option>
               <option value="hour">В час</option>
              </SelectInput>
            </div>
            <div className="p-6 border-t border-gray-200">
               <h1 className="mb-4 font-bold text-xl">
                 Цели
               </h1>


               {targets.map((target, index) => (
                  <div key={index} className="p-4 bg-gray-100 mb-4">
                    <div className="-mr-6 -mb-8 flex flex-wrap">
                      <SelectInput
                        className="pr-6 pb-8 mb-4 w-full lg:w-2/5"
                        label="Показатель"
                        name="indicator_id"
                        value={target.indicator_id}
                        onChange={event => handleTargetChange(index, event)}
                      >
                         <option value=""></option>
                         {indicators.map(({ id, name }) => (
                           <option key={id} value={id}>
                             {name}
                           </option>
                         ))}
                      </SelectInput>
                      <TextInput
                       className="pr-6 pb-8 mb-4 w-full lg:w-1/5"
                       label="Функция"
                       name="function"
                       value={target.date_start}
                       onChange={event => handleTargetChange(index, event)}
                      />
                      <SelectInput
                       className="pr-6 pb-8 mb-4 w-full lg:w-1/5"
                       label="Условие"
                       name="condition"
                       value={target.fixed_period}
                       onChange={event => handleTargetChange(index, event)}
                      >
                       <option value="<">Меньше</option>
                       <option value="<=">Меньше или равно</option>
                       <option value="=">Равно</option>
                       <option value=">=">Больше или равно</option>
                       <option value=">">Больше</option>
                       <option value="<>">Не равно</option>
                      </SelectInput>
                      <TextInput
                       className="pr-6 pb-8 mb-4 w-full lg:w-1/5"
                       label="Цель"
                       name="goal_value"
                       value={target.goal_value}
                       onChange={event => handleTargetChange(index, event)}
                      />

                    </div>

                    <div className="-mr-6 -mb-8 flex flex-wrap">
                       <div className="pr-6 pb-8 mb-4 w-full lg:w-1/2">
                          <div className="bg-gray-100 p-4">
                             <h1 className="mb-4 font-bold text-lg">
                               Вознаграждение за выполнение цели
                             </h1>
                             <div className="-mr-6 -mb-8 flex flex-wrap">
                               <TextInput
                                 className="pr-6 pb-8 mb-4 w-full lg:w-1/2"
                                 label="Значение"
                                 name="award_value"
                                 value={target.award_value}
                                 onChange={event => handleTargetChange(index, event)}
                               />
                               <SelectInput
                                className="pr-6 pb-8 mb-4 w-full lg:w-1/2"
                                label="Тип"
                                name="award_type"
                                value={target.award_type}
                                onChange={event => handleTargetChange(index, event)}
                               >
                                <option value="fixed">Фиксировано</option>
                                <option value="percent">Процент</option>
                                <option value="unit">За единицу</option>
                               </SelectInput>
                             </div>
                          </div>
                       </div>
                       <div className="pr-6 pb-8 mb-4 w-full lg:w-1/2">
                          <div className="bg-gray-100 p-4">
                             <h1 className="mb-4 font-bold text-lg">
                               Штраф за не выполнение цели
                             </h1>
                             <div className="-mr-6 -mb-8 flex flex-wrap">
                                <TextInput
                                  className="pr-6 pb-8 mb-4 w-full lg:w-1/2"
                                  label="Значение"
                                  name="fine_value"
                                  value={target.fine_value}
                                  onChange={event => handleTargetChange(index, event)}
                                />
                                <SelectInput
                                 className="pr-6 pb-8 mb-4 w-full lg:w-1/2"
                                 label="Тип"
                                 name="fine_type"
                                 value={target.fine_type}
                                 onChange={event => handleTargetChange(index, event)}
                                >
                                 <option value="fixed">Фиксировано</option>
                                 <option value="percent">Процент</option>
                                 <option value="unit">За единицу</option>
                                </SelectInput>
                             </div>
                          </div>
                       </div>
                    </div>
                 </div>
               ))}

               <button
                  className="btn-indigo"
                  type="button"
               >
                  Добавить цель
               </button>
            </div>
            <div className="p-6 border-t border-gray-200">
               <h1 className="mb-4 font-bold text-xl">
                 Применимо для сотрудников
               </h1>
            </div>
            <div className="px-6 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
              <LoadingButton
                loading={sending}
                type="submit"
                className="btn-indigo"
              >
                Сохранить
              </LoadingButton>
            </div>
          </form>
        </div>
      </div>
    </Layout>
  );
};