import React, { forwardRef, useMemo } from "react";
import { Overlay } from "../Overlay";
import { IconClose } from "../_Icon";
import { cx } from "../../utils";
import { getPanelZIndex } from "./utils";
import { classes, tokens } from "./BottomSheet.tokens";
import { useBottomSheet } from "./hooks/useBottomSheet";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { BeforeHeader, CloseButton, StyledBody, Footer, Handler, Header, Panel, PanelContent } from "./BottomSheet.styles";
const noop = ()=>{};
export const bottomSheetRoot = (Root)=>/*#__PURE__*/ forwardRef(({ opened = false, children, contentBeforeHeader, contentHeader, contentFooter, handlePlacement = 'inner', hasClose = true, hasHandle = true, withOverlay = true, withBlur = true, withTransition = true, maxHeight = '66dvh', zIndex = 1000, onClose = noop, className, view, size, ...rest }, ref)=>{
        const content = useMemo(()=>[
                contentBeforeHeader,
                contentHeader,
                children,
                contentFooter
            ], [
            contentBeforeHeader,
            contentHeader,
            children,
            contentFooter
        ]);
        const { panelRef, bodyRef, handleRef, overflows, headerDivider, footerDivider } = useBottomSheet({
            opened,
            content,
            onClose,
            hasHandle
        });
        const panelClassName = cx(classes.panel, withTransition && classes.animated, !opened && classes.closed);
        return /*#__PURE__*/ React.createElement(Root, {
            ref: ref,
            className: className,
            view: view,
            size: size,
            ...rest
        }, withOverlay && opened && /*#__PURE__*/ React.createElement(Overlay, {
            zIndex: String(zIndex),
            backgroundColorProperty: withBlur ? `var(${tokens.overlayWithBlurColor})` : `var(${tokens.overlayColor})`,
            withBlur: withBlur,
            isClickable: true,
            onOverlayClick: onClose
        }), /*#__PURE__*/ React.createElement(Panel, {
            ref: panelRef,
            className: panelClassName,
            style: {
                maxHeight,
                zIndex: getPanelZIndex(zIndex)
            }
        }, hasHandle && /*#__PURE__*/ React.createElement(Handler, {
            ref: handleRef,
            $placement: handlePlacement,
            className: classes.hasHandle
        }), hasClose && /*#__PURE__*/ React.createElement(CloseButton, {
            view: "clear",
            onClick: onClose,
            "aria-label": "Закрыть"
        }, /*#__PURE__*/ React.createElement(IconClose, {
            size: "s",
            color: "inherit"
        })), /*#__PURE__*/ React.createElement(PanelContent, null, contentBeforeHeader && /*#__PURE__*/ React.createElement(BeforeHeader, {
            className: classes.beforeHeaderSlot
        }, contentBeforeHeader), contentHeader && /*#__PURE__*/ React.createElement(Header, {
            className: cx(classes.headerSlot, headerDivider && classes.headerDividerVisible)
        }, contentHeader), children && /*#__PURE__*/ React.createElement(StyledBody, {
            ref: bodyRef,
            className: cx(classes.bodySlot, overflows && classes.scrollable)
        }, children), contentFooter && /*#__PURE__*/ React.createElement(Footer, {
            className: cx(classes.footerSlot, footerDivider && classes.footerDividerVisible)
        }, contentFooter))));
    });
export const bottomSheetConfig = {
    name: 'BottomSheet',
    tag: 'div',
    layout: bottomSheetRoot,
    base: '',
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        }
    },
    defaults: {
        view: 'default',
        size: 'm'
    }
};
