"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 icons_1 = require("@ant-design/icons");
const antd_1 = require("antd");
const lodash_1 = __importDefault(require("lodash"));
const styled_components_1 = __importDefault(require("styled-components"));
const index_1 = require("@/components/index");
const resource_1 = require("@/constants/resource");
const system_1 = require("@/pages/system");
const ACTIONS = __importStar(require("@/store/actions/applications/detail/settings/application"));
const index_2 = require("@/utils/index");
const { Option } = antd_1.Select;
const Title = (0, styled_components_1.default)(antd_1.Typography.Title) `
  margin-bottom: 0 !important;
  margin-top: 12px;
  padding-right: 12px;
`;
const Label = styled_components_1.default.div `
  display: flex;
  justify-content: flex-end;
  padding-right: 12px;
  height: 100%;
  align-items: center;
`;
const Row = (0, styled_components_1.default)(antd_1.Row) `
  margin-bottom: 12px;
`;
const iconStyle = {
    margin: '8px 0 0 8px',
    cursor: 'pointer',
};
const cloneApplication = (application) => {
    return Object.assign({}, application);
};
const mapStateToProps = (store) => ({
    locales: store.applications.detail.settings.app.locales,
    loading: store.applications.detail.settings.app.loading,
    application: store.applications.detail.settings.app.application,
    applicationId: store.applications.detail.settings.app.applicationId,
});
const mapDispatchToProps = {
    updateApplicationId: ACTIONS.updateApplicationId,
    fetchApplicationInfo: ACTIONS.fetchApplicationInfo,
    fetchAllLocales: ACTIONS.fetchAllLocales,
    saveApplication: ACTIONS.saveApplication,
};
const Main = (props) => {
    var _a, _b, _c, _d;
    const { application, applicationId, loading, locales, updateApplicationId, fetchApplicationInfo, fetchAllLocales, saveApplication, } = props;
    const [region, setRegion] = (0, react_1.useState)([]);
    const [editApplication, setEditApplication] = (0, react_1.useState)();
    // i18n
    const { locale } = (0, react_1.useContext)(system_1.GlobalContext);
    const { global, setting, resource: resourceI18n, application: applicationI18n } = locale.business;
    // generate iframe src
    const defaultHost = ((_a = editApplication === null || editApplication === void 0 ? void 0 : editApplication.host) === null || _a === void 0 ? void 0 : _a.length) ? editApplication === null || editApplication === void 0 ? void 0 : editApplication.host[0].url : '';
    const slug = (editApplication === null || editApplication === void 0 ? void 0 : editApplication.slug) || '';
    const hostSlug = defaultHost && slug ? `${defaultHost}/${slug}` : '';
    (0, react_1.useEffect)(() => {
        if (applicationId) {
            fetchApplicationInfo(applicationId);
            fetchAllLocales(applicationId);
            // push application id to store
            updateApplicationId(applicationId);
        }
    }, [applicationId]);
    (0, react_1.useEffect)(() => {
        if (application) {
            const { locales = [], resources = [], host } = application;
            setEditApplication(Object.assign(Object.assign({}, application), { resources: resources.length > 0 ? resources : [], localeObjects: locales.length > 0
                    ? locales.map((locale) => {
                        const array = locale.split('-');
                        return {
                            region: array[1],
                            language: array[0],
                        };
                    })
                    : [], host: !(0, index_2.objectEmptyCheck)(host)
                    ? host.map((item) => ({
                        url: !!(item === null || item === void 0 ? void 0 : item.url) ? item.url : item,
                        locales: !!(item === null || item === void 0 ? void 0 : item.locales) ? item.locales : [],
                    }))
                    : [] }));
        }
    }, [application]);
    (0, react_1.useEffect)(() => {
        const newRegion = [];
        if (locales) {
            locales.forEach((locale) => {
                if (locale) {
                    const array = locale.split('-');
                    if (array.length === 2) {
                        const exist = newRegion.find((item) => item.name === array[1]);
                        if (exist) {
                            exist.languages.push(array[0]);
                        }
                        else {
                            newRegion.push({ name: array[1], languages: [array[0]] });
                        }
                    }
                }
            });
        }
        setRegion(newRegion);
    }, [locales]);
    const handleAddLocale = (0, react_1.useCallback)((index) => {
        const newEditApplication = cloneApplication(editApplication);
        newEditApplication === null || newEditApplication === void 0 ? void 0 : newEditApplication.localeObjects.splice(index, 0, { region: '', language: '' });
        setEditApplication(newEditApplication);
    }, [editApplication]);
    const handleRemoveLocale = (0, react_1.useCallback)((index) => {
        const newEditApplication = cloneApplication(editApplication);
        newEditApplication === null || newEditApplication === void 0 ? void 0 : newEditApplication.localeObjects.splice(index, 1);
        setEditApplication(newEditApplication);
    }, [editApplication]);
    const handleUpdate = (0, react_1.useCallback)((key, value) => {
        const newEditApplication = cloneApplication(editApplication);
        newEditApplication[key] = value;
        setEditApplication(newEditApplication);
    }, [editApplication]);
    const handleUpdateLocale = (0, react_1.useCallback)((index, localeObj) => {
        const newEditApplication = cloneApplication(editApplication);
        newEditApplication === null || newEditApplication === void 0 ? void 0 : newEditApplication.localeObjects.splice(index, 1, localeObj);
        setEditApplication(newEditApplication);
    }, [editApplication]);
    const handleAddResource = (0, react_1.useCallback)((index) => {
        const newEditApplication = lodash_1.default.cloneDeep(editApplication);
        newEditApplication === null || newEditApplication === void 0 ? void 0 : newEditApplication.resources.splice(index, 0, {
            id: '',
            name: '',
            type: resource_1.ResourceTypeArray[0].type,
            detail: { host: '', downloadHost: '' },
        });
        setEditApplication(newEditApplication);
    }, [editApplication]);
    const handleRemoveResource = (0, react_1.useCallback)((index) => {
        const newEditApplication = lodash_1.default.cloneDeep(editApplication);
        newEditApplication === null || newEditApplication === void 0 ? void 0 : newEditApplication.resources.splice(index, 1);
        setEditApplication(newEditApplication);
    }, [editApplication]);
    const handleUpdateResource = (0, react_1.useCallback)((index, key, value) => {
        const newEditApplication = lodash_1.default.cloneDeep(editApplication);
        if (newEditApplication) {
            newEditApplication.resources[index][key] = value;
            setEditApplication(newEditApplication);
        }
    }, [editApplication]);
    const localeOptions = (0, react_1.useMemo)(() => {
        if (editApplication) {
            const { localeObjects } = editApplication;
            return !(0, index_2.objectEmptyCheck)(localeObjects)
                ? localeObjects.map((item) => ({
                    label: `${item.language}-${item.region}`,
                    value: `${item.language}-${item.region}`,
                }))
                : [];
        }
        else {
            return [];
        }
    }, [editApplication]);
    const handleRemoveHost = (0, react_1.useCallback)((index) => {
        const newEditApplication = lodash_1.default.cloneDeep(editApplication);
        newEditApplication === null || newEditApplication === void 0 ? void 0 : newEditApplication.host.splice(index, 1);
        setEditApplication(newEditApplication);
    }, [editApplication]);
    const handleAddHost = (0, react_1.useCallback)((index) => {
        const newEditApplication = lodash_1.default.cloneDeep(editApplication);
        newEditApplication === null || newEditApplication === void 0 ? void 0 : newEditApplication.host.splice(index, 0, { url: '', locales: [] });
        setEditApplication(newEditApplication);
    }, [editApplication]);
    const handleUpdateHost = (0, react_1.useCallback)((index, key, value) => {
        const newEditApplication = lodash_1.default.cloneDeep(editApplication);
        if (newEditApplication) {
            newEditApplication.host[index][key] = value;
            setEditApplication(newEditApplication);
        }
    }, [editApplication]);
    const handleSave = (0, react_1.useCallback)(() => {
        if (editApplication) {
            if (!editApplication.name) {
                antd_1.message.warn(applicationI18n.nameInvalid);
                return;
            }
            for (const localeObj of editApplication.localeObjects) {
                if (!localeObj.region) {
                    antd_1.message.warn(applicationI18n.regionInvalid);
                    return;
                }
                if (!localeObj.language) {
                    antd_1.message.warn(applicationI18n.languageInvalid);
                    return;
                }
            }
            for (const resource of editApplication.resources) {
                const { detail, name, type } = resource;
                if (!name) {
                    antd_1.message.warn(applicationI18n.resourceNameInvalid);
                    return;
                }
                if (!type) {
                    antd_1.message.warn(applicationI18n.resourceTypeInvalid);
                    return;
                }
                if (!(detail === null || detail === void 0 ? void 0 : detail.host)) {
                    antd_1.message.warn(applicationI18n.hostInvalid);
                    return;
                }
            }
            saveApplication(editApplication);
        }
    }, [editApplication]);
    return (react_1.default.createElement(index_1.Content, null,
        react_1.default.createElement(index_1.FoxPageContent, { breadcrumb: react_1.default.createElement(index_1.FoxPageBreadcrumb, { breadCrumb: [
                    {
                        name: applicationI18n.applicationList,
                        link: '/#/workspace/applications',
                    },
                    { name: setting.appSetting },
                ] }), style: { overflow: 'hidden auto' } },
            react_1.default.createElement(antd_1.Spin, { spinning: loading },
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 6 },
                        react_1.default.createElement(Title, { level: 5, type: "secondary", style: { textAlign: 'right' } }, setting.basicInfo))),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 6 },
                        react_1.default.createElement(Label, null, global.nameLabel)),
                    react_1.default.createElement(antd_1.Col, { span: 10 },
                        react_1.default.createElement(antd_1.Input, { value: editApplication === null || editApplication === void 0 ? void 0 : editApplication.name, onChange: (e) => {
                                handleUpdate('name', e.target.value);
                            } }))),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 6 },
                        react_1.default.createElement(Label, null, setting.Introduction)),
                    react_1.default.createElement(antd_1.Col, { span: 10 },
                        react_1.default.createElement(antd_1.Input, { value: editApplication === null || editApplication === void 0 ? void 0 : editApplication.intro, onChange: (e) => {
                                handleUpdate('intro', e.target.value);
                            } }))),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 6 },
                        react_1.default.createElement(Title, { level: 5, type: "secondary", style: { textAlign: 'right' } }, global.locale))), (_b = editApplication === null || editApplication === void 0 ? void 0 : editApplication.localeObjects) === null || _b === void 0 ? void 0 :
                _b.map((locale, index) => {
                    var _a;
                    const languages = (_a = region.find((item) => item.name === locale.region)) === null || _a === void 0 ? void 0 : _a.languages;
                    return (react_1.default.createElement(Row, { key: `${locale.region}${locale.language}` },
                        react_1.default.createElement(antd_1.Col, { span: 6 },
                            react_1.default.createElement(Label, null, setting.region)),
                        react_1.default.createElement(antd_1.Col, { span: 10 },
                            react_1.default.createElement(antd_1.Select, { value: locale.region, style: { width: 150 }, onChange: (val) => {
                                    handleUpdateLocale(index, { region: val, language: locale.language });
                                } }, region.map((item) => (react_1.default.createElement(Option, { key: item.name, value: item.name }, item.name)))),
                            react_1.default.createElement("span", { style: { margin: '0 12px' } }, setting.language),
                            react_1.default.createElement(antd_1.Select, { style: { width: 150 }, value: locale.language, onChange: (val) => {
                                    handleUpdateLocale(index, { region: locale.region, language: val });
                                } }, languages === null || languages === void 0 ? void 0 : languages.map((item, index) => (react_1.default.createElement(Option, { disabled: editApplication.localeObjects.find((localeItem, localeIndex) => localeItem.language === item &&
                                    locale.region === localeItem.region &&
                                    localeIndex !== index), key: item, value: item }, item)))),
                            react_1.default.createElement(icons_1.MinusOutlined, { style: iconStyle, onClick: () => {
                                    handleRemoveLocale(index);
                                } }))));
                }),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 10, offset: 6 },
                        react_1.default.createElement(antd_1.Button, { type: "dashed", onClick: () => { var _a; return handleAddLocale(((_a = editApplication === null || editApplication === void 0 ? void 0 : editApplication.localeObjects) === null || _a === void 0 ? void 0 : _a.length) || 0); }, block: true },
                            react_1.default.createElement(icons_1.PlusOutlined, { style: { marginRight: 8, cursor: 'pointer' } }),
                            applicationI18n.addLocale))),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 6 },
                        react_1.default.createElement(Title, { level: 5, type: "secondary", style: { textAlign: 'right' } }, setting.accessControl))), (_c = editApplication === null || editApplication === void 0 ? void 0 : editApplication.host) === null || _c === void 0 ? void 0 :
                _c.map((host, index) => (react_1.default.createElement(Row, { key: `host-${index}` },
                    react_1.default.createElement(antd_1.Col, { span: 6 },
                        react_1.default.createElement(Label, null, global.host)),
                    react_1.default.createElement(antd_1.Col, { span: 10 },
                        react_1.default.createElement(antd_1.Input, { value: host === null || host === void 0 ? void 0 : host.url, onChange: (e) => {
                                handleUpdateHost(index, 'url', e.target.value);
                            }, style: { width: 180 } }),
                        react_1.default.createElement("span", { style: { margin: '0 12px' } }, global.locale),
                        react_1.default.createElement(antd_1.Select, { showArrow: true, allowClear: true, mode: "multiple", maxTagCount: 2, options: localeOptions, value: (host === null || host === void 0 ? void 0 : host.locales) || [], onChange: (value) => handleUpdateHost(index, 'locales', value), style: { width: 232 } }),
                        react_1.default.createElement(icons_1.MinusOutlined, { style: iconStyle, onClick: () => {
                                handleRemoveHost(index);
                            } }))))),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 10, offset: 6 },
                        react_1.default.createElement(antd_1.Button, { type: "dashed", onClick: () => { var _a; return handleAddHost(((_a = editApplication === null || editApplication === void 0 ? void 0 : editApplication.host) === null || _a === void 0 ? void 0 : _a.length) || 0); }, block: true, style: { marginBottom: 12 } },
                            react_1.default.createElement(icons_1.PlusOutlined, { style: { marginRight: 8, cursor: 'pointer' } }),
                            applicationI18n.addHost))),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 6 },
                        react_1.default.createElement(Label, null, setting.slug)),
                    react_1.default.createElement(antd_1.Col, { span: 10 },
                        react_1.default.createElement(antd_1.Input, { value: editApplication === null || editApplication === void 0 ? void 0 : editApplication.slug, onChange: (e) => {
                                handleUpdate('slug', e.target.value);
                            } }))),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 6 },
                        react_1.default.createElement(Title, { level: 5, type: "secondary", style: { textAlign: 'right' } }, setting.resource))), (_d = editApplication === null || editApplication === void 0 ? void 0 : editApplication.resources) === null || _d === void 0 ? void 0 :
                _d.map((resource, index) => (react_1.default.createElement(react_1.default.Fragment, { key: resource.id },
                    react_1.default.createElement(Row, null,
                        react_1.default.createElement(antd_1.Col, { span: 6 },
                            react_1.default.createElement(Label, null, global.nameLabel)),
                        react_1.default.createElement(antd_1.Col, { span: 10 },
                            react_1.default.createElement(antd_1.Input, { value: resource.name, style: { width: 180 }, onChange: (e) => {
                                    handleUpdateResource(index, 'name', e.target.value);
                                } }),
                            react_1.default.createElement("span", { style: { margin: '0 12px' } }, global.type),
                            react_1.default.createElement(antd_1.Select, { style: { width: 200 }, value: resource.type, onChange: (val) => {
                                    handleUpdateResource(index, 'type', val);
                                } }, resource_1.ResourceTypeArray === null || resource_1.ResourceTypeArray === void 0 ? void 0 : resource_1.ResourceTypeArray.map((item) => (react_1.default.createElement(Option, { key: item.type, value: item.type }, resourceI18n[item.label])))))),
                    react_1.default.createElement(Row, { style: { marginBottom: 24 } },
                        react_1.default.createElement(antd_1.Col, { span: 6 },
                            react_1.default.createElement(Label, null, global.host)),
                        react_1.default.createElement(antd_1.Col, { span: 10 },
                            react_1.default.createElement(antd_1.Input, { value: resource.detail.host, style: { width: 180 }, onChange: (e) => {
                                    handleUpdateResource(index, 'detail', {
                                        host: e.target.value,
                                        downloadHost: resource.detail.downloadHost,
                                    });
                                } }),
                            react_1.default.createElement("span", { style: { margin: '0 12px' } }, setting.downloadHost),
                            react_1.default.createElement(antd_1.Input, { value: resource.detail.downloadHost, style: { width: 200 }, onChange: (e) => {
                                    handleUpdateResource(index, 'detail', {
                                        downloadHost: e.target.value,
                                        host: resource.detail.host,
                                    });
                                } }),
                            react_1.default.createElement(icons_1.MinusOutlined, { style: { margin: '8px 0 0 8px', cursor: 'pointer' }, onClick: () => {
                                    handleRemoveResource(index);
                                } })))))),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 10, offset: 6 },
                        react_1.default.createElement(antd_1.Button, { type: "dashed", onClick: () => { var _a; return handleAddResource(((_a = editApplication === null || editApplication === void 0 ? void 0 : editApplication.resources) === null || _a === void 0 ? void 0 : _a.length) || 0); }, block: true },
                            react_1.default.createElement(icons_1.PlusOutlined, { style: { marginRight: 8, cursor: 'pointer' } }),
                            applicationI18n.addResource))),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 6 },
                        react_1.default.createElement(Title, { level: 5, type: "secondary", style: { textAlign: 'right' } }, setting.other))),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 6 },
                        react_1.default.createElement(Label, null, setting.editor)),
                    react_1.default.createElement(antd_1.Col, { span: 10 }, hostSlug ? `${hostSlug}/_foxpage/visual-editor.html` : '-')),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 6 },
                        react_1.default.createElement(Label, null, setting.preview)),
                    react_1.default.createElement(antd_1.Col, { span: 10 }, hostSlug ? `${hostSlug}/_foxpage/preview` : '-')),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 6 },
                        react_1.default.createElement(Label, null, setting.debugger)),
                    react_1.default.createElement(antd_1.Col, { span: 10 }, hostSlug ? `${hostSlug}/_foxpage/debug` : '-')),
                react_1.default.createElement(Row, null,
                    react_1.default.createElement(antd_1.Col, { span: 10, offset: 6 },
                        react_1.default.createElement(antd_1.Button, { type: "primary", onClick: () => handleSave(), block: true }, global.save)))))));
};
exports.default = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(Main);
