"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 NavComponent = (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, { onClick: toggleOpen, colorType: "gray", purpose: "main" }, "\uBAA8\uB2EC \uC624\uD508")),
        react_1.default.createElement(_1.NavBottomSheet, Object.assign({}, props, { visible: open }),
            react_1.default.createElement(_1.NavBottomSheet.Navigation, { hasBackgroundColor: true, contentColor: "gray", rightArea: { type: 'closeIcon', handleClickButton: toggleOpen } }),
            react_1.default.createElement(_1.NavBottomSheet.Body, null, "Hello"),
            react_1.default.createElement(_1.NavBottomSheet.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/NavBottomSheet',
    component: NavComponent,
    tags: ['autodocs'],
};
exports.default = meta;
// Props 교체 가능
exports.Story1 = {
    render: (props) => react_1.default.createElement(NavComponent, Object.assign({}, props)),
    args: {
        minHeight: 'full',
    },
    argTypes: {},
    parameters: {
        docs: {
            description: {
                story: `
- 바텀시트 내에서 depth가 발생할 때 혹은 사용자가 어떤 곳에 머물고 있는지 가볍게 알려줄 때 사용합니다.
<br/>
- 네비게이션바 아래부터 버튼이 없는 경우는 가장 하단까지, 버튼이 있는 경우는 버튼 위까지 스크롤 영역으로 지정합니다.`,
            },
        },
    },
};
exports.Story1.storyName = '바탐시트 - 네비게이션바';
