"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.Story3 = void 0;
const react_1 = __importStar(require("react"));
const index_util_1 = require("../BaseDatePicker/hooks/index.util");
const useSingleDatePickerModal_1 = require("./useSingleDatePickerModal");
const _1 = require(".");
const library_1 = require("../../../library");
const Button_1 = require("../../../components/Button");
const utils_1 = require("../../../utils");
const types_1 = require("../../../types");
const ThemeColor = 'gray';
const today = new types_1.PurpleDate().today;
const SingleDatePickerModalComponent = (hookInput) => {
    const [selectedDate, setSelectedDate] = (0, react_1.useState)(types_1.EMPTY_DATE);
    const [displayDate, setDisplayDate] = (0, react_1.useState)(today);
    const props = (0, useSingleDatePickerModal_1.useSingleDatePickerModal)(Object.assign(Object.assign({}, hookInput), { selectedDate,
        displayDate, onUpdateSelectedDate: setSelectedDate, onUpdateDisplayDate: setDisplayDate }));
    const displaySelectedStartDate = (0, index_util_1.convertDateToDisplayString)(selectedDate, '선택 전');
    return (react_1.default.createElement(react_1.default.Fragment, null,
        "\uC120\uD0DD\uB41C \uB0A0\uC9DC : ",
        displaySelectedStartDate,
        react_1.default.createElement(library_1.Spacing, { spaceNumber: 15 }),
        react_1.default.createElement(Button_1.SingleButton, { onClick: props.openModal, colorType: ThemeColor, purpose: "main" }, "SingleDatePicker OPEN"),
        react_1.default.createElement(_1.SingleDatePickerModal, Object.assign({}, props, { title: "\uC0C1\uD658\uC77C\uC790 \uC120\uD0DD", colorType: ThemeColor }))));
};
/**
 * updated 230523
 *
 * <a href="https://www.notion.so/Date-Picker-f1d8e79caa964c5d9f94015f5b6d1b54?pvs=4" target="_blank">노션페이지</a>
 * <br/>
 * 특정 날짜를 선택하거나 기간을 선택할 때 사용합니다.
 *
 */
const meta = {
    title: 'Component/DatePicker',
    component: SingleDatePickerModalComponent,
    tags: ['autodocs'],
};
exports.default = meta;
exports.Story3 = {
    render: (props) => react_1.default.createElement(SingleDatePickerModalComponent, Object.assign({}, props)),
    args: {
        disabledDates: [
            [new types_1.PurpleDate([2023, 9, 2]), new types_1.PurpleDate([2023, 9, 4])],
            [new types_1.PurpleDate([2023, 9, 27]), new types_1.PurpleDate([2023, 9, 27])],
        ],
        colorType: ThemeColor,
    },
    argTypes: {
        colorType: {
            options: utils_1.ColorTypeArray,
            control: { type: 'radio' },
        },
    },
};
exports.Story3.storyName = 'SingleDatePicker (바탐시트)';
