"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 });
const react_1 = __importStar(require("react"));
const react_markdown_editor_lite_1 = __importDefault(require("react-markdown-editor-lite"));
// import { FireFilled } from '@ant-design/icons';
const antd_1 = require("antd");
const markdown_it_1 = __importDefault(require("markdown-it"));
const styled_components_1 = __importDefault(require("styled-components"));
const index_1 = require("@/components/index");
const system_1 = require("@/pages/system");
// import { getRankColor } from '../rank';
const Category_1 = __importDefault(require("./Category"));
// import CoverUpload from './CoverUpload';
require("react-markdown-editor-lite/lib/index.css");
const TooltipContainer = styled_components_1.default.p `
  color: #f90;
  font-size: 12px;
`;
function BasicInfoPanel(props) {
    const { category, categories, onChange } = props;
    const { name, categoryName = '', groupName = '', sort, description } = category || {};
    const mdParser = new markdown_it_1.default();
    // i18n
    const { locale } = (0, react_1.useContext)(system_1.GlobalContext);
    const { category: i18n } = locale.business;
    const handleValueChange = (key, value) => {
        if (value && /{{+.+}}/.test(value)) {
            return;
        }
        onChange(Object.assign({}, category, { [key]: value }));
    };
    const handleEditorChange = ({ text }) => {
        handleValueChange('description', text);
    };
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(index_1.Group, null,
            react_1.default.createElement(index_1.Field, null,
                react_1.default.createElement(index_1.Label, null,
                    i18n.label,
                    " ",
                    react_1.default.createElement("span", { style: { color: 'red' } }, "*")),
                react_1.default.createElement(antd_1.Input, { value: name, maxLength: 30, placeholder: "Name", onChange: (e) => handleValueChange('name', e.target.value) })),
            react_1.default.createElement(index_1.Field, null,
                react_1.default.createElement(index_1.Label, null, i18n.category),
                react_1.default.createElement(Category_1.default, { categoryName: categoryName, groupName: groupName, categories: categories, onChange: handleValueChange })),
            react_1.default.createElement(index_1.Field, null,
                react_1.default.createElement(index_1.Label, null, i18n.sort),
                react_1.default.createElement(antd_1.InputNumber, { min: 1, max: 999, value: sort, style: { width: '260px' }, onChange: (value) => handleValueChange('sort', value) })),
            react_1.default.createElement(index_1.Field, null,
                react_1.default.createElement(index_1.Label, null, i18n.description),
                react_1.default.createElement(TooltipContainer, null, i18n.descriptionTips),
                react_1.default.createElement(react_markdown_editor_lite_1.default, { style: { height: '500px', overflow: 'hidden auto' }, value: description, renderHTML: (text) => mdParser.render(text), onChange: handleEditorChange })))));
}
exports.default = BasicInfoPanel;
