import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import styled from "@emotion/styled";
import { Row } from "../../layouts/index.js";
import { Button } from "@uipath/apollo-wind";
import { useEffect, useRef } from "react";
import { CanvasIcon } from "../../utils/icon-registry.js";
const PanelHeader = styled.div`
  border-bottom: 1px solid var(--canvas-border-de-emp);
  padding: 8px 16px;
  background-color: var(--canvas-background-raised);
  border-radius: 8px 8px 0 0;
  flex-shrink: 0;
`;
const PanelContent = styled.div`
  flex: 1;
  min-height: 0;
  overflow-y: ${(props)=>false === props.scrollable ? 'hidden' : 'auto'};
  overflow-x: hidden;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: var(--canvas-background-secondary);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--canvas-border);
    border-radius: 3px;

    &:hover {
      background: var(--canvas-border-de-emp);
    }
  }
`;
function PanelChrome({ title, header, headerActions, children, onClose, scrollKey, scrollableContent = true }) {
    const contentRef = useRef(null);
    useEffect(()=>{
        if (contentRef.current && scrollKey) contentRef.current.scrollTop = 0;
    }, [
        scrollKey
    ]);
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            (header || title || onClose) && /*#__PURE__*/ jsx(PanelHeader, {
                children: header ?? /*#__PURE__*/ jsxs(Row, {
                    gap: 8,
                    justify: "between",
                    align: "center",
                    children: [
                        /*#__PURE__*/ jsx("span", {
                            className: "text-base font-bold",
                            children: title
                        }),
                        /*#__PURE__*/ jsxs(Row, {
                            gap: 8,
                            align: "center",
                            children: [
                                headerActions,
                                onClose && /*#__PURE__*/ jsx(Button, {
                                    variant: "ghost",
                                    size: "icon",
                                    className: "h-6 w-6",
                                    "aria-label": "Close",
                                    onClick: onClose,
                                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                                        icon: "x",
                                        size: 16
                                    })
                                })
                            ]
                        })
                    ]
                })
            }),
            /*#__PURE__*/ jsx(PanelContent, {
                ref: contentRef,
                scrollable: scrollableContent,
                children: children
            })
        ]
    });
}
export { PanelChrome };
