const utils = Editor.require('packages://build-helper/core/libs/utils.js');

let ListItem;

(() => {
    'use strict';

    return function init ( panel ) {
        let viewEL = panel.$.view;

        let tmpl = 'packages://build-helper/panel/assets-crypto-setting.tmpl';
        Editor.import(tmpl).then(content => {
            viewEL.innerHTML = content;

            let assetsCrypto = `assetsCrypto`;
            let crypto = panel.getSettingItem(assetsCrypto) || {};

            // 加密开关
            let checkboxEle = viewEL.querySelector('ui-checkbox');
            checkboxEle.value = crypto.enable;
            checkboxEle.addEventListener('change', (event) => {
                crypto.enable = event.target.value;
                panel.setSettingItem(assetsCrypto, crypto);
            });

            // 加密签名
            let signEle = viewEL.querySelector('#sign');
            signEle.value = crypto.sign;
            signEle.addEventListener('confirm', (event) => {
                crypto.sign = event.target.value;
                panel.setSettingItem(assetsCrypto, crypto);
            });

            // 加密目录
            let dirEle = viewEL.querySelector('#dir');
            dirEle.value = crypto.dir;
            dirEle.addEventListener('confirm', (event) => {
                crypto.dir = event.target.value;
                panel.setSettingItem(assetsCrypto, crypto);
            });

            // 打开临时项目脚本目录
            let openDirEle = viewEL.querySelector('#openDir');
            openDirEle.addEventListener('click', (event) => {
                let res = Editor.Dialog.openFile({
                    title: '临时项目脚本目录',
                    defaultPath: Editor.Project.path,
                    properties: ['openDirectory']
                });
                if (res !== -1) {
                    let newPath = res[0];
                    let relative = utils.getRelative(Editor.Project.path, newPath);

                    dirEle.value = relative;

                    crypto.dir = relative;
                    panel.setSettingItem(assetsCrypto, crypto);
                }
            });

            // 加密密钥
            let keyEle = viewEL.querySelector('#key');
            keyEle.value = crypto.key;
            keyEle.addEventListener('confirm', (event) => {
                crypto.key = event.target.value;
                panel.setSettingItem(assetsCrypto, crypto);
            });

            // 加密平台
            let platformEle = viewEL.querySelector('#platform');
            platformEle.value = crypto.platform;
            platformEle.addEventListener('confirm', (event) => {
                crypto.platform = event.target.value;
                panel.setSettingItem(assetsCrypto, crypto);
            });

            // 需要加密的后缀
            let extsEle = viewEL.querySelector('#exts');
            extsEle.value = crypto.exts;
            extsEle.addEventListener('confirm', (event) => {
                crypto.exts = event.target.value;
                panel.setSettingItem(assetsCrypto, crypto);
            });

            let list = crypto.list || [];
            let listEle = viewEL.querySelector('#list');
            if (!ListItem) {
                ListItem = Editor.UI.registerElement('crypto-list-item', {
                    template: `
                        <div class="item"">
                            <ui-input id="path" class="path" disabled></ui-input>
                            <ui-button id="del" class="tiny red">删除</ui-button>
                        </div>
                    `,

                    style: `
                        .item {
                            display: flex;
                            background-color: black;
                            padding: 2px;
                        }

                        .path {
                            flex: 1;
                        }
                    `,

                    factoryImpl ( text ) {
                        this.$ = {
                            path: this.shadowRoot.querySelector('#path'),
                            del: this.shadowRoot.querySelector('#del')
                        };

                        this.$.path.value = text;

                        this.$.del.addEventListener('click', (event) => {
                            listEle.removeChild(this);

                            // 配置中删除
                            for (let i = 0; i < list.length; i++) {
                                const path = list[i];
                                if (path == text) {
                                    list.splice(i, 1);
                                    break;
                                }
                            }
                        });
                    }
                });
            }

            // 资源列表
            list.forEach(path => {
                let el = new ListItem(path);
                listEle.appendChild(el);
            });

            // 添加资源
            let addEle = viewEL.querySelector('#add');
            addEle.addEventListener('click', (event) => {
                event.stopPropagation();

                let res = Editor.Dialog.openFile({
                    title: '选择资源目录文件',
                    defaultPath: Editor.Project.path,
                    properties: ['openDirectory', 'openFile']
                });
                if (res !== -1) {
                    let newPath = res[0];
                    let relative = utils.getRelative(Editor.Project.path, newPath);
                    for (const path of list) {
                        if (path === relative) {
                            Editor.log(relative + '已经存在！');
                            return;
                        }
                    }

                    let el = new ListItem(relative);
                    listEle.appendChild(el);

                    list.push(relative);
                    crypto.list = list;
                    panel.setSettingItem(assetsCrypto, crypto);
                }
            });

        });
    };
})();