import "./form.css";
import "../timepicker/timepicker.css"
import "../../index.css"
import { TProps } from "../calendarDesktop/calendarDesktop";
import { useSwiper } from 'swiper/react';


export const Form: React.FC<TProps> = ({ time, open, setOpen, displayForm, setDisplayForm, isMobile, text }) => {
  const swiper = useSwiper();


  function goBack() {
    if (isMobile) {
      setOpen({
        calendar: false,
        timePicker: true,
        form: true,
        confirm: false
      });
      swiper.slidePrev()
    } else {
      setOpen({
        calendar: false,
        timePicker: true,
        form: false,
        confirm: false
      });
    }
  }


  function handleConfirm() {
    if (isMobile) {
      setOpen({
        calendar: false,
        timePicker: false,
        form: false,
        confirm: true
      })
      swiper.slideNext()  
    } else {
      setDisplayForm(false)
      setOpen({
        calendar: false,
        timePicker: false,
        form: false,
        confirm: true
      })  
    }

  }



  return (
    <div data-aos="fade-up" data-aos-delay="500" className={displayForm ? " form__container  aos-init aos-animate" : "form__container_disabled aos-init aos-animate"}>
      <div className={open.form ? 'opacity_active' : 'opacity'}>
        <div className="timepicker__header">
          <div className="caption__container">
            <div onClick={goBack} className="button__arrow_back"></div>
            <span className="calendar__caption">{text.formCaption}</span>
          </div>
          <div className="line line_time"></div>
          <div className="date date_time">{time.format("DD MMM, HH:mm")}</div>
        </div>
        <div className="form__block">
          <div>
            <form className="form">
              <input
                name="tel"
                className="form__input"
                type="text"
                placeholder={text.placeholders.name}
              ></input>
              <input
                name="email"
                className="form__input"
                type="number"
                placeholder={text.placeholders.phoneNumber}
              ></input>
              <input
                name="name"
                className="form__input"
                type="email"
                placeholder={text.placeholders.email}
              ></input>
            </form>
          </div>
        </div>
      </div>
      <button onClick={handleConfirm} disabled={!open.form} type="submit" className={open.form ? 'button__submit' : 'button__submit button__submit_disabled'}>
        {text.buttons.plan}
      </button>
    </div>
  );
};

export default Form;