"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.TabEnum = void 0;
const react_1 = __importStar(require("react"));
const react_redux_1 = require("react-redux");
const antd_1 = require("antd");
const styled_components_1 = __importDefault(require("styled-components"));
const ACTIONS = __importStar(require("@/actions/builder/header"));
const PAGE_ACTIONS = __importStar(require("@/actions/builder/main"));
const index_1 = require("@/components/index");
const system_1 = require("@/pages/system");
const utils_1 = require("@/store/sagas/builder/utils");
const index_2 = require("@/utils/index");
var TabEnum;
(function (TabEnum) {
    TabEnum["application"] = "application";
    TabEnum["permission"] = "involve";
    TabEnum["user"] = "user";
})(TabEnum = exports.TabEnum || (exports.TabEnum = {}));
const StyledModal = (0, styled_components_1.default)(antd_1.Modal) `
  .ant-modal-content {
    height: 100%;
    .ant-modal-body {
      height: calc(100% - 110px);
      overflow: auto;
      padding-top: 0;
    }
  }
`;
const Container = styled_components_1.default.div `
  height: 100%;
`;
const Header = styled_components_1.default.div ``;
const Body = styled_components_1.default.div `
  height: calc(100% - 62px);
  overflow: hidden auto;
  padding: 0 24px;
`;
const Drawer = (0, styled_components_1.default)(index_1.ScrollBar) `
  width: 90%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: -258px;
  overflow: hidden auto;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 4px 4px 2px;
  padding: 12px;
  transition: right 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  &.active {
    right: 0;
  }
`;
const DrawerTitle = styled_components_1.default.div `
  color: #000000;
`;
const EmptyMask = styled_components_1.default.div `
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  box-sizing: border-box;
  cursor: not-allowed;
`;
const { Meta } = antd_1.Card;
const { TabPane } = antd_1.Tabs;
const mapStateToProps = (store) => ({
    pageInfo: store.builder.header.storeModalPageInfo,
    templates: store.builder.header.storeModalTemplates,
    type: store.builder.header.storeModalType,
    open: store.builder.header.storeModalVisible,
    applicationId: store.builder.header.applicationId,
    contentId: store.builder.header.contentId,
    loading: store.builder.header.loading,
    templateInPage: store.builder.main.templateOpenInPage,
    pageNode: store.builder.main.pageNode,
});
const mapDispatchToProps = {
    fetchPageTemplate: ACTIONS.fetchPageTemplate,
    openModal: ACTIONS.updateStoreModalVisible,
    cloneContent: PAGE_ACTIONS.cloneContent,
    updatePageNode: PAGE_ACTIONS.updatePageNode,
};
const TemplateSelectModal = (props) => {
    const { open, applicationId, loading, pageInfo, templates, type, cloneContent, fetchPageTemplate, openModal, pageNode, templateInPage, updatePageNode, } = props;
    const [selectedTemplateId, setSelectedTemplateId] = (0, react_1.useState)();
    const [tab, setTab] = (0, react_1.useState)(TabEnum.user);
    const [fileId, setFileId] = (0, react_1.useState)();
    // i18n
    const { locale } = (0, react_1.useContext)(system_1.GlobalContext);
    const { builder, global } = locale.business;
    (0, react_1.useEffect)(() => {
        if (open) {
            fetchPageTemplate({
                applicationId,
                type,
                scope: tab,
                page: pageInfo.page,
                size: pageInfo.size,
            });
        }
        else {
            setSelectedTemplateId(undefined);
            setFileId(undefined);
            setTab(TabEnum.user);
        }
    }, [open, tab]);
    const handleTabsChange = (tab) => {
        setTab(tab);
    };
    const handleCardClick = (id) => {
        if (tab === TabEnum.application) {
            setSelectedTemplateId(id);
        }
    };
    const handleOk = (0, react_1.useCallback)(() => {
        if (!selectedTemplateId) {
            antd_1.message.warning(builder.selectPageError);
            return;
        }
        if (templateInPage) {
            const tpl = (0, utils_1.getTemplateRelationKey)(selectedTemplateId);
            const newPageNode = Object.assign(Object.assign({}, pageNode), { directive: Object.assign(Object.assign({}, (pageNode.directive || {})), { tpl: `{{${tpl}}}` }) });
            updatePageNode(newPageNode);
        }
        else {
            cloneContent(selectedTemplateId);
        }
        openModal(false);
    }, [selectedTemplateId]);
    const title = (0, react_1.useMemo)(() => {
        const typeTitleMap = {
            page: builder.selectPageModalTitle,
            template: builder.selectTemplateModalTitle,
        };
        return typeTitleMap[type];
    }, [type]);
    return (react_1.default.createElement(StyledModal, { destroyOnClose: true, maskClosable: false, title: title, visible: open, width: 1130, onOk: handleOk, onCancel: () => openModal(false), bodyStyle: {
            padding: 0,
        }, style: {
            height: 800,
        } },
        react_1.default.createElement(Container, null,
            react_1.default.createElement(Header, null,
                react_1.default.createElement(antd_1.Tabs, { centered: true, destroyInactiveTabPane: true, defaultActiveKey: "user", onChange: handleTabsChange },
                    react_1.default.createElement(TabPane, { tab: global.personal, key: TabEnum.user }),
                    react_1.default.createElement(TabPane, { tab: global.permission, key: TabEnum.permission }),
                    react_1.default.createElement(TabPane, { tab: global.application, key: TabEnum.application }))),
            react_1.default.createElement(Body, null,
                react_1.default.createElement(antd_1.Spin, { spinning: loading },
                    react_1.default.createElement(antd_1.Row, { gutter: 16 },
                        templates &&
                            templates.map((resource) => (react_1.default.createElement(antd_1.Card, { cover: react_1.default.createElement("img", { alt: "example", src: (0, index_2.getImageUrlByEnv)('/images/placeholder.png') }), hoverable: true, key: resource.id, onClick: () => {
                                    handleCardClick(resource.id);
                                }, onMouseEnter: () => setFileId(resource.id), onMouseLeave: () => setFileId(''), style: { width: 258, margin: '12px 6px', position: 'relative', overflow: 'hidden' } },
                                react_1.default.createElement(Meta, { title: resource.name, description: react_1.default.createElement("span", null,
                                        global.idLabel,
                                        ": ",
                                        resource.id), style: { marginBottom: 12 } }),
                                !(0, index_2.objectEmptyCheck)(resource === null || resource === void 0 ? void 0 : resource.contents) ? (react_1.default.createElement(Drawer, { className: fileId === (resource === null || resource === void 0 ? void 0 : resource.id) ? 'active' : '' }, resource.contents.map((item) => (react_1.default.createElement(antd_1.Radio, { key: item.id, value: item.id },
                                    react_1.default.createElement(DrawerTitle, null, item.title),
                                    react_1.default.createElement(index_1.LocaleView, { maxLocaleCount: 100, locales: item.tags.filter((item) => item.locale).map((item) => item.locale) })))))) : (react_1.default.createElement(EmptyMask, null, global.noValidContent))))),
                        (templates === null || templates === void 0 ? void 0 : templates.length) === 0 && !loading && (react_1.default.createElement(antd_1.Empty, { image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE, style: { margin: '48px auto' } }))),
                    react_1.default.createElement(antd_1.Row, { style: { justifyContent: 'center', marginBottom: 12 } },
                        react_1.default.createElement(index_1.Pagination, { hideOnSinglePage: true, current: pageInfo.page, pageSize: pageInfo.size, total: pageInfo.total, onChange: (page, size) => {
                                fetchPageTemplate({
                                    applicationId,
                                    type,
                                    scope: tab,
                                    page,
                                    size,
                                });
                            } })))))));
};
exports.default = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(TemplateSelectModal);
