import './main.css'
import React, { useEffect, useState } from "react";
import { AnimationComponent } from "../animationComponent/animationComponent";
import { SliderComponent } from "../sliderComponent/sliderComponent";
import { CalendarDesktop } from "../calendarDesktop/calendarDesktop";
import { Multiplayer } from "../multiplayer/multiplayer";
import { Devices } from "../devices/devices";
import { Player } from "../player/player";
import { Analytics } from "../analytics/analytics";
import { CloudSolution } from "../cloudSolution/cloudSolution";
import { Demos } from "../demos/demos";
import { PhotoComponent } from "../photoComponent/photoComponent";
import { CalendarMobile } from "../calendarMobile/calendarMobile";
import moment, { Moment } from "moment";

import useScreenSize from 'use-screen-size'




export type TObjct = {
  calendar: boolean;
  timePicker: boolean;
  form: boolean;
  confirm: boolean;
};

export type TText = {
  text: object,
}

export const Main: React.FC<any> = ({ locale, cards }) => {

  const { width } = useScreenSize()
  const [displayForm, setDisplayForm] = useState(true);
  const [time, setTime] = useState(moment());

  useEffect(() => {
    setTime(moment().locale(locale))
  }, [locale])


  const [next, setNext] = useState({
    calendar: true,
    timePicker: false,
    form: false,
    confirm: false,
  });
  const size = useScreenSize()
  const isMobile = size.width >= 900 ? false : true;


  useEffect(() => {
    if (isMobile) {
      setNext({
        calendar: true,
        timePicker: true,
        form: true,
        confirm: false,
      })
    }
  }, [width])



  function updateTime(value: Moment) {
    setTime(value);
  }
  function navigationHandler(value: TObjct) {
    setNext(value);
  }

  function onExit() {
    setNext({
      calendar: true,
      timePicker: false,
      form: false,
      confirm: false,
    })
    setDisplayForm(true)
  }

  return (
    <main className="main">
      <AnimationComponent />
      <SliderComponent />
      <div className="calendar__mobile">
        <CalendarMobile
          locale={locale}
          text={'calendar'}
          setDisplayForm={setDisplayForm}
          displayForm={displayForm}
          setOpen={navigationHandler}
          open={next}
          time={time}
          onUpdate={updateTime}
          onExit={onExit}
          isMobile={isMobile}
        ></CalendarMobile>
      </div>
      <div className="calendar__desktop">
        <CalendarDesktop
          locale={locale}
          text={'calendar'}
          setDisplayForm={setDisplayForm}
          displayForm={displayForm}
          setOpen={navigationHandler}
          open={next}
          time={time}
          onUpdate={updateTime}
          onExit={onExit}
          isMobile={isMobile}
        ></CalendarDesktop>
      </div>
      <Multiplayer text={'multiplayer'} />
      <Devices text={'devices'} />
      <PhotoComponent text={'photoComponent'} />
      <Player text={'player'} />
      <Analytics text={'analytics'} />
      <CloudSolution text={'analytics'} />
      <Demos cards={cards} />
    </main>
  );
};