"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.preventOverflow = exports.minimumInlineSize = exports.sameInlineSize = exports.placement = void 0;
const react_1 = __importStar(require("react"));
const InlineStack_1 = require("../InlineStack");
const Popper_1 = require("./Popper");
const meta = {
    component: Popper_1.Popper,
    title: 'checkout-web-ui/Popper',
    decorators: [
        (story) => (<div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
        }}>
        {story()}
      </div>),
    ],
};
exports.default = meta;
const Content = ({ children }) => {
    return (<div style={{
        border: '1px solid red',
        padding: 10,
    }}>
      {children}
    </div>);
};
const WithPlacement = () => {
    const [referenceElement, setReferenceElement,] = react_1.useState(null);
    const [placement, setPlacement] = react_1.useState('blockStart');
    const handleClick = (placement) => (event) => {
        setReferenceElement(event.currentTarget);
        setPlacement(placement);
    };
    return (<>
      {referenceElement && placement && (<Popper_1.Popper activator={referenceElement} placement={placement}>
          <Content>Popper</Content>
        </Popper_1.Popper>)}
      <InlineStack_1.InlineStack>
        <button onClick={handleClick('blockStart')}>blockStart</button>
        <button onClick={handleClick('blockEnd')}>blockEnd</button>
        <button onClick={handleClick('inlineStart')}>inlineStart</button>
        <button onClick={handleClick('inlineEnd')}>inlineEnd</button>
      </InlineStack_1.InlineStack>
    </>);
};
const WithSameInlineSize = () => {
    const [referenceElement, setReferenceElement,] = react_1.useState(null);
    const handleClick = (event) => {
        setReferenceElement(event.currentTarget);
    };
    return (<>
      {referenceElement && exports.placement && (<Popper_1.Popper activator={referenceElement} placement="blockStart" sameInlineSize>
          <Content>Popper</Content>
        </Popper_1.Popper>)}
      <button onClick={handleClick}>Popper with the same inline size</button>
    </>);
};
const WithMinimumInlineSize = () => {
    const [referenceElement, setReferenceElement,] = react_1.useState(null);
    const handleClick = (event) => {
        setReferenceElement(event.currentTarget);
    };
    return (<>
      {referenceElement && exports.placement && (<Popper_1.Popper activator={referenceElement} placement="blockStart" minInlineSize={480}>
          <Content>Popper</Content>
        </Popper_1.Popper>)}
      <button onClick={handleClick}>
        Popper with a minimum inline size (480px)
      </button>
    </>);
};
const WithOverflowPrevention = () => {
    const [referenceElement, setReferenceElement,] = react_1.useState(null);
    const handleClick = (event) => {
        setReferenceElement(event.currentTarget);
    };
    return (<div style={{
        display: 'flex',
        flex: '1',
        paddingRight: 50,
        justifyContent: 'flex-end',
    }}>
      {referenceElement && exports.placement && (<Popper_1.Popper activator={referenceElement} placement="blockStart" preventOverflow>
          <Content>Very loooooooooooooooooooooooong Popper</Content>
        </Popper_1.Popper>)}
      <button onClick={handleClick}>Prevent overflow</button>
    </div>);
};
exports.placement = () => <WithPlacement />;
exports.sameInlineSize = () => <WithSameInlineSize />;
exports.minimumInlineSize = () => <WithMinimumInlineSize />;
exports.preventOverflow = () => <WithOverflowPrevention />;