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-compress-setting.tmpl';
        Editor.import(tmpl).then(content => {
            viewEL.innerHTML = content;

            let assetsCompress = `assetsCompress`;
            let compress = panel.getSettingItem(assetsCompress) || {};

            // 压缩开关
            let checkboxEle = viewEL.querySelector('ui-checkbox');
            checkboxEle.value = compress.enable;
            checkboxEle.addEventListener('change', (event) => {
                compress.enable = event.target.value;
                panel.setSettingItem(assetsCompress, compress);
            });

            // 压缩品质
            let qualityEle = viewEL.querySelector('#quality');
            qualityEle.value = compress.quality;
            qualityEle.addEventListener('confirm', (event) => {
                compress.quality = event.target.value;
                panel.setSettingItem(assetsCompress, compress);
            });

            // 需要压缩的后缀
            let extsEle = viewEL.querySelector('#exts');
            extsEle.value = compress.exts;
            extsEle.addEventListener('confirm', (event) => {
                compress.exts = event.target.value;
                panel.setSettingItem(assetsCompress, compress);
            });

            // 支持压缩平台
            let platformEle = viewEL.querySelector('#platform');
            platformEle.value = compress.platform;
            platformEle.addEventListener('confirm', (event) => {
                compress.platform = event.target.value;
                panel.setSettingItem(assetsCompress, compress);
            });

            // 忽略的资源
            let ignores = compress.ignores || [];
            let listEle = viewEL.querySelector('#list');
            if (!ListItem) {
                ListItem = Editor.UI.registerElement('compress-ignore-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 < ignores.length; i++) {
                                const path = ignores[i];
                                if (path == text) {
                                    ignores.splice(i, 1);
                                    break;
                                }
                            }
                        });
                    }
                });
            }

            // 资源列表
            ignores.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 + '/assets',
                    properties: ['openDirectory', 'openFile']
                });
                if (res !== -1) {
                    let newPath = res[0];
                    let relative = utils.getRelative(Editor.Project.path, newPath);
                    for (const path of ignores) {
                        if (path === relative) {
                            Editor.log(relative + '已经存在！');
                            return;
                        }
                    }

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

                    ignores.push(relative);
                    compress.ignores = ignores;
                    panel.setSettingItem(assetsCompress, compress);
                }
            });
        });
    };
})();