import React, { useState } from 'react';
import Box from '../Box';
import PopoverNext from './PopoverNext';
import DatePicker from '../DatePicker';
import { Popover } from '..';
import { APPEND_TO } from './PopoverNext.constants';
export default {
    title: 'PopoverNext',
    component: PopoverNext,
};
const Template = () => {
    const [shownOld, setShownOld] = useState(false);
    const [open, setOpen] = useState(false);
    const common = {
        showDelay: 500,
        hideDelay: 1000,
        timeout: 2000,
    };
    return (React.createElement(Box, { gap: 8, padding: 50, direction: "vertical", align: "center" },
        React.createElement(Popover, { shown: shownOld, onClick: () => setShownOld(true), onClickOutside: () => setShownOld(false), ...common },
            React.createElement(Popover.Element, null,
                React.createElement("button", null, "Native button with old")),
            React.createElement(Popover.Content, null,
                React.createElement(Box, { padding: "10px" }, "Content"))),
        React.createElement(PopoverNext, { ...common, open: open, onOpenChange: (open, _) => setOpen(open) },
            React.createElement(PopoverNext.Trigger, null,
                React.createElement("button", null, "Native button with new")),
            React.createElement(PopoverNext.Content, null,
                React.createElement(Box, { padding: "10px" }, "Content")))));
};
const ComparisonTemplate = () => {
    const [open, setOpen] = useState(false);
    const common = {
        dynamicWidth: true,
        // minWidth: 300,
        // minWidth: 300,
        maxWidth: 300,
    };
    const content = 'VEry super long content oh so long';
    const random = (React.createElement("div", { style: { minWidth: '400px', height: '10px', background: 'red' } }));
    return (React.createElement(Box, { gap: 15, padding: 50, direction: "vertical", align: "center" },
        React.createElement(PopoverNext, { open: open, onOpenChange: setOpen, ...common },
            React.createElement(PopoverNext.Trigger, null,
                React.createElement("button", null, "Native button with next")),
            React.createElement(PopoverNext.Content, null,
                content,
                random)),
        React.createElement(Popover, { shown: true, ...common },
            React.createElement(Popover.Element, null,
                React.createElement("button", null, "Native button with old")),
            React.createElement(Popover.Content, null,
                content,
                random))));
};
const commonDatePickerProps = {
    onChange: () => { },
    width: 200,
    rtl: false, // popvoer should be placed on the right
    popoverProps: {
        appendTo: 'parent',
        dynamicWidth: true,
        // excludeClass: 'excludeClass',
        // flip: false,
        // fixed: false,
        // placement: 'top',
        // hideDelay: 0,
        // moveArrowTo: 0,
        // onMouseEnter: () => {},
        // onMouseLeave: () => {},
        // placement: 'top',
        // showDelay: 0,
        // timeout: 0,
        // maxWidth: 0,
        // minWidth: 0,
        // width: undefined,
        zIndex: 1000,
    },
};
const DatePickersTemplate = () => (React.createElement(Box, { gap: 2, paddingTop: 50, paddingLeft: 50 },
    React.createElement(DatePicker, { placeholderText: "old", ...commonDatePickerProps })));
const ScrollableContent = () => {
    const sameProps = {
        placement: 'top',
        fixed: false,
        flip: false,
        appendTo: APPEND_TO.scrollParent,
    };
    return (React.createElement("div", { "data-hook": "parent-of-scrollable", style: {
            marginTop: '100px',
            position: 'relative',
            border: '1px solid black',
        } },
        React.createElement("div", { "data-hook": "scrollable", style: {
                overflow: 'auto',
                position: 'relative',
                height: '200px',
                border: '1px solid green',
            } },
            React.createElement("div", { style: { padding: '25px 25px 150px' } },
                React.createElement(Box, { width: "350px", border: "solid 1px red", padding: "60px", height: 160, gap: 8 },
                    React.createElement(Popover, { shown: true, showArrow: true, ...sameProps },
                        React.createElement(Popover.Element, null,
                            React.createElement("button", null, "I am an plain Button")),
                        React.createElement(Popover.Content, null,
                            React.createElement(Box, { padding: "12px 24px", width: 140 }, "Old popover Content"))),
                    React.createElement(PopoverNext, { ...sameProps, open: true },
                        React.createElement(PopoverNext.Trigger, null,
                            React.createElement("button", null, "Popover trigger")),
                        React.createElement(PopoverNext.Content, null,
                            React.createElement(Box, { padding: "12px 24px", width: 140 }, "New popover Content"))))))));
};
const ScrollableTemplate = () => (React.createElement(ScrollableContent, null));
const ScrollableWrapper = ({ children, height }) => {
    return (React.createElement("div", { style: {
            overflow: 'hidden',
            position: 'relative',
            border: '1px solid black',
        } },
        React.createElement("div", { "data-hook": "scrollable", style: {
                overflow: 'auto',
                height,
            } },
            React.createElement("div", { style: { padding: '15px 25px 25px' } },
                React.createElement(Box, { width: "150px", overflow: "hidden", border: "solid 1px black", padding: "30px" }, children)))));
};
const ScrollableContainer = () => {
    const HEIGHT = '50px';
    const commonProps = {
        placement: 'bottom',
        fixed: true,
        flip: true,
        appendTo: 'scrollParent',
        dataHook: 'popover',
    };
    return (React.createElement(Box, { gap: 3, direction: "vertical" },
        React.createElement(ScrollableWrapper, { height: HEIGHT },
            React.createElement(PopoverNext, { ...commonProps, open: true, onOpenChange: () => { }, focusManagerEnabled: false },
                React.createElement(PopoverNext.Trigger, null,
                    React.createElement("button", null, "Popover trigger")),
                React.createElement(PopoverNext.Content, null,
                    React.createElement(Box, { padding: "30px", backgroundColor: "pink", borderRadius: "inherit" }, "Content")))),
        React.createElement(ScrollableWrapper, { height: HEIGHT },
            React.createElement(Popover, { ...commonProps, shown: true, onShow: () => { } },
                React.createElement(Popover.Element, null,
                    React.createElement("button", null, "Popover trigger")),
                React.createElement(Popover.Content, null,
                    React.createElement(Box, { padding: "30px", backgroundColor: "pink", borderRadius: "inherit" }, "Content"))))));
};
const ScrollableScrollParentTemplate = () => React.createElement(ScrollableContainer, null);
export const Basic = {
    render: () => React.createElement(Template, null),
};
Basic.args = {};
export const Comparison = {
    render: () => React.createElement(ComparisonTemplate, null),
};
Comparison.args = {};
export const DatePickers = DatePickersTemplate.bind({});
DatePickers.args = {};
export const Scrollable = ScrollableTemplate.bind({});
Scrollable.args = {};
export const ScrollableScrollParent = ScrollableScrollParentTemplate.bind({});
ScrollableScrollParent.args = {};
//# sourceMappingURL=PopoverNext.story.js.map