"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.accordion = exports.basicCollapsible = 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 BlockSpacer_1 = require("../BlockSpacer");
const Button_1 = require("../Button");
const Text_1 = require("../Text");
const View_1 = require("../View");
const Collapsible_1 = require("./Collapsible");
// eslint-disable-next-line import/no-anonymous-default-export
exports.default = {
    title: 'checkout-web-ui/Collapsible',
    component: Collapsible_1.Collapsible,
    decorators: [addon_knobs_1.withKnobs, storybook_utilities_1.themeWithKnobs()],
};
exports.basicCollapsible = (args) => <Story {...args}/>;
exports.basicCollapsible.args = {
    id: 'basic-collapsible',
    minSize: 0,
    fade: false,
};
exports.basicCollapsible.story = {
    name: 'Collapsible',
};
const content = test_utilities_1.faker.lorem.paragraphs(3);
function Story({ id, minSize = 0, fade }) {
    const [open, setOpen] = react_1.useState(true);
    const handleToggle = react_1.useCallback(() => setOpen((open) => !open), []);
    return (<>
      <Button_1.Button onPress={handleToggle} aria-expanded={open} aria-controls={id}>
        Toggle
      </Button_1.Button>
      <BlockSpacer_1.BlockSpacer />
      <Collapsible_1.Collapsible open={open} id={id} minSize={minSize} fade={fade}>
        <View_1.View border="base" padding="base">
          <Text_1.Text>{content}</Text_1.Text>
        </View_1.View>
      </Collapsible_1.Collapsible>
    </>);
}
exports.accordion = () => <Accordion />;
function Accordion() {
    const [openId, setOpenId] = react_1.useState(-1);
    return (<>
      <Button_1.Button onPress={() => {
        setOpenId(0);
    }} fill kind="secondary" aria-expanded={openId === 0} aria-controls="collapsible0">
        Panel 1
      </Button_1.Button>
      <Collapsible_1.Collapsible open={openId === 0} id="collapsible0">
        <View_1.View padding="base">
          <Text_1.Text>{content}</Text_1.Text>
        </View_1.View>
      </Collapsible_1.Collapsible>
      <Button_1.Button onPress={() => {
        setOpenId(1);
    }} fill kind="secondary" aria-expanded={openId === 1} aria-controls="collapsible1">
        Panel 2
      </Button_1.Button>
      <Collapsible_1.Collapsible open={openId === 1} id="collapsible1">
        <View_1.View padding="base">
          <Text_1.Text>{content}</Text_1.Text>
        </View_1.View>
      </Collapsible_1.Collapsible>
      <Button_1.Button onPress={() => {
        setOpenId(2);
    }} fill kind="secondary" aria-expanded={openId === 2} aria-controls="collapsible2">
        Panel 3
      </Button_1.Button>
      <Collapsible_1.Collapsible open={openId === 2} id="collapsible2">
        <View_1.View padding="base">
          <Text_1.Text>{content}</Text_1.Text>
        </View_1.View>
      </Collapsible_1.Collapsible>
    </>);
}