import React, { FC, RefObject } from "react";
import { Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import type { Swiper as SwiperClass } from "swiper/types";
import { Box } from "@mantine/core";
import AddDealProductButton from "@/modules/dealModularEditorTabs/FulfillmentBase/mobile/components/AddDealProductButton/AddDealProductButton";
import DealProductView from "@/modules/dealModularEditorTabs/FulfillmentBase/mobile/components/DealProductView/DealProductView";
import { useFulfillmentBaseContext } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/contexts/FulfillmentBaseContext";
import classes from "../../../FulfillmentBase.module.css";

type Props = {
    swiperRef: RefObject<SwiperClass | null>;
};

const ProductsTabSlider: FC<Props> = ({ swiperRef }) => {
    const { dealProductsList } = useFulfillmentBaseContext();

    return (
        <Swiper
            onSwiper={swiper => (swiperRef.current = swiper)}
            spaceBetween={15}
            modules={[Pagination]}
            direction={"vertical"}
            style={{ maxHeight: "calc(100vh - 110px)" }}
            className={classes["products-swiper"]}
            pagination={{ enabled: true, clickable: true }}>
            {dealProductsList.dealProducts.map(dealProduct => (
                <SwiperSlide>
                    <DealProductView dealProduct={dealProduct} />
                </SwiperSlide>
            ))}
            <SwiperSlide>
                <Box
                    p={"md"}
                    h={"100%"}>
                    <AddDealProductButton
                        fullWidth
                        h={"100%"}
                    />
                </Box>
            </SwiperSlide>
        </Swiper>
    );
};

export default ProductsTabSlider;
