import chevron from "images/icons/ChevronLeft.svg";
import "./Form.css";

import { planSlice } from "store/reducers/planSlice";
import useFormWithValidation from "hooks/useFormWithValidation";
import { useAppDispatch, useAppSelector } from "hooks/redux";

import { useEffect, useState } from "react";

export const Form: React.FC<any> = ({ time }) => {
  const [error, showError] = useState(false)
  const { values, handleChangeState, resetForm, errors, isValid } =
    useFormWithValidation();

  const dispatch = useAppDispatch();
  const { handleNavigation, handleTimeValue } = planSlice.actions;


  useEffect(() => {
    resetForm();
  }, [resetForm]);



  function handleSubmit(e: React.SyntheticEvent) {
    e.preventDefault();

  }



  const handleReturn = () => {
    dispatch(
      handleNavigation({
        isDone: false,
        isCalendar: false,
        isTimepicker: true,
        isForm: false,
      })
    );
  };

  return (
    <div className="calendar-container">
      <h3 className="plan-title">
        Расскажите о себе.
      </h3>
      <button
        onClick={() => handleReturn()}
        style={{ width: "141px", padding: "4px 16px 4px 4px", height: "32px" }}
        className="button button-type-small button-plan"
      >
        <img src={chevron}></img>
        Выбор времени
      </button>
      <div className="calendar" style={{ height: "auto" }}>
        <div className="calendar-header">
          <span className="calendar-date">{time.format("DD MMM, LT")}</span>
        </div>
        <form noValidate onSubmit={handleSubmit} className="form">
          <div className="form-input-container">
            <label className="form-input-caption">Имя</label>
            <div className={errors.name ? "form-border-error" : 'form-border'}>
              <input required onChange={handleChangeState} name='name' value={values.name} minLength={2} maxLength={30} className="form-input" type="text"></input>
            </div>
            <span className={errors.name ? "error-caption error-caption-active" : "error-caption"}>{errors.name}</span>
          </div>
          <div className="form-input-container">
            <label className="form-input-caption">E-mail</label>
            <div className={errors.email ? "form-border-error" : 'form-border'}>
              <input required onChange={handleChangeState} name='email' value={values.email} className="form-input" type="email"></input>
            </div>
            <span className={errors.email ? "error-caption error-caption-active" : "error-caption"}>{errors.email}</span>


          </div>
          <button
            type="submit"
            disabled={!isValid}
            style={{ marginTop: "24px" }}
            className="button button-primary"
          >
            Запланировать
          </button>
        </form>
      </div>
    </div>
  );
};
