"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 () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __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.ViewTypeSelector = ViewTypeSelector;
const i18n_1 = __importDefault(require("../../../../../locales/i18n.js"));
const React = __importStar(require("react"));
const cn_ui_1 = require("@cainiaofe/cn-ui");
const icons_1 = require("../../icons");
require("./view-type-selector.scss");
const viewTypes = [
    {
        type: 'Grid',
        label: i18n_1.default.get({ id: 'Table', dm: '表格' }),
        icon: 'table',
        description: i18n_1.default.get({ id: 'PresentationOfDataInTabularForm', dm: '以表格形式展示数据' }),
    },
    {
        type: 'Task',
        label: i18n_1.default.get({ id: 'Task', dm: '任务' }),
        icon: 'task',
        description: i18n_1.default.get({ id: 'ShowDataAsATask', dm: '以任务形式展示数据' }),
    },
    // SmartFollow 视图不允许手动新增，由系统自动创建并与主视图绑定
];
// 获取视图类型的中文名称
const getViewTypeLabel = (type) => {
    const typeMap = {
        Grid: i18n_1.default.get({ id: 'Table', dm: '表格' }),
        SmartFollow: i18n_1.default.get({ id: 'SmartMerchandiser', dm: '智能跟单' }),
        Task: i18n_1.default.get({ id: 'Task', dm: '任务' }),
    };
    return typeMap[type] || i18n_1.default.get({ id: 'NewView', dm: '新视图' });
};
// 生成默认视图名称（视图类型 + 数字）
const generateDefaultViewName = (viewType, existingViews = []) => {
    const typeLabel = getViewTypeLabel(viewType);
    // 统计同类型视图的数量
    const sameTypeViews = existingViews.filter((view) => view.type === viewType);
    const count = sameTypeViews.length + 1;
    return `${typeLabel} ${count}`;
};
function ViewTypeSelector({ onVisibleChange, onSelect, existingViews = [], viewTypeCapabilities, }) {
    const [searchValue, setSearchValue] = React.useState('');
    const [selectedViewType, setSelectedViewType] = React.useState(null);
    const [viewName, setViewName] = React.useState('');
    const handleViewTypeClick = (viewType) => {
        setSelectedViewType(viewType);
        // 生成默认视图名称
        const defaultName = generateDefaultViewName(viewType, existingViews);
        setViewName(defaultName);
    };
    const handleConfirm = () => {
        if (selectedViewType && viewName.trim()) {
            onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedViewType, viewName.trim());
            // 重置状态
            setSelectedViewType(null);
            setViewName('');
            // 调用外部的onVisibleChange来关闭弹窗
            onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(false);
        }
    };
    const handleConfirmClick = (e) => {
        e.stopPropagation(); // 阻止事件冒泡
        handleConfirm();
    };
    const handleCancel = () => {
        // 重置状态
        setSelectedViewType(null);
        setViewName('');
        // 关闭弹窗
        onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(false);
    };
    const handleCancelClick = (e) => {
        e.stopPropagation(); // 阻止事件冒泡
        handleCancel();
    };
    const filterViewTypes = (types) => {
        let filtered = types;
        if (viewTypeCapabilities) {
            filtered = filtered.filter((item) => {
                if (item.type === 'Task')
                    return viewTypeCapabilities.task.enabled;
                return true;
            });
        }
        if (searchValue) {
            filtered = filtered.filter((type) => { var _a; return (_a = type.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()); });
        }
        return filtered;
    };
    const getIconContent = (icon, viewType) => {
        // 视图类型到图标名称的映射
        const viewTypeIconMap = {
            Grid: 'table',
            Task: 'task',
            SmartFollow: 'smartFollow',
        };
        const iconName = viewTypeIconMap[viewType] || icon;
        // 如果在已知图标列表中，使用 SvgIcon
        if (['table', 'kanban', 'task', 'smartFollow', 'gallery', 'dashboard'].includes(iconName)) {
            return React.createElement(icons_1.SvgIcon, { name: iconName, size: 20 });
        }
        // 其他视图类型使用 CnIcon
        const iconTypeMap = {
            calendar: 'calendar',
            gantt: 'gantt',
            form: 'form',
        };
        const iconType = iconTypeMap[icon] || icon;
        return React.createElement(cn_ui_1.CnIcon, { type: iconType, style: { fontSize: '20px' } });
    };
    const renderViewTypeItem = (viewType) => {
        return (React.createElement("div", { key: viewType.type, className: "view-type-selector-item", onClick: () => handleViewTypeClick(viewType.type) },
            React.createElement("span", { className: "view-type-selector-item-icon" }, getIconContent(viewType.icon, viewType.type)),
            React.createElement("div", { className: "view-type-selector-item-content" },
                React.createElement("div", { className: "view-type-selector-item-label" }, viewType.label),
                viewType.description && (React.createElement("div", { className: "view-type-selector-item-description" }, viewType.description)))));
    };
    // 如果已选择视图类型，显示名称输入界面
    if (selectedViewType) {
        return (React.createElement("div", { className: "view-type-selector" },
            React.createElement("div", { className: "view-type-selector-name-input" },
                React.createElement("div", { className: "view-type-selector-name-label" }, i18n_1.default.get({ id: 'ViewName', dm: '视图名称' })),
                React.createElement(cn_ui_1.CnInput, { value: viewName, onChange: setViewName, placeholder: i18n_1.default.get({ id: 'PleaseEnterAViewName', dm: '请输入视图名称' }), autoFocus: true, onPressEnter: handleConfirm })),
            React.createElement("div", { className: "view-type-selector-actions" },
                React.createElement(cn_ui_1.CnButton, { onClick: handleCancelClick }, i18n_1.default.get({ id: 'Cancel', dm: '取消' })),
                React.createElement(cn_ui_1.CnButton, { type: "primary", onClick: handleConfirmClick, disabled: !viewName.trim() }, i18n_1.default.get({ id: 'OK', dm: '确定' })))));
    }
    return (React.createElement("div", { className: "view-type-selector" },
        React.createElement("div", { className: "view-type-selector-search" },
            React.createElement(cn_ui_1.CnIcon, { type: "search", style: { fontSize: '16px', color: '#999' } }),
            React.createElement("input", { className: "view-type-selector-search-input", placeholder: i18n_1.default.get({ id: 'SearchViewType', dm: '搜索视图类型...' }), value: searchValue, onChange: (e) => setSearchValue(e.target.value) })),
        React.createElement("div", { className: "view-type-selector-content" },
            React.createElement("div", { className: "view-type-selector-section" },
                React.createElement("div", { className: "view-type-selector-section-title" }, i18n_1.default.get({ id: 'ViewType', dm: '视图类型' })),
                React.createElement("div", { className: "view-type-selector-section-grid" }, filterViewTypes(viewTypes).map(renderViewTypeItem))))));
}
