"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.inputActivator = exports.blockEnd = exports.blockStart = exports.inlineEnd = exports.inlineStart = void 0;
const react_1 = __importStar(require("react"));
const addon_knobs_1 = require("@storybook/addon-knobs");
const Text_1 = require("../Text");
const TextBlock_1 = require("../TextBlock");
const storybook_utilities_1 = require("../../storybook-utilities");
const Button_1 = require("../Button");
const TextField_1 = require("../TextField");
const View_1 = require("../View");
const Popover_1 = require("./Popover");
const meta = {
    component: Popover_1.Popover,
    title: 'checkout-web-ui/Popover',
    decorators: [
        addon_knobs_1.withKnobs,
        storybook_utilities_1.themeWithKnobs('primaryButton', 'secondaryButton'),
        (story) => (<div style={{
            position: 'absolute',
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
        }}>
        {story()}
      </div>),
    ],
};
exports.default = meta;
const StoryPopover = ({ placement, }) => {
    var _a, _b;
    const activatorRef = react_1.useRef();
    const activatorRefShort = react_1.useRef();
    const [open, setOpen] = react_1.useState(false);
    const [openShort, setOpenShort] = react_1.useState(false);
    return (<>
      <Button_1.Button ref={activatorRef} onPress={() => setOpen(!open)}>
        Click me
      </Button_1.Button>
      <Popover_1.Popover activator={(_a = activatorRef.current) !== null && _a !== void 0 ? _a : null} open={open} onClose={() => {
        setOpen(false);
    }} placement={placement}>
        <div style={{ maxWidth: '200px' }}>
          <View_1.View padding="base">
            <TextBlock_1.TextBlock>A thoughtful way to pay</TextBlock_1.TextBlock>
            <TextBlock_1.TextBlock>Tap don’t type</TextBlock_1.TextBlock>
            <TextBlock_1.TextBlock>
              Shop Pay remembers your important details, so you can fill carts,
              not forms. And everything is encrypted so you can speed safely
              through checkout.
            </TextBlock_1.TextBlock>
          </View_1.View>
        </div>
      </Popover_1.Popover>
      <br />
      <br />
      <Button_1.Button ref={activatorRefShort} onPress={() => setOpenShort(!openShort)}>
        Click me
      </Button_1.Button>
      <Popover_1.Popover activator={(_b = activatorRefShort.current) !== null && _b !== void 0 ? _b : null} open={openShort} onClose={() => {
        setOpenShort(false);
    }} placement={placement}>
        <div style={{ maxWidth: '200px' }}>
          <View_1.View padding="base">
            <TextBlock_1.TextBlock>Short</TextBlock_1.TextBlock>
          </View_1.View>
        </div>
      </Popover_1.Popover>
    </>);
};
exports.inlineStart = () => <StoryPopover placement="inlineStart"/>;
exports.inlineEnd = () => <StoryPopover placement="inlineEnd"/>;
exports.blockStart = () => <StoryPopover placement="blockStart"/>;
exports.blockEnd = () => <StoryPopover placement="blockEnd"/>;
function InputAsActivator() {
    var _a;
    const activatorRef = react_1.useRef();
    const [open, setOpen] = react_1.useState(false);
    const handleChange = react_1.useCallback(() => {
        setOpen(true);
    }, [setOpen]);
    return (<>
      <TextField_1.TextField onChange={handleChange} label="Email" ref={activatorRef}/>
      <Popover_1.Popover activator={(_a = activatorRef.current) !== null && _a !== void 0 ? _a : null} open={open} onClose={() => {
        setOpen(false);
    }}>
        <Text_1.Text>Hello world!</Text_1.Text>
      </Popover_1.Popover>
    </>);
}
exports.inputActivator = () => <InputAsActivator />;