<template>
    <div class="trend-tool-groups">
        <div v-for="group in toolGroups" :key="group.key" class="trend-tool-group">
            <el-tooltip v-for="item in group.items" :key="item.action" :content="getToolTooltip(item)" placement="top">
                <el-button
                    :type="isToolActive(item.action) ? 'primary' : 'default'"
                    :icon="item.icon"
                    :disabled="isToolDisabled(item.action)"
                    circle
                    @click="emit('tool-action', item.action)"
                />
            </el-tooltip>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { SteadyTrendToolAction, SteadyTrendToolGroup, SteadyTrendToolItem } from './chartTools'

defineOptions({
    name: 'SteadyTrendChartTools'
})

defineProps<{
    toolGroups: SteadyTrendToolGroup[]
    isToolActive: (action: SteadyTrendToolAction) => boolean
    isToolDisabled: (action: SteadyTrendToolAction) => boolean
    getToolTooltip: (item: SteadyTrendToolItem) => string
}>()

const emit = defineEmits<{
    'tool-action': [action: SteadyTrendToolAction]
}>()
</script>

<style scoped lang="scss">
.trend-tool-groups {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.trend-tool-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.trend-tool-group + .trend-tool-group {
    padding-left: 8px;
    border-left: 1px dashed var(--el-border-color);
}

.trend-tool-group :deep(.el-button.is-circle) {
    width: 28px;
    height: 28px;
    padding: 6px;
}
</style>
