"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.IconMsg = exports.StyledIcon = void 0;
const react_1 = __importStar(require("react"));
const react_redux_1 = require("react-redux");
const react_router_dom_1 = require("react-router-dom");
const antd_1 = require("antd");
const styled_components_1 = __importDefault(require("styled-components"));
const ACTIONS = __importStar(require("@/actions/builder/header"));
const location_info_1 = require("@/utils/location-info");
const components_1 = require("./components");
require("./index.css");
const { Header } = antd_1.Layout;
const StyledHeader = (0, styled_components_1.default)(Header) `
  background: rgb(255, 255, 255) !important;
  border-bottom: 1px solid rgb(242, 242, 242);
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  z-index: 100;
  line-height: 48px;
  height: 48px;
  padding: 0;
`;
exports.StyledIcon = styled_components_1.default.div `
  min-width: 44px;
  font-size: 14px;
  text-align: center;
  position: relative;
  padding: 2px 4px;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: rgb(91, 107, 115);
  border-top: 2px solid transparent;
  background-color: transparent;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  user-select: none;
  > span {
    height: 14px;
  }
  &:hover {
    color: rgb(65, 80, 88);
    background-color: rgb(242, 242, 242);
  }
  &.disabled {
    cursor: not-allowed;
    color: rgb(195, 193, 193);
    background-color: inherit;
  }
  &.selected {
    background-color: rgb(242, 242, 242);
  }
`;
exports.IconMsg = styled_components_1.default.p `
  font-size: 12px;
  font-weight: 500;
  margin: 0;
  line-height: 22px;
  user-select: none;
`;
const Part = styled_components_1.default.div `
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .ant-popover-inner-content {
    padding: 0;
  }
`;
const mapStateToProps = (store) => ({
    editStatus: store.builder.main.editStatus,
});
const mapDispatchToProps = {
    clearAll: ACTIONS.clearAll,
    fetchCatalog: ACTIONS.fetchCatalog,
    selectContent: ACTIONS.selectContent,
};
let _editStatus = false;
const Main = (props) => {
    const { editStatus, clearAll, fetchCatalog, selectContent } = props;
    const { applicationId, folderId, fileId, contentId } = (0, location_info_1.getLocationIfo)((0, react_router_dom_1.useLocation)());
    _editStatus = editStatus;
    (0, react_1.useEffect)(() => {
        return () => {
            clearAll();
        };
    }, []);
    (0, react_1.useEffect)(() => {
        selectContent({
            applicationId,
            folderId,
            fileId,
            contentId,
        });
    }, []);
    // fetch catalog
    (0, react_1.useEffect)(() => {
        if (applicationId && folderId) {
            fetchCatalog({ applicationId, folderId });
        }
    }, [applicationId, folderId]);
    // save hint before leave
    (0, react_1.useEffect)(() => {
        window.addEventListener('beforeunload', (e) => {
            if (_editStatus) {
                e.preventDefault();
                e.returnValue = '';
            }
        });
        return () => {
            window.removeEventListener('beforeunload', (e) => {
                if (_editStatus) {
                    e.preventDefault();
                    e.returnValue = '';
                }
            });
        };
    }, []);
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(StyledHeader, null,
            react_1.default.createElement(Part, null,
                react_1.default.createElement(components_1.GoBack, null),
                react_1.default.createElement(components_1.Catalog, null)),
            react_1.default.createElement(Part, { style: { flex: 1, justifyContent: 'flex-end' } },
                react_1.default.createElement(components_1.Store, null)),
            react_1.default.createElement(Part, { style: { flex: 3, justifyContent: 'flex-end' } },
                react_1.default.createElement(components_1.Steps, null)),
            react_1.default.createElement(Part, { style: { flex: 2, justifyContent: 'flex-end', paddingRight: 12 } },
                react_1.default.createElement(components_1.Actions, null)))));
};
exports.default = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(Main);
