"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_redux_1 = require("react-redux");
const antd_1 = require("antd");
const styled_components_1 = __importDefault(require("styled-components"));
const components_1 = require("@/actions/builder/components");
const header_1 = require("@/actions/builder/header");
const ACTIONS = __importStar(require("@/actions/builder/main"));
const index_1 = require("@/constants/index");
const components_2 = require("@/pages/applications/detail/file/conditions/components");
const components_3 = require("@/pages/applications/detail/file/functions/components");
const components_4 = require("@/pages/applications/detail/file/variables/components");
const header_2 = require("./header");
const toolbar_1 = require("./toolbar");
const Viewer_1 = __importDefault(require("./Viewer"));
const Container = styled_components_1.default.div `
  height: 100%;
  .ant-spin-nested-loading {
    height: calc(100% - 48px);
  }
  .ant-spin-container {
    height: 100%;
  }
`;
const Content = styled_components_1.default.div `
  height: 100%;
  background: #f2f2f2;
`;
const mapStateToProps = (store) => ({
    application: store.builder.main.application,
    loading: store.builder.main.loading,
    file: store.builder.main.file,
    applicationId: store.builder.header.applicationId,
    contentId: store.builder.header.contentId,
    fileId: store.builder.header.fileId,
    folderId: store.builder.header.folderId,
    pageList: store.builder.header.pageList,
    components: store.builder.component.components,
});
const mapDispatchToProps = {
    openToolbarEditor: ACTIONS.updateToolbarEditorVisible,
    openToolbarModal: ACTIONS.updateToolbarModalVisible,
    selectContent: header_1.selectContent,
    clear: ACTIONS.clearAll,
    fetchApp: ACTIONS.fetchApp,
    fetchFile: ACTIONS.fetchFile,
    fetchContent: ACTIONS.fetchContent,
    fetchComponents: components_1.fetchComponentList,
};
const Builder = (props) => {
    const { loading, application, file, applicationId, contentId, fileId, folderId, pageList, components, openToolbarEditor, openToolbarModal, selectContent, clear, fetchComponents, fetchApp, fetchFile, fetchContent, } = props;
    (0, react_1.useEffect)(() => {
        return () => {
            clear();
        };
    }, []);
    // supplement fileId and contentId if query string undefined
    (0, react_1.useEffect)(() => {
        if (pageList.length > 0) {
            // get file with filedId or default by index 0
            const file = !!fileId
                ? pageList.find((item) => item.id === fileId)
                : pageList.find((item) => item.contents && item.contents.length > 0);
            // get content by default index 0
            const contents = file === null || file === void 0 ? void 0 : file.contents;
            const content = contents && contentId ? contents.find((content) => content.id === contentId) : contents === null || contents === void 0 ? void 0 : contents[0];
            if (content) {
                // push to store
                const localeTag = content === null || content === void 0 ? void 0 : content.tags.filter((item) => item.locale);
                selectContent({
                    applicationId,
                    fileId: fileId || (file === null || file === void 0 ? void 0 : file.id),
                    contentId: contentId || content.id,
                    locale: localeTag && localeTag.length > 0 ? localeTag[0].locale : '',
                    fileType: (file === null || file === void 0 ? void 0 : file.type) || index_1.FileType.page,
                });
            }
        }
    }, [pageList]);
    (0, react_1.useEffect)(() => {
        if (applicationId) {
            fetchApp(applicationId);
            fetchComponents(applicationId);
        }
    }, [applicationId]);
    (0, react_1.useEffect)(() => {
        if (applicationId && fileId) {
            fetchFile({ applicationId, ids: [fileId] });
        }
    }, [applicationId, fileId]);
    (0, react_1.useEffect)(() => {
        if (components.length && (application === null || application === void 0 ? void 0 : application.id) && file.id && contentId) {
            fetchContent({ applicationId: application.id, id: contentId, type: file.type });
        }
    }, [application, contentId, file.id, components.length]);
    const handleWindowChange = (target, opt) => {
        if (toolbar_1.BUILDER_WINDOW_EDITOR.indexOf(target) > -1)
            openToolbarEditor(true, target, opt);
        if (toolbar_1.BUILDER_WINDOW_MODAL.indexOf(target) > -1)
            openToolbarModal(true, target, opt);
    };
    return (react_1.default.createElement(Container, null,
        react_1.default.createElement(header_2.Header, null),
        react_1.default.createElement(antd_1.Spin, { spinning: loading },
            react_1.default.createElement(Content, null,
                react_1.default.createElement(Viewer_1.default, { changeWindow: handleWindowChange }))),
        react_1.default.createElement(components_2.EditDrawer, { applicationId: applicationId, folderId: folderId }),
        react_1.default.createElement(components_3.EditDrawer, { applicationId: applicationId, folderId: folderId }),
        react_1.default.createElement(components_4.EditDrawer, { applicationId: applicationId, folderId: folderId }),
        react_1.default.createElement(toolbar_1.ConditionBindDrawer, null),
        react_1.default.createElement(toolbar_1.ToolbarModal, null),
        react_1.default.createElement(toolbar_1.VariableBindModal, null)));
};
exports.default = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(Builder);
