"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.selectionToggle = void 0;
const react_1 = __importStar(require("react"));
const TextBlock_1 = require("../TextBlock");
const ToggleButton_1 = require("./ToggleButton");
const ToggleButtonGroup_1 = require("./ToggleButtonGroup");
const meta = {
    component: ToggleButton_1.ToggleButton,
    title: 'checkout-web-ui/ToggleButton',
    decorators: [
        (story) => (<div style={{
            padding: '1em',
        }}>
        {story()}
      </div>),
    ],
};
exports.default = meta;
function SelectionToggle() {
    const [selected, setSelected] = react_1.useState('');
    return (<ToggleButtonGroup_1.ToggleButtonGroup id="id" selectedItem={selected} onChange={(id) => {
        setSelected(id);
    }}>
      <ToggleButton_1.ToggleButton id="first">
        <TextBlock_1.TextBlock>Hello</TextBlock_1.TextBlock>
      </ToggleButton_1.ToggleButton>
      <ToggleButton_1.ToggleButton id="second">
        <TextBlock_1.TextBlock>Hello</TextBlock_1.TextBlock>
      </ToggleButton_1.ToggleButton>
      <ToggleButton_1.ToggleButton id="third">
        <TextBlock_1.TextBlock>Hello</TextBlock_1.TextBlock>
      </ToggleButton_1.ToggleButton>
      <ToggleButton_1.ToggleButton id="fourth">
        <TextBlock_1.TextBlock>
          Hello Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam,
          error repellendus iusto ad numquam illum eum excepturi officia impedit
          rem sequi nesciunt voluptatibus inventore libero! Ex delectus
          voluptate sequi atque?
        </TextBlock_1.TextBlock>
      </ToggleButton_1.ToggleButton>
    </ToggleButtonGroup_1.ToggleButtonGroup>);
}
exports.selectionToggle = () => <SelectionToggle />;