import { FloorChannelType } from '../const'
import './leftMenu.scss'
interface moduleJson {
	moduleId: number
	moduleType?: number
	moduleName: string
	iconUrl: string
	description: string
}
interface moduleCateJson {
	categoryId: number
	categoryName: string
	moduleList: [moduleJson]
}
export default class LeftMenu {
	id: string
	element: HTMLElement
	modules: [moduleCateJson]
	constructor(elment) {
		this.element = elment
	}
	
	getModuleData(moduleId): moduleJson | undefined {
		const moduleList = this.modules[0].moduleList
		const moduleData = moduleList.find((item) => {
			return item.moduleId == moduleId
		})
		return moduleData
	}
	render(): void {
		this.element.style.visibility = 'visible'
		this.element.style.backgroundColor = '#f8f8f8'
		const moduleListHtmlStr = `
            <div class='cd-left-menu'>
                ${this.modules
					.map((moduleCate: moduleCateJson) => {
						return `
                        <div class='cd-label cd-shade J_toggleDown'>
                            <span class='cd-cate-name'>${
								moduleCate.categoryName
							}</span>
                            <em></em>
                        </div>
                        <div class='cd-colum'>
                            ${moduleCate.moduleList
								.map((module: moduleJson) => {
									const isJointModule =
										module?.moduleType ==
										FloorChannelType.JOINT
									return `<div class='cd-item-cell J_dragItem'
                                    data-tooltips data-direaction='right'
                                    data-module-name='${module.moduleName}'
                                    data-info='${module}'
                                    ${
										module.description
											? 'data-can-hover="true"'
											: ''
									}
                                    data-content='${module.description}'
                                    data-moduleId='${module.moduleId}'>
                                        <div class='cd-mode-icon ${
											isJointModule
												? 'cd-mode-joint-icon'
												: ''
										}'><span style='background-image: url(${
										module.iconUrl
									});'></div>
                                        <div class='cd-cell-name'>${
											module.moduleName
										}</div>
                                    </div>
                                `
								})
								.join('')}
                        </div>
                    `
					})
					.join('')}
            </div>
        `
		this.element.innerHTML = moduleListHtmlStr
	}
	bindEvent(): void {
		const self = this
		$(this.element).on('click', '.J_toggleDown', function () {
			$(this).toggleClass('cd-shade')
			$(this).next('.cd-colum').slideToggle()
		})
		$(this.element)
			.find('.J_dragItem')
			.each((index, item) => {
				const $module = $(item)
				$module.attr('draggable', 'true')
				console.log('index: ' + index)
				item.addEventListener('dragstart', (e) => {
					const moduleId = $module.attr('data-moduleId')
					const moduleName = $module.attr('data-module-name')
					const moduleData: moduleJson = self.getModuleData(moduleId)
					e.dataTransfer?.setData('moduleId', moduleId)
					e.dataTransfer?.setData(
						'moduleData',
						JSON.stringify(moduleData)
					)
					e.dataTransfer?.setData('moduleName', moduleName)
				})
			})
	}
	setModuleList(modules: [moduleCateJson]): void {
		this.modules = modules
		this.render()
		this.bindEvent()
	}
}