import './index.scss'
import { Messager } from '../../../core/src/component/msgDistribute'
import { fetch } from '../../../core/src/component/httpClient'
import Modal, { Confirm } from '../../../core/src/component/modal'
import INTERFACE from '../const/INTERFACE'
import tool from '../utils/tool'
import floorManager from '../common/FloorManager'
const configNormalClassName = 'cd-icons-config'
const configActiveClassName = 'cd-icons-configActive'
export default class ToolBar {
    id: string
    element: HTMLElement
    req: object | null
    constructor(elment) {
        this.element = elment
        this.render()
        this.bindEvent()
        this.req = null
        this.bindMessager()
    }
    bindMessager() {
        Messager.on('focusModule', (req, res) => {
            this.req = req
            if (!req.containerId) {
                this.element.style.display = 'none'
                return
            }
            const { isFirst, isLast } = floorManager.checkIndex(req.containerId)
            const oUp = this.element.querySelector('.cd-icons-up')
            if (isFirst) {
                oUp && !oUp.classList.contains("cd-icons-upDisable") && oUp.classList.add("cd-icons-upDisable");
            } else {
                oUp && oUp.classList.contains("cd-icons-upDisable") && oUp.classList.remove("cd-icons-upDisable");
            }
            const oDown = this.element.querySelector('.cd-icons-down')
            if (isLast) {
                oDown && !oDown.classList.contains("cd-icons-downDisable") && oDown.classList.add("cd-icons-downDisable");
            } else {
                oDown && oDown.classList.contains("cd-icons-downDisable") && oDown.classList.remove("cd-icons-downDisable");
            }
            this.element.style.display = 'block'
            const [iframeDoc] = tool.getIframeInfo()
            const targetEle = iframeDoc && iframeDoc.getElementById(`J_container_${req.containerId}`)
            const oToolbar = document.getElementById("editor-toolbar")
            const oMiddle = document.querySelector(".editor-layout-middle")
            oToolbar && (oToolbar.style.cssText = `display: block; top: ${targetEle && targetEle.getBoundingClientRect().top}px; transition: top 0.2s, transform 0.2s ease-in-out; -webkit-transition: top 0.2s, transform 0.2s ease-in-out;`)
        })
        Messager.on('hideModuleBar', (req, res) => {
            this.element.style.display = 'none'
        })
        Messager.on('openConfig', (req, res) => {
            this.toggleConfigBtn(true)
            document.querySelector(".editor-layout-middle-wrap").style.width = "calc(100% - 680px)"
        })
        Messager.on('configClosed', (req, res) => {
            this.toggleConfigBtn(false);
            document.querySelector(".editor-layout-middle-wrap").style.width = "calc(100% - 340px)"
        })
    }
    render(): void {
        const innerHTML: string = `
            <div class="editor-toolbar" id="editor-toolbar">
                <li class="toolbar-icon" data-content="设置" data-tooltips data-direaction="right">
                    <i class="cd-icons cd-icons-configActive J_config"></i>
                </li>
                <li class="toolbar-icon" data-content="上移" data-tooltips data-direaction="right">
                    <i class="cd-icons cd-icons-up J_shiftUp"></i>
                </li>
                <li class="toolbar-icon" data-content="下移" data-tooltips data-direaction="right">
                    <i class="cd-icons cd-icons-down J_shiftDown"></i>
                </li>
                <li class="toolbar-icon" data-content="删除" data-tooltips data-direaction="right">
                    <i class="cd-icons cd-icons-remove J_delete"></i>
                </li>
            </div>`
        this.element.innerHTML = innerHTML
    }
    doDeleteFloor(e) {
        const curFloorId = this.req.containerId
        const data = {
            curFloorId
        }
        fetch({ url: INTERFACE.deleteFloor, data }).then((res) => {
            if (res && res.code == 200) {
                Messager.trigger('deleteFloor', data)
            }
        }).catch(e => {
            console.log("deleteFloorCatch", e)
            return null
        })
    }
    doUpFloor(e) {
        const node = e.target
        if (node.classList.contains("cd-icons-upDisable")) {
            return
        }
        const curFloorId = this.req.containerId
        let preFloorId = floorManager.getPreContainerId(curFloorId)
        const data = {
            curFloorId,
            preFloorId
        }
        fetch({ url: INTERFACE.position, data }).then((res) => {
            if (res && res.code == 200) {
                Messager.trigger('moveFloor', data)
            }
        }).catch(e => {
            console.log("upFloorCatch", e)
            return null
        })
    }
    doDownFloor(e) {
        const node = e.target
        if (node.classList.contains("cd-icons-downDisable")) {
            return
        }
        const curFloorId = this.req.containerId
        const preFloorId = floorManager.getNextContainerId(curFloorId)
        const data = {
            curFloorId,
            preFloorId
        }
        fetch({ url: INTERFACE.position, data }).then((res) => {
            if (res && res.code == 200) {
                Messager.trigger('moveFloor', data)
            }
        }).catch(e => {
            console.log("downFloorCatch", e)
            return null
        })
    }
    
    toggleConfigBtn(isActived) {
        const configNode = this.element.querySelector('.J_config')
        if (configNode) {
            if (isActived) {
                configNode.classList.contains(configNormalClassName) && configNode.classList.remove(configNormalClassName);
                !configNode.classList.contains(configActiveClassName) && configNode.classList.add(configActiveClassName);
            } else {
                configNode.classList.contains(configActiveClassName) && configNode.classList.remove(configActiveClassName);
                !configNode.classList.contains(configNormalClassName) && configNode.classList.add(configNormalClassName);
            }
        }
    }
    
    isConfigActived() {
        let result = false
        const configNode = this.element.querySelector('.J_config')
        if (configNode) {
            result = configNode.classList.contains(configActiveClassName)
        }
        return result
    }
    bindEvent(): void {
        this.element.querySelector('.J_config').addEventListener('click', (e) => {
            if (this.isConfigActived()) {
                Messager.trigger('closeConfig');
            } else {
                const activeContainerId = this.req.containerId
                Messager.trigger('openConfig', {
                    containerId: activeContainerId,
                });
            }
        })
        this.element.querySelector('.J_shiftUp').addEventListener('click', (e) => {
            this.doUpFloor(e)
        })
        this.element.querySelector('.J_shiftDown').addEventListener('click', (e) => {
            this.doDownFloor(e)
        })
        this.element.querySelector('.J_delete').addEventListener('click', (e) => {
            new Confirm({
                title: "提示",
                iconClass: "cd-question",
                helper: () => {
                },
                onClose: (flag) => {
                    if (flag === Modal.CloseType.TYPE_OK) {
                        this.doDeleteFloor(e)
                    }
                },
                content: '确定要删除此模块吗？'
            })
        });
    }
}