"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;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.closed = exports.focusedInput = exports.focusTrap = exports.blockSize = exports.maxInlineSizeFraction = exports.maxInlineSize = exports.iframeWithTitle = exports.iframe = exports.blockingWithHiddenTitle = exports.blocking = exports.longTitle = exports.title = exports.longText = exports.text = void 0;
const react_1 = __importStar(require("react"));
const addon_knobs_1 = require("@storybook/addon-knobs");
const test_utilities_1 = require("../../test-utilities");
const storybook_utilities_1 = require("../../storybook-utilities");
const Text_1 = require("../Text");
const Button_1 = require("../Button");
const InlineStack_1 = require("../InlineStack");
const BlockStack_1 = require("../BlockStack");
const TextField_1 = require("../TextField");
const index_1 = require("./index");
const meta = {
    component: index_1.Modal,
    title: 'checkout-web-ui/Modal',
    decorators: [addon_knobs_1.withKnobs, storybook_utilities_1.themeWithKnobs('headingLevel1')],
};
exports.default = meta;
const Template = (args) => (<>
    
    {process.env.A11Y_TESTS && <storybook_utilities_1.MockPrefersReducedMotion />}
    <ModalContainer {...args} title={args.title || test_utilities_1.faker.random.words(2)}/>
  </>);
const ModalContainer = (_a) => {
    var { title, open: openProp, children, blocking } = _a, rest = __rest(_a, ["title", "open", "children", "blocking"]);
    const [open, setOpen] = react_1.useState(openProp !== null && openProp !== void 0 ? openProp : true);
    const handleClose = () => setOpen(false);
    return (<>
      <Button_1.Button onPress={() => setOpen(true)}>Show modal</Button_1.Button>
      <index_1.Modal {...rest} title={title} open={open} {...(blocking
        ? { blocking: true }
        : { blocking: false, onClose: handleClose })}>
        {typeof children === 'function'
        ? children({ onClose: handleClose })
        : children}
      </index_1.Modal>
    </>);
};
exports.text = Template.bind({});
exports.text.args = {
    children: <Text_1.Text>{test_utilities_1.faker.lorem.paragraphs(1)}</Text_1.Text>,
};
exports.longText = Template.bind({});
exports.longText.args = {
    titleHidden: true,
    children: <Text_1.Text>{test_utilities_1.faker.lorem.paragraphs(100)}</Text_1.Text>,
};
exports.title = Template.bind({});
exports.title.args = {
    children: <Text_1.Text>{test_utilities_1.faker.lorem.paragraphs(1)}</Text_1.Text>,
};
exports.longTitle = Template.bind({});
exports.longTitle.args = {
    title: test_utilities_1.faker.random.words(8),
    children: <Text_1.Text>{test_utilities_1.faker.lorem.paragraphs(1)}</Text_1.Text>,
};
const BlockingContent = ({ onClose }) => {
    return (<BlockStack_1.BlockStack>
      <Text_1.Text>
        No generic close button, neither ESC nor backdrop click close the modal.
        The only way to close it is manually created buttons like the one below.
      </Text_1.Text>
      <Button_1.Button onPress={onClose}>Close Blocking Modal</Button_1.Button>
    </BlockStack_1.BlockStack>);
};
exports.blocking = Template.bind({});
exports.blocking.args = {
    blocking: true,
    children: ({ onClose }) => (<BlockingContent onClose={onClose}/>),
};
exports.blockingWithHiddenTitle = Template.bind({});
exports.blockingWithHiddenTitle.args = {
    blocking: true,
    titleHidden: true,
    children: ({ onClose }) => (<BlockingContent onClose={onClose}/>),
};
exports.iframe = Template.bind({});
exports.iframe.args = {
    source: 'http://www.example.com/',
    titleHidden: true,
};
exports.iframeWithTitle = Template.bind({});
exports.iframeWithTitle.args = {
    source: 'http://www.example.com/',
};
exports.maxInlineSize = Template.bind({});
exports.maxInlineSize.args = {
    maxInlineSize: 320,
    titleHidden: true,
    children: <Text_1.Text>{test_utilities_1.faker.lorem.paragraphs(3)}</Text_1.Text>,
};
exports.maxInlineSizeFraction = Template.bind({});
exports.maxInlineSizeFraction.args = {
    maxInlineSize: 0.7,
    titleHidden: true,
    children: <Text_1.Text>{test_utilities_1.faker.lorem.paragraphs(3)}</Text_1.Text>,
};
exports.blockSize = Template.bind({});
exports.blockSize.args = {
    source: 'http://www.example.com/',
    blockSize: 'fill',
    titleHidden: true,
};
exports.focusTrap = Template.bind({});
exports.focusTrap.args = {
    children: (<BlockStack_1.BlockStack>
      <Text_1.Text>{test_utilities_1.faker.lorem.paragraphs(1)}</Text_1.Text>
      <InlineStack_1.InlineStack>
        <Button_1.Button>You</Button_1.Button>
        <Button_1.Button>are</Button_1.Button>
        <Button_1.Button>trapped</Button_1.Button>
      </InlineStack_1.InlineStack>
    </BlockStack_1.BlockStack>),
};
exports.focusedInput = Template.bind({});
exports.focusedInput.args = {
    children: (<BlockStack_1.BlockStack spacing="base">
      <TextField_1.TextField autofocus label="First Name"/>
      <TextField_1.TextField label="Last Name"/>
      <Button_1.Button>Submit</Button_1.Button>
    </BlockStack_1.BlockStack>),
};
exports.closed = Template.bind({});
exports.closed.args = {
    open: false,
    children: <Text_1.Text>{test_utilities_1.faker.lorem.paragraphs(1)}</Text_1.Text>,
};