"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SemanticPalette = exports.BasicPalette = void 0;
const react_1 = __importDefault(require("react"));
const _1 = require(".");
const Divider_1 = require("../../components/Divider");
const Spacing_1 = require("../../library/Spacing");
const utils_1 = require("../../utils");
const Palette = ({ fixedColor, name, color, variants = [''], palette }) => {
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'row' } }, variants.map((variant) => {
            const background = fixedColor ? fixedColor : palette === null || palette === void 0 ? void 0 : palette[`${color + variant}`].toLocaleUpperCase();
            return (react_1.default.createElement("div", { key: variant || '-0' },
                react_1.default.createElement("div", null,
                    `${name || (color === null || color === void 0 ? void 0 : color.toLocaleLowerCase())} ${variant}`,
                    react_1.default.createElement("br", null),
                    react_1.default.createElement("div", { style: { color: '#9D9D9D' } }, background)),
                react_1.default.createElement("div", { style: { width: '120px', height: '75px', background } }),
                react_1.default.createElement("br", null)));
        }))));
};
const SystemColors = () => {
    const colors = ['white', 'darkGray', 'deepDarkGray', 'black'];
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("h1", null, " System "),
        colors.map((color) => (react_1.default.createElement(Palette, { key: color, color: color, palette: _1.basicColors })))));
};
const BasicColors = () => {
    const colors = utils_1.ColorTypeArray;
    const variants = ['5', '25', '50', '100', '200', '300', '400', '500', '600', '700', '800', '900'];
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("h1", null, " Basic "),
        colors.map((color) => (react_1.default.createElement(Palette, { key: color, color: color, variants: variants, palette: _1.basicColors })))));
};
const SemanticColors = () => {
    const colorNameSet = [
        {
            color: 'backgroundBasic',
            name: 'Background Basic',
        },
        {
            color: 'backgroundDeep',
            name: 'BackgroundDeep',
        },
        {
            color: 'buttonGrayMainAbledText',
            name: 'Button Main Abled Text (Gray)',
        },
        {
            color: 'buttonMainDisabledText',
            name: 'Button Main Disabled Text',
        },
        {
            color: 'toastMessageContainer',
            name: 'Toast Message Container',
        },
        {
            color: 'toastMessageMiniButtonEnabledContainer',
            name: 'Toast Message Mini Button Container Enabled',
        },
        {
            color: 'toastMessageMiniButtonHoverContainer',
            name: 'Toast Message Mini Button Container Hover',
        },
        {
            color: 'toastMessageMiniButtonFocusContainer',
            name: 'Toast Message Mini Button Container Focus ',
        },
        {
            color: 'controlGraySwitchEnabledOnContainer',
            name: 'Control Switch Enabled On Container (Gray)',
        },
        { color: 'controlSwitchEnabledOffInnerCircle', name: 'Control Switch Enabled Off Innercircle' },
        { color: 'controlSwitchDisabledOnInnerCircle', name: 'Control Switch Disabled On Innercircle' },
        {
            color: 'controlSwitchDisabledOffInnerCircle',
            name: 'Control Switch Disabled Off Innercircle',
        },
        { color: 'dividerM', name: 'Divider M' },
        { color: 'card', name: 'Card' },
        { color: 'segmentControlContainer', name: 'Segment Control Container' },
        {
            color: 'segmentControlSegment',
            name: 'Segment Control Segment',
        },
        {
            color: 'datepickerDayFocusTextInGray',
            name: 'Date Picker Day Focus Text (Gray)',
        },
        {
            color: 'datepickerTodayFocusDotInGray',
            name: 'Date Picker Today Focus Dot (Gray)',
        },
        {
            color: 'chipDefaultText',
            name: 'Chip Default Text (Gray)',
        },
    ];
    const colorMethodSet = utils_1.ColorTypeArray.map((colorType) => ({
        method: 'buttonSubDisabledText',
        colorType,
    }));
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("h1", null, " Semantic (no colorType) "),
        colorNameSet.map(({ color, name }) => (react_1.default.createElement(Palette, { key: color, name: name, color: color, palette: _1.semanticColors }))),
        react_1.default.createElement(Divider_1.Divider, { size: "s" }),
        react_1.default.createElement(Spacing_1.Spacing, { spaceNumber: 20 }),
        react_1.default.createElement("h1", null, " Semantic (w. colorType) "),
        colorMethodSet.map(({ method, colorType }) => (react_1.default.createElement(Palette, { key: method, name: `${method} (${colorType})`, fixedColor: _1.semanticColorsMethod[method](colorType) })))));
};
/**
 * updated 230523
 *
 * <a href="https://www.notion.so/Color-3c22c42d7980452bbca325b13f027712?pvs=4" target="_blank">노션페이지</a>
 * <br/>
 * 컬러는 제품 전반에 걸쳐 일관된 경험을 제공하는 역할을 하는 피플펀드를 대표하는 요소 중 하나로 베이직 컬러와 시멘틱 컬러로 구성되어 있습니다.<br/>대표적인 컬러는 두 가지로 Pink는 대출, Blue는 투자 서비스에 사용합니다.
 */
const meta = {
    title: 'Foundation/Color',
    tags: ['autodocs'],
};
exports.default = meta;
// Props 교체 가능
exports.BasicPalette = {
    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(BasicColors, null),
        react_1.default.createElement(SystemColors, null))),
    parameters: {
        docs: {
            description: {
                story: '베이직 컬러는 기본 컬러 팔레트의 기능을 합니다.<br/>각 컬러는 400값이 메인 컬러이며, 예외로 Gray는 900값을 메인 컬러로, System은 메인 컬러 없이 사용합니다.',
            },
        },
    },
};
exports.SemanticPalette = {
    render: () => react_1.default.createElement(SemanticColors, null),
    parameters: {
        docs: {
            description: {
                story: '시멘틱 컬러는 베이직 컬러 팔레트에서 라이트/다크 모드 1:1 대응이 되지 않는 예외 케이스에 사용합니다.<br/>베이직 컬러를 토대로 사용하는 목적에 맞게 네이밍하고 시스템화하여 다크 모드에 최적화된 컬러 대응이 가능하도록 해줍니다.',
            },
        },
    },
};
