<script lang="ts">
    import { defineComponent, nextTick, onUnmounted, ref, unref, watchEffect } from 'vue'
    import { Divider, Tooltip } from 'ant-design-vue'
    import type { ToolbarConfig } from './types'
    import { Icon } from '/@/components/Icon'

    import { useFlowChartContext } from './useFlowContext'
    import { ToolbarTypeEnum } from './enum'

    export default defineComponent({
        name: 'FlowChartToolbar',
        components: { Icon, Divider, Tooltip },
        props: {
            prefixCls: String,
        },
        emits: ['view-data'],
        setup(_, { emit }) {
            const toolbarItemList = ref<ToolbarConfig[]>([
                {
                    type: ToolbarTypeEnum.ZOOM_IN,
                    icon: 'codicon:zoom-out',
                    tooltip: '缩小',
                },
                {
                    type: ToolbarTypeEnum.ZOOM_OUT,
                    icon: 'codicon:zoom-in',
                    tooltip: '放大',
                },
                {
                    type: ToolbarTypeEnum.RESET_ZOOM,
                    icon: 'codicon:screen-normal',
                    tooltip: '重置比例',
                },
                { separate: true },
                {
                    type: ToolbarTypeEnum.UNDO,
                    icon: 'ion:arrow-undo-outline',
                    tooltip: '后退',
                    disabled: true,
                },
                {
                    type: ToolbarTypeEnum.REDO,
                    icon: 'ion:arrow-redo-outline',
                    tooltip: '前进',
                    disabled: true,
                },
                { separate: true },
                {
                    type: ToolbarTypeEnum.SNAPSHOT,
                    icon: 'ion:download-outline',
                    tooltip: '下载',
                },
                {
                    type: ToolbarTypeEnum.VIEW_DATA,
                    icon: 'carbon:document-view',
                    tooltip: '查看数据',
                },
            ])

            const { logicFlow } = useFlowChartContext()

            function onHistoryChange({ data: { undoAble, redoAble } }) {
                const itemsList = unref(toolbarItemList)
                const undoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.UNDO)
                const redoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.REDO)
                if (undoIndex !== -1) {
                    unref(toolbarItemList)[undoIndex].disabled = !undoAble
                }
                if (redoIndex !== -1) {
                    unref(toolbarItemList)[redoIndex].disabled = !redoAble
                }
            }

            const onControl = (item) => {
                const lf = unref(logicFlow)
                if (!lf) {
                    return
                }
                switch (item.type) {
                    case ToolbarTypeEnum.ZOOM_IN:
                        lf.zoom()
                        break
                    case ToolbarTypeEnum.ZOOM_OUT:
                        lf.zoom(true)
                        break
                    case ToolbarTypeEnum.RESET_ZOOM:
                        lf.resetZoom()
                        break
                    case ToolbarTypeEnum.UNDO:
                        lf.undo()
                        break
                    case ToolbarTypeEnum.REDO:
                        lf.redo()
                        break
                    case ToolbarTypeEnum.SNAPSHOT:
                        lf.getSnapshot()
                        break
                    case ToolbarTypeEnum.VIEW_DATA:
                        emit('view-data')
                        break
                }
            }

            watchEffect(async () => {
                if (unref(logicFlow)) {
                    await nextTick()
                    unref(logicFlow)?.on('history:change', onHistoryChange)
                }
            })

            onUnmounted(() => {
                unref(logicFlow)?.off('history:change', onHistoryChange)
            })
            return { toolbarItemList, onControl }
        },
    })
</script>

<template>
    <div :class="`${prefixCls}-toolbar`" class="flex items-center px-2 py-1">
        <template v-for="item in toolbarItemList" :key="item.type">
            <Tooltip placement="bottom" v-bind="item.disabled ? { visible: false } : {}">
                <template #title>{{ item.tooltip }}</template>
                <span :class="`${prefixCls}-toolbar__icon`" v-if="item.icon" @click="onControl(item)">
                    <Icon :icon="item.icon" :class="item.disabled ? 'cursor-not-allowed disabeld' : 'cursor-pointer'" />
                </span>
            </Tooltip>
            <Divider v-if="item.separate" type="vertical" />
        </template>
    </div>
</template>

<style lang="less">
    @prefix-cls: ~'@{namespace}-flow-chart-toolbar';

    html[data-theme='dark'] {
        .lf-dnd {
            background: #080808;
        }
    }
    .@{prefix-cls} {
        height: 36px;
        background-color: @app-content-background;
        border-bottom: 1px solid @border-color-base;

        .disabeld {
            color: @disabled-color;
        }

        &__icon {
            display: inline-block;
            padding: 2px 4px;
            margin-right: 10px;

            &:hover {
                color: @primary-color;
            }
        }
    }
</style>
