"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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Story1 = exports.BasicChipsComponent = exports.FillTabComponent = exports.TextTabComponent = void 0;
const react_1 = __importStar(require("react"));
const __1 = require("..");
const styled_1 = __importDefault(require("@emotion/styled"));
const meta = {
    title: 'Page/ColorType',
    tags: ['autodocs'],
};
exports.default = meta;
const Section = styled_1.default.div `
	margin: 0 auto;
	max-width: 1200px;
	padding: 20px;

	table {
		width: 100%;
		border-collapse: collapse;
	}

	th,
	td {
		width: 25%; /* 100%를 4개의 열로 나누어 균등하게 분배 */
		border: 1px solid #ddd;
		padding: 8px;
	}
`;
const TextTabComponent = (props) => {
    const [value, setValue] = (0, react_1.useState)('2');
    const commonProps = Object.assign(Object.assign({}, props), { type: 'fixed', value, onChange: setValue, list: [
            { label: '라벨1', value: '1' },
            { label: '라벨2', value: '2' },
            { label: '라벨3', value: '3' },
        ] });
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "TextTabs"),
        react_1.default.createElement(__1.TextTabs, Object.assign({}, commonProps))));
};
exports.TextTabComponent = TextTabComponent;
const FillTabComponent = (props) => {
    const [value, setValue] = (0, react_1.useState)('2');
    const commonProps = Object.assign(Object.assign({}, props), { value, onChange: setValue, list: [
            { label: '라벨1', value: '1' },
            { label: '라벨2', value: '2' },
            { label: '라벨3', value: '3' },
        ] });
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "FillTabs"),
        react_1.default.createElement(__1.FillTabs, Object.assign({}, commonProps))));
};
exports.FillTabComponent = FillTabComponent;
const BasicChipsComponent = (props) => {
    const [value, setValue] = (0, react_1.useState)(['1']);
    const commonProps = Object.assign(Object.assign({}, props), { value, onChange: setValue, list: [
            { label: '라벨1', value: '1' },
            { label: '라벨2', value: '2' },
            { label: '라벨3', value: '3' },
        ] });
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "BasicChips"),
        react_1.default.createElement(__1.BasicChips, Object.assign({}, commonProps))));
};
exports.BasicChipsComponent = BasicChipsComponent;
const ModalComponent = (props) => {
    const [visible1, setVisible1] = (0, react_1.useState)(false);
    const [visible2, setVisible2] = (0, react_1.useState)(false);
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "Modal"),
        react_1.default.createElement("table", null,
            react_1.default.createElement("tr", null,
                react_1.default.createElement("th", null, "DOUBLE_BUTTON.LEFT=DEFAULT"),
                react_1.default.createElement("th", null, "DOUBLE_BUTTON.LEFT=COLOR")),
            react_1.default.createElement("tr", null,
                react_1.default.createElement("td", null,
                    react_1.default.createElement("div", { style: { width: '200px' } },
                        react_1.default.createElement(__1.SingleButton, { colorType: props.colorType, purpose: "main", onClick: () => {
                                setVisible1((prev) => !prev);
                            } }, "\uBAA8\uB2EC \uC624\uD508"))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement("div", { style: { width: '200px' } },
                        react_1.default.createElement(__1.SingleButton, { colorType: props.colorType, purpose: "main", onClick: () => {
                                setVisible2((prev) => !prev);
                            } }, "\uBAA8\uB2EC \uC624\uD508"))))),
        react_1.default.createElement(__1.Modal, { visible: visible1, onMaskClick: () => {
                setVisible1(false);
            } },
            react_1.default.createElement(__1.Modal.Title, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subTitle: `서브타이틀을 입력해주세요` }),
            react_1.default.createElement(__1.Modal.Body, null,
                react_1.default.createElement(__1.Modal.Comment, null, "\uC124\uBA85\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694"),
                react_1.default.createElement(__1.Modal.UnderLineMiniButton, { text: "\uBBF8\uB2C8\uBC84\uD2BC" })),
            react_1.default.createElement(__1.Modal.DoubleButton, { purpose: "main", colorType: props.colorType, left: {
                    children: '취소',
                    onClick: () => {
                        setVisible1(false);
                    },
                }, right: {
                    children: '확인',
                    onClick: () => {
                        setVisible1(false);
                    },
                } }, "\uD655\uC778")),
        react_1.default.createElement(__1.Modal, { visible: visible2, onMaskClick: () => {
                setVisible2(false);
            } },
            react_1.default.createElement(__1.Modal.Title, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subTitle: `서브타이틀을 입력해주세요` }),
            react_1.default.createElement(__1.Modal.Body, null,
                react_1.default.createElement(__1.Modal.Comment, null, "\uC124\uBA85\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694"),
                react_1.default.createElement(__1.Modal.UnderLineMiniButton, { text: "\uBBF8\uB2C8\uBC84\uD2BC" })),
            react_1.default.createElement(__1.Modal.DoubleButton, { purpose: "sub", colorType: props.colorType, left: {
                    children: '취소',
                    onClick: () => {
                        setVisible2(false);
                    },
                }, right: {
                    children: '확인',
                    onClick: () => {
                        setVisible2(false);
                    },
                } }, "\uD655\uC778"))));
};
const ProgressBarComponent = (props) => {
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "ProgressBar"),
        react_1.default.createElement("table", null,
            react_1.default.createElement("tr", null,
                react_1.default.createElement("th", null, "progress=20")),
            react_1.default.createElement("tr", null,
                react_1.default.createElement("td", { style: { position: 'relative', height: '50px' } },
                    react_1.default.createElement(__1.ProgressBar, { progress: 20, colorType: props.colorType }))))));
};
const SingleButtonComponent = (props) => {
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "SingleButton"),
        react_1.default.createElement("table", null,
            react_1.default.createElement("tr", null,
                react_1.default.createElement("th", null, "purpose=main, enabled"),
                react_1.default.createElement("th", null, "purpose=sub, enabled"),
                react_1.default.createElement("th", null, "purpose=main, disabled"),
                react_1.default.createElement("th", null, "purpose=sub, disabled")),
            react_1.default.createElement("tr", null,
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.SingleButton, { colorType: props.colorType, purpose: "main" }, "\uBC84\uD2BC")),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.SingleButton, { colorType: props.colorType, purpose: "sub" }, "\uBC84\uD2BC")),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.SingleButton, { colorType: props.colorType, purpose: "main", disabled: true }, "\uBC84\uD2BC")),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.SingleButton, { colorType: props.colorType, purpose: "sub", disabled: true }, "\uBC84\uD2BC"))))));
};
const BoxMiniButtonComponent = (props) => {
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "BoxMiniButton"),
        react_1.default.createElement("table", null,
            react_1.default.createElement("tr", null,
                react_1.default.createElement("th", null, "enabled"),
                react_1.default.createElement("th", null, "disabled")),
            react_1.default.createElement("tr", null,
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.BoxMiniButton, { colorType: props.colorType }, "\uBBF8\uB2C8\uBC84\uD2BC")),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.BoxMiniButton, { colorType: props.colorType, disabled: true }, "\uBBF8\uB2C8\uBC84\uD2BC"))))));
};
const IconMiniButtonComponent = (props) => {
    const commonProps = {
        colorType: props.colorType,
        size: 's',
        icon: react_1.default.createElement(__1.ChevronRightSIcon, null),
    };
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "IconMiniButton"),
        react_1.default.createElement("table", null,
            react_1.default.createElement("tr", null,
                react_1.default.createElement("th", null, "enabled"),
                react_1.default.createElement("th", null, "disabled")),
            react_1.default.createElement("tr", null,
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.IconMiniButton, Object.assign({}, commonProps), "\uBBF8\uB2C8\uBC84\uD2BC")),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.IconMiniButton, Object.assign({}, commonProps, { disabled: true }), "\uBBF8\uB2C8\uBC84\uD2BC"))))));
};
const UnderLineMiniButtonComponent = (props) => {
    const commonProps = {
        colorType: props.colorType,
        size: 's',
    };
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "UnderLineMiniButton"),
        react_1.default.createElement("table", null,
            react_1.default.createElement("tr", null,
                react_1.default.createElement("th", null, "enabled"),
                react_1.default.createElement("th", null, "disabled")),
            react_1.default.createElement("tr", null,
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.UnderLineMiniButton, Object.assign({}, commonProps), "\uBBF8\uB2C8\uBC84\uD2BC")),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.UnderLineMiniButton, Object.assign({}, commonProps, { disabled: true }), "\uBBF8\uB2C8\uBC84\uD2BC"))))));
};
const RadioButtonComponent = (props) => {
    const commonProps = {
        colorType: props.colorType,
        onChange: () => {
            console.log('handleChange');
        },
    };
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "RadioButton"),
        react_1.default.createElement("table", null,
            react_1.default.createElement("tr", null,
                react_1.default.createElement("th", null, "Default, Active=On"),
                react_1.default.createElement("th", null, "Default, Active=Off"),
                react_1.default.createElement("th", null, "Disabled, Active=On"),
                react_1.default.createElement("th", null, "Disabled, Active=Off")),
            react_1.default.createElement("tr", null,
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.RadioButton, Object.assign({}, commonProps, { name: "1", value: "1", checked: true }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.RadioButton, Object.assign({}, commonProps, { name: "2", value: "2", checked: false }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.RadioButton, Object.assign({}, commonProps, { name: "3", value: "3", checked: true, disabled: true }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.RadioButton, Object.assign({}, commonProps, { name: "4", value: "4", checked: false, disabled: true })))))));
};
const FillCheckBoxComponent = (props) => {
    const commonProps = {
        colorType: props.colorType,
        onChange: () => {
            console.log('handleChange');
        },
    };
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "FillCheckBox"),
        react_1.default.createElement("table", null,
            react_1.default.createElement("tr", null,
                react_1.default.createElement("th", null, "Default, Active=On"),
                react_1.default.createElement("th", null, "Default, Active=Off"),
                react_1.default.createElement("th", null, "Disabled, Active=On"),
                react_1.default.createElement("th", null, "Disabled, Active=Off")),
            react_1.default.createElement("tr", null,
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "fill", checked: true }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "fill", checked: false }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "fill", checked: true, disabled: true }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "fill", checked: false, disabled: true })))))));
};
const LineCheckBoxComponent = (props) => {
    const commonProps = {
        colorType: props.colorType,
        onChange: () => {
            console.log('handleChange');
        },
    };
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "LineCheckBox"),
        react_1.default.createElement("table", null,
            react_1.default.createElement("tr", null,
                react_1.default.createElement("th", null, "Default, Active=On"),
                react_1.default.createElement("th", null, "Default, Active=Off"),
                react_1.default.createElement("th", null, "Disabled, Active=On"),
                react_1.default.createElement("th", null, "Disabled, Active=Off")),
            react_1.default.createElement("tr", null,
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "line", checked: true }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "line", checked: false }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "line", checked: true, disabled: true }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.CheckBox, Object.assign({}, commonProps, { type: "line", checked: false, disabled: true })))))));
};
const CheckMarkComponent = (props) => {
    const commonProps = {
        colorType: props.colorType,
        onChange: () => {
            console.log('handleChange');
        },
    };
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "CheckMark"),
        react_1.default.createElement("table", null,
            react_1.default.createElement("tr", null,
                react_1.default.createElement("th", null, "Default, Active=On"),
                react_1.default.createElement("th", null, "Default, Active=Off"),
                react_1.default.createElement("th", null, "Disabled, Active=On"),
                react_1.default.createElement("th", null, "Disabled, Active=Off")),
            react_1.default.createElement("tr", null,
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.CheckMark, Object.assign({}, commonProps, { checked: true }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.CheckMark, Object.assign({}, commonProps, { checked: false }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.CheckMark, Object.assign({}, commonProps, { checked: true, disabled: true }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.CheckMark, Object.assign({}, commonProps, { checked: false, disabled: true })))))));
};
const SwitchComponent = (props) => {
    const commonProps = {
        colorType: props.colorType,
        onChange: () => {
            console.log('handleChange');
        },
    };
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "Switch"),
        react_1.default.createElement("table", null,
            react_1.default.createElement("tr", null,
                react_1.default.createElement("th", null, "Default, Active=On"),
                react_1.default.createElement("th", null, "Default, Active=Off"),
                react_1.default.createElement("th", null, "Disabled, Active=On"),
                react_1.default.createElement("th", null, "Disabled, Active=Off")),
            react_1.default.createElement("tr", null,
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.Switch, Object.assign({}, commonProps, { value: true }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.Switch, Object.assign({}, commonProps, { value: false }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.Switch, Object.assign({}, commonProps, { value: true, disabled: true }))),
                react_1.default.createElement("td", null,
                    react_1.default.createElement(__1.Switch, Object.assign({}, commonProps, { value: false, disabled: true })))))));
};
const RangeDatePickerComponent = (props) => {
    const [selectedStartDate, setSelectedStartDate] = (0, react_1.useState)(new __1.PurpleDate([2024, 3, 18]));
    const [selectedEndDate, setSelectedEndDate] = (0, react_1.useState)(new __1.PurpleDate([2024, 4, 13]));
    const [displayDate, setDisplayDate] = (0, react_1.useState)(new __1.PurpleDate([2024, 3, 1]));
    const hookProps = (0, __1.useRangeDatePicker)({
        colorType: props.colorType,
        disabledDates: [
            [new __1.PurpleDate([2024, 3, 20]), new __1.PurpleDate([2024, 3, 20])],
            [new __1.PurpleDate([2024, 3, 8]), new __1.PurpleDate([2024, 3, 10])],
        ],
        selectedStartDate,
        selectedEndDate,
        displayDate,
        onUpdateSelectedStartDate: setSelectedStartDate,
        onUpdateSelectedEndDate: setSelectedEndDate,
        onUpdateDisplayDate: setDisplayDate,
    });
    return (react_1.default.createElement(Section, null,
        react_1.default.createElement("h3", null, "RangeDatePicker"),
        react_1.default.createElement(__1.BaseDatePicker, Object.assign({}, hookProps))));
};
const Component = (props) => {
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(ProgressBarComponent, Object.assign({}, props)),
        react_1.default.createElement(ModalComponent, Object.assign({}, props)),
        react_1.default.createElement(SingleButtonComponent, Object.assign({}, props)),
        react_1.default.createElement(BoxMiniButtonComponent, Object.assign({}, props)),
        react_1.default.createElement(IconMiniButtonComponent, Object.assign({}, props)),
        react_1.default.createElement(UnderLineMiniButtonComponent, Object.assign({}, props)),
        react_1.default.createElement(RadioButtonComponent, Object.assign({}, props)),
        react_1.default.createElement(FillCheckBoxComponent, Object.assign({}, props)),
        react_1.default.createElement(LineCheckBoxComponent, Object.assign({}, props)),
        react_1.default.createElement(CheckMarkComponent, Object.assign({}, props)),
        react_1.default.createElement(SwitchComponent, Object.assign({}, props)),
        react_1.default.createElement(exports.TextTabComponent, Object.assign({}, props)),
        react_1.default.createElement(exports.FillTabComponent, Object.assign({}, props)),
        react_1.default.createElement(exports.BasicChipsComponent, Object.assign({}, props)),
        react_1.default.createElement(RangeDatePickerComponent, Object.assign({}, props))));
};
exports.Story1 = {
    render: (props) => react_1.default.createElement(Component, Object.assign({}, props)),
    args: {
        colorType: 'gray',
    },
    argTypes: {
        colorType: {
            options: __1.ColorTypeArray,
            control: { type: 'select' },
        },
    },
};
exports.Story1.storyName = '컴포넌트 모음집';
