<template>
    <div class="location">
        <el-tooltip
            effect="dark"
            :content="t('toolbar.location.to-begin')"
            placement="bottom"
            raw-content
        >
            <div
                class="item iconfont icon-beginning"
                @click="toBegin()"
            />
        </el-tooltip>
        

        <el-tooltip
            effect="dark"
            :content="t('toolbar.location.to-end')"
            placement="bottom"
            raw-content
        >
            <div
                class="item iconfont icon-ending"
                @click="toEnd()"
            />
        </el-tooltip>

        <el-divider direction="vertical"></el-divider>

        <el-tooltip
            effect="dark"
            :content="t('toolbar.location.to-prev-change')"
            placement="bottom"
            raw-content
        >
            <div
                class="item iconfont icon-arrow-to-previous"
                :class="{ 'disable' : globalLookup.sidebarSelectedWireLinks.size === 0 }"
                @click="toPrevChange()"
            />
        </el-tooltip>


        <el-tooltip
            effect="dark"
            :content="t('toolbar.location.to-next-change')"
            placement="bottom"
            raw-content
        >
            <div
                class="item iconfont icon-arrow-to-next"
                :class="{ 'disable' : globalLookup.sidebarSelectedWireLinks.size === 0 }"
                @click="toNextChange()"
            />
        </el-tooltip>
        
        <el-divider direction="vertical"></el-divider>

        <el-tooltip
            effect="dark"
            :content="t('toolbar.location.make-location')"
            placement="bottom"
            raw-content
        >
            <div
                class="item iconfont icon-add-line"
            />
        </el-tooltip>
        
    </div>
</template>

<script setup>
import { defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';
import { toBegin, toEnd, toNextChange, toPrevChange } from './cursor-location';
import { globalLookup } from '@/hook/global';

defineComponent({ name: 'cursor-location' });

const { t } = useI18n();



</script>


<style scoped>
.location {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 1px 5px;
    background-color: var(--sidebar);
    border-radius: .5em;
}

.location .item {
    border-radius: .5em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px;
    height: 32px;
    font-weight: 800;
    width: 32px;
    cursor: pointer;
    transition: var(--animation-3s);
}

.location .item:hover {
    background-color: var(--main-color);
    color: var(--sidebar);
    transition: var(--animation-3s);
}

.disable {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.location .item.disable:hover {
    background-color: unset !important;
    color: unset !important;
}

</style>