import { jsx, jsxs } from 'react/jsx-runtime';
import * as React from 'react';
import { createContext, WIDTH_SIDE_NAVIGATION } from '@strapi/admin/strapi-admin';
import { Portal, Box, IconButton, Flex, ScrollArea } from '@strapi/design-system';
import { CaretUp, CaretDown } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { styled } from 'styled-components';

const [ActionsDrawerProvider, useActionsDrawer] = createContext('ActionsDrawer', null);
/* -------------------------------------------------------------------------------------------------
 * Styled Components
 * -----------------------------------------------------------------------------------------------*/ const DrawerContainer = styled(Portal)`
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: ${({ $isOpen })=>$isOpen ? 4 : 2};
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;

  ${({ theme })=>theme.breakpoints.medium} {
    z-index: 2;
    left: ${({ $hasSideNav })=>$hasSideNav ? WIDTH_SIDE_NAVIGATION : 0};
  }
`;
const DrawerOverlay = styled(Box)`
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity ${(props)=>props.theme.motion.timings['200']}
    ${(props)=>props.theme.motion.easings.easeInOutQuad};
  opacity: ${({ $isOpen })=>$isOpen ? 1 : 0};
  pointer-events: ${({ $isOpen })=>$isOpen ? 'auto' : 'none'};

  ${({ theme })=>theme.breakpoints.medium} {
    left: ${({ $hasSideNav })=>$hasSideNav ? WIDTH_SIDE_NAVIGATION : 0};
  }
`;
const ToggleButton = styled(IconButton)`
  padding: 0;
  border: none;
  background: ${({ theme })=>theme.colors.neutral200};
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
`;
const DrawerContent = styled(Flex)`
  flex-direction: column;
  align-items: stretch;
  position: relative;
  z-index: 1;
  pointer-events: auto;
`;
const DrawerContentInner = styled(ScrollArea)`
  max-height: ${({ $isOpen })=>$isOpen ? 'calc(100vh - 25rem)' // 25rem is arbitrary, to be able to see a bit of the content behind (navigation and header)
     : '0'};
  overflow: hidden;
  transition: max-height ${(props)=>props.theme.motion.timings['200']}
    ${(props)=>props.theme.motion.easings.easeInOutQuad};
  z-index: 1;
  pointer-events: auto;
`;
const Root = ({ children, hasContent = false, hasSideNav = false })=>{
    const [isOpen, setIsOpen] = React.useState(false);
    // Close drawer when there's no content
    React.useEffect(()=>{
        if (!hasContent) {
            setIsOpen(false);
        }
    }, [
        hasContent
    ]);
    return /*#__PURE__*/ jsx(ActionsDrawerProvider, {
        isOpen: isOpen,
        setIsOpen: setIsOpen,
        hasContent: hasContent,
        hasSideNav: hasSideNav,
        children: /*#__PURE__*/ jsx(DrawerContainer, {
            $hasSideNav: hasSideNav,
            $isOpen: isOpen,
            children: children
        })
    });
};
/* -------------------------------------------------------------------------------------------------
 * Overlay
 * -----------------------------------------------------------------------------------------------*/ const Overlay = ()=>{
    const ctx = useActionsDrawer('ActionsDrawer.Overlay', (s)=>s, false);
    const isOpen = ctx?.isOpen ?? false;
    const hasContent = ctx?.hasContent ?? false;
    const hasSideNav = ctx?.hasSideNav ?? false;
    const setIsOpen = ctx?.setIsOpen;
    if (!hasContent) {
        return null;
    }
    return /*#__PURE__*/ jsx(DrawerOverlay, {
        $isOpen: isOpen,
        $hasSideNav: hasSideNav,
        onClick: ()=>setIsOpen?.(false),
        "data-testid": "actions-drawer-overlay"
    });
};
const Header = ({ children })=>{
    const ctx = useActionsDrawer('ActionsDrawer.Header', (s)=>s, false);
    const isOpen = ctx?.isOpen ?? false;
    const hasContent = ctx?.hasContent ?? false;
    const setIsOpen = ctx?.setIsOpen;
    const { formatMessage } = useIntl();
    const toggleOpen = ()=>{
        setIsOpen?.((prev)=>!prev);
    };
    return /*#__PURE__*/ jsx(DrawerContent, {
        background: "neutral0",
        children: /*#__PURE__*/ jsxs(Flex, {
            paddingTop: 3,
            paddingBottom: 3,
            paddingLeft: 4,
            paddingRight: 4,
            gap: 3,
            borderStyle: "solid",
            borderWidth: isOpen ? '1px 0' : '1px 0 0 0',
            borderColor: "neutral150",
            children: [
                /*#__PURE__*/ jsx(Flex, {
                    flex: 1,
                    gap: 2,
                    alignItems: "center",
                    overflow: "hidden",
                    children: children
                }),
                hasContent && /*#__PURE__*/ jsx(ToggleButton, {
                    onClick: toggleOpen,
                    label: isOpen ? formatMessage({
                        id: 'content-manager.actions-drawer.close',
                        defaultMessage: 'Close more actions'
                    }) : formatMessage({
                        id: 'content-manager.actions-drawer.open',
                        defaultMessage: 'Open more actions'
                    }),
                    children: isOpen ? /*#__PURE__*/ jsx(CaretUp, {
                        fill: "neutral600"
                    }) : /*#__PURE__*/ jsx(CaretDown, {
                        fill: "neutral600"
                    })
                })
            ]
        })
    });
};
const Content = ({ children })=>{
    const ctx = useActionsDrawer('ActionsDrawer.Content', (s)=>s, false);
    const isOpen = ctx?.isOpen ?? false;
    return /*#__PURE__*/ jsx(DrawerContentInner, {
        $isOpen: isOpen,
        children: /*#__PURE__*/ jsx(Flex, {
            direction: "column",
            alignItems: "stretch",
            justifyContent: "flex-start",
            padding: {
                initial: 4,
                large: 0
            },
            background: "neutral0",
            children: children
        })
    });
};
/* -------------------------------------------------------------------------------------------------
 * ActionsDrawer
 * -----------------------------------------------------------------------------------------------*/ const ActionsDrawer = {
    Root,
    Overlay,
    Header,
    Content
};

export { ActionsDrawer, useActionsDrawer };
//# sourceMappingURL=ActionsDrawer.mjs.map