import { Swiper, SwiperSlide } from "swiper/react";
import { Calendar } from "../calendar/calendar";
import { Timepicker } from '../timepicker/timepicker'
import { Form } from "../form/form"
import { Confirm } from "../confirm/confirm"
import { TProps } from "../calendarDesktop/calendarDesktop";
import './calendarMobile.css'
import { Navigation } from "swiper";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "./calendarMobile.css"
import { Content } from "../content/content";




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


    return (
        <div className="calendar__mobile">
            <div className="calendar__container">
                <div className="slider">
                    <Content text={text}></Content>
                </div>
                <Swiper
                    rewind={true}
                    centeredSlides={true}
                    spaceBetween={0}
                    initialSlide={0}
                    slidesPerView={1}
                    modules={[Navigation]}
                    allowTouchMove={false}

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