import React from "react";
import "../sliderComponent/sliderComponent.css";
import "./calendar.css";
import { Moment } from "moment";
import Timepicker from "../timepicker/timepicker";
import Form from "../form/form";
import { TObjct } from "../../App";
import "../../styles/styles.css";
import { Confirm } from "../confirm/confirm";
import { Calendar } from "../calendar/calendar";
import { Content } from '../content/content'


export type TProps = {
  time: Moment;
  onUpdate: (value: Moment) => void;
  setOpen: (value: TObjct) => void;
  onExit: () => void;
  open: TObjct;
  displayForm: boolean
  setDisplayForm: (value: boolean) => void
  isMobile: boolean;
  text?: any;
  locale?: string;
};

export const CalendarDesktop: React.FC<TProps> = ({
  time,
  onUpdate,
  setOpen,
  open,
  onExit,
  displayForm,
  setDisplayForm,
  isMobile,
  text,
  locale
}) => {
  console.log(text, 'here2')

  return (
    <div className="calendar__container">
        <Content text={text}></Content>
      <div className="wrapper">
        <Calendar
          text={text}
          setDisplayForm={setDisplayForm}
          displayForm={displayForm}
          open={open}
          setOpen={setOpen}
          onUpdate={onUpdate}
          time={time}
          onExit={onExit}
          isMobile={isMobile}
          locale={locale}

        />
        <Timepicker
          text={text}
          setDisplayForm={setDisplayForm}
          displayForm={displayForm}
          open={open}
          setOpen={setOpen}
          onUpdate={onUpdate}
          time={time}
          onExit={onExit}
          isMobile={isMobile}

        ></Timepicker>
        <Form
          text={text}
          setDisplayForm={setDisplayForm}
          displayForm={displayForm}
          open={open}
          setOpen={setOpen}
          onUpdate={onUpdate}
          time={time}
          onExit={onExit}
          isMobile={isMobile}

        ></Form>
        <Confirm
          text={text}
          setDisplayForm={setDisplayForm}
          displayForm={displayForm}
          open={open}
          setOpen={setOpen}
          onUpdate={onUpdate}
          time={time}
          onExit={onExit}
          isMobile={isMobile}
        ></Confirm>
      </div>
      <div className="main-block__subblock-container">
        <div className="main-block_subblock">
          {text.mainBlockSubblock}
        </div>
      </div>
    </div>
  );
};
