"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Story1 = void 0;
const react_1 = __importStar(require("react"));
const _1 = require(".");
const Button_1 = require("../../Button");
const TitleComponent = (props) => {
    const [open, setOpen] = (0, react_1.useState)(false);
    const toggleOpen = () => {
        setOpen((prev) => !prev);
    };
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("div", { style: { width: '200px' } },
            react_1.default.createElement(Button_1.SingleButton, { colorType: "gray", purpose: "main", onClick: toggleOpen }, "\uBAA8\uB2EC \uC624\uD508")),
        react_1.default.createElement(_1.TitleBottomSheet, Object.assign({}, props, { visible: open }),
            react_1.default.createElement(_1.TitleBottomSheet.Body, null,
                react_1.default.createElement(_1.TitleBottomSheet.Title, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subTitle: "\uC11C\uBE0C \uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694" })),
            react_1.default.createElement(_1.TitleBottomSheet.SingleButton, { colorType: "gray", purpose: "main", onClick: toggleOpen }, "\uBC84\uD2BC"))));
};
/**
 * updated 230523
 *
 * <a href="https://www.notion.so/Bottom-Sheet-295e90bcc23247bb9a14b354a142df6d?pvs=4" target="_blank">노션페이지</a>
 * <br/>
 * 화면 하단에서 상단으로 들어오는 컨테이너 영역입니다. <br/>
 * 현재 페이지를 벗어나지 않고 관련된 정보 제공하거나 동작을 제어합니다.
 *
 */
const meta = {
    title: 'Component/BottomSheet/TitleBottomSheet',
    component: TitleComponent,
    tags: ['autodocs'],
};
exports.default = meta;
// Props 교체 가능
exports.Story1 = {
    render: (props) => react_1.default.createElement(TitleComponent, Object.assign({}, props)),
    args: {
        minHeight: 'full',
    },
    argTypes: {},
    parameters: {
        docs: {
            description: {
                story: `
- 바텀시트가 필요할 때 기본적으로 사용되며 사용자가 어떤 행동을 해야하는지 혹은 정보를 명확하게 인지시킬 때 사용합니다.  
<br/>
- 하단 버튼이 없는 경우는 전체 범위를, 하단 버튼이 있는 경우는 버튼 위까지 스크롤 영역으로 지정합니다. `,
            },
        },
    },
};
exports.Story1.storyName = '바탐시트 - 타이틀';
