import { Prop, Vue } from 'vue-property-decorator';
import { CreateElement, VNode } from 'vue';
import { indexOf, mergeDeepRight } from 'ramda';
import { IDesignContext, IMaterialItem } from '../../interface';
import sortable from 'sortablejs';
import './design-material-panel-base.less';

/**
 * 拖拽面板
 *
 * @export
 * @class DesignMaterialPanelBase
 * @extends {Vue}
 */
export class DesignMaterialPanelBase extends Vue {
    /**
     * 设计上下文
     *
     * @type {IDesignContext}
     * @memberof DesignMaterialPanelBase
     */
    @Prop()
    ctx!: IDesignContext;

    /**
     * 容器面板DOM实例
     *
     * @type {HTMLDivElement}
     * @memberof DesignMaterialPanelBase
     */
    el!: HTMLDivElement;

    /**
     * 数据
     *
     * @type {IMaterialItem[]}
     * @memberof DesignMaterialPanelBase
     */
    list: IMaterialItem[] = [];

    /**
     * 过滤参数
     *
     * @memberof DesignMaterialPanelBase
     */
    @Prop()
    searchValue = '';

    /**
     * 拖拽参数
     *
     * @private
     * @type {sortable.Options}
     * @memberof DesignMaterialPanelBase
     */
    public options: sortable.Options = {
        group: {
            name: this.ctx.tag,
            pull: 'clone',
            put: false,
        },
        sort: false,
    };

    private created(): void {
        this.componentCreated();
    }

    /**
     * 组件创建完毕
     *
     * @memberof DesignMaterialPanelBase
     */
    componentCreated(): void {}

    private mounted(): void {
        this.el = this.$refs.panel as any;
        this.options = mergeDeepRight(this.options, this.generateOption()) as any;
        this.componentMounted();
    }

    /**
     * 组件加载完毕
     *
     * @memberof DesignMaterialPanelBase
     */
    componentMounted(): void {}

    private destroyed(): void {
        this.componentDestroyed();
    }

    /**
     * 组件销毁
     *
     * @memberof DesignMaterialPanelBase
     */
    componentDestroyed(): void {}

    /**
     * 生成拖拽面板参数
     *
     * @return {*}  {sortable.Options}
     * @memberof DesignMaterialPanelBase
     */
    generateOption(): sortable.Options {
        return {};
    }

    /**
     * 容器样式名称
     *
     * @return {*}
     * @memberof DesignMaterialPanelBase
     */
    getClass() {
        return {
            'ibz-design-material-panel': true,
            'ant-row': true,
        };
    }

    /**
     * 容器样式
     *
     * @return {*}
     * @memberof DesignMaterialPanelBase
     */
    getStyle() {
        return {};
    }

    getFilterList(list?: any[]): IMaterialItem[] {
      const items = list || this.list;
        if(!this.searchValue && Object.is(this.searchValue, '')) {
            return items;
        }
        const regExp = this.searchValue
            .trimStart()
            .trimEnd()
            .toLowerCase();
        return items.filter((item: any) => {
            const text = item.text.toLowerCase();
            if (text.indexOf(regExp) >= 0) {
                return true;
            } else {
                return false;
            }
        });
    }

    /**
     * 监听素材项双击
     *
     * @author zhanghengfeng
     * @date 2023-05-18 14:05:54
     * @param {MouseEvent} e
     * @param {IMaterialItem} _item
     */
    onItemDblClick(e: MouseEvent, _item: IMaterialItem): void {
        e.stopPropagation();
    }

    /**
     * 绘制内容
     *
     * @param {CreateElement} _h
     * @return {*}  {VNode[]}
     * @memberof DesignMaterialPanelBase
     */
    renderContentList(_h: CreateElement): VNode | VNode[] {
        const isSearch = this.searchValue && !Object.is(this.searchValue, '');
        const regExp = this.searchValue
            .trimStart()
            .trimEnd()
            .toLowerCase();
        const items: any[] = isSearch
            ? this.getFilterList()
            : this.list;
        return items.length > 0 ? (
            items.map((item: IMaterialItem, index: number) => {
                let iconVNode = null;
                if (item.icon) {
                    if (item.icon.endsWith('.svg')) {
                        iconVNode = <ion-icon src={item.icon} class='icon-svg'></ion-icon>;
                    } else if (item.icon.endsWith('</svg>')) {
                        const svg = URL.createObjectURL(new Blob([item.icon], {type:"image/svg+xml;charset=utf-8"}));
                        iconVNode = <img class='editor-picture' src={svg} />;
                    } else {
                        iconVNode = <img class='editor-picture' src={`${item.icon}`} />;
                    }
                } else if (item.iconcls) {
                    iconVNode = <div class='icon'>
                        <i class={item.iconcls} />
                    </div>;
                }
                return (
                    <div key={index} class='material-item ant-col-12'>
                        <div class='svg-wrapper'>
                            <svg height='30' width='100%' xmlns='http://www.w3.org/2000/svg'>
                                <rect id='shape' height='30' width='100%' />
                            </svg>
                            <div class='content' title={item.text} on-dblclick={(e: MouseEvent) => this.onItemDblClick(e, item)}>
                                {iconVNode}
                                <div class='label'>{item.text}</div>
                            </div>
                        </div>
                    </div>
                );
            })
        ) : (
            <div class='material-empty'>暂无数据</div>
        );
    }

    render(h: CreateElement) {
        return (
            <draggable
                sort={false}
                group={this.options.group}
                class={this.getClass()}
                style={this.getStyle()}
                list={this.getFilterList().map(item => item.data)}
            >
                {this.renderContentList(h)}
            </draggable>
        );
    }
}