import "./PlanComponent.css";
import logo from "./Aivaz.svg";

import { useState } from "react";

import * as moment from "moment";
import "moment/locale/ru";
import { motion, AnimatePresence } from "framer-motion";

import { CalendarComponent } from "./CalendarComponent/CalendarComponent";
import { TimepickerComponent } from "./TimepickerComponent/TimepickerComponent";
import { Form } from "./Form/Form";

import { Finish } from "./Finish/Finish";
import { useAppSelector } from "hooks/redux";
import { popupAnimation } from "utils/animationProps";

export const PlanComponent: React.FC<any> = () => {
  const { isDone, isCalendar, isTimepicker, isForm, time } = useAppSelector(
    (state) => state.planReducer
  );

  return (
    <div className="content-container-plan">
      <img alt="logo" src={logo} className="plan-logo"></img>
      <div className="calendar-position">
        <AnimatePresence mode="wait">
          {isCalendar && (
            <motion.div
              style={{ height: "560px" }}
              key={1}
              variants={popupAnimation}
              initial={"hidden"}
              animate={"show"}
              exit={"hidden"}
            >
              <CalendarComponent time={time}></CalendarComponent>
            </motion.div>
          )}
          {isTimepicker && (
            <motion.div
              style={{ height: "560px" }}
              key={2}
              variants={popupAnimation}
              initial={"hidden"}
              animate={"show"}
              exit={"hidden"}
            >
              <TimepickerComponent time={time}></TimepickerComponent>
            </motion.div>
          )}
          {isForm && (
            <motion.div
              style={{ height: "560px" }}
              key={3}
              variants={popupAnimation}
              initial={"hidden"}
              animate={"show"}
              exit={"hidden"}
            >
              <Form time={time}></Form>
            </motion.div>
          )}
          {isDone && (
            <motion.div
              style={{ height: "560px" }}
              key={4}
              variants={popupAnimation}
              initial={"hidden"}
              animate={"show"}
              exit={"hidden"}
            >
              <Finish></Finish>
            </motion.div>
          )}
        </AnimatePresence>
        {!isDone && (
          <>
            <div className="line line-calendar"></div>
            <button className="button button-type-small">
              На сайт жилого комплекса
            </button>
          </>
        )}
      </div>
    </div>
  );
};