"use client";

import React, { FC } from "react";
import { Drawer } from "@mantine/core";
import DrawerBody from "@/app/clients/drawers/ClientMarketplacesDrawer/components/DrawerBody";
import { MarketplacesContextProvider } from "@/app/clients/drawers/ClientMarketplacesDrawer/contexts/MarketplacesContext";
import { DrawerProps } from "@/drawers/types";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { ClientSchema } from "@/lib/client";

type Props = {
    client: ClientSchema;
};

const ClientMarketplaceDrawer: FC<DrawerProps<Props>> = ({
    opened,
    onClose,
    props,
}) => {
    const isMobile = useIsMobile();

    return (
        <Drawer
            size={isMobile ? "100%" : "40%"}
            position={"right"}
            onClose={onClose}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton={isMobile}
            opened={opened}
            trapFocus={false}
            title={isMobile ? "Маркетплейсы" : ""}
            styles={{
                body: {
                    display: "flex",
                    flexDirection: "column",
                    height: isMobile ? "var(--mobile-page-height)" : "100%",
                    padding: isMobile ? 0 : "var(--mantine-spacing-xs)",
                },
                header: {
                    paddingBlock: 0,
                },
            }}>
            <MarketplacesContextProvider client={props.client}>
                <DrawerBody />
            </MarketplacesContextProvider>
        </Drawer>
    );
};

export default ClientMarketplaceDrawer;
