<!--
  - CoolerControl - monitor and control your cooling and other devices
  - Copyright (c) 2021-2025  Guy Boldon and contributors
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU General Public License as published by
  - the Free Software Foundation, either version 3 of the License, or
  - (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU General Public License
  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script setup lang="ts">
// @ts-ignore
import SvgIcon from '@jamescoyle/vue-icon/lib/svg-icon.vue'
import { useDeviceStore } from '@/stores/DeviceStore.ts'
import Popover from 'primevue/popover'
import { mdiInformationSlabCircleOutline } from '@mdi/js'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

interface Props {}

defineProps<Props>()
const emit = defineEmits<{
    (e: 'open', value: boolean): void
}>()

const popRef = ref()
const deviceStore = useDeviceStore()
const { t } = useI18n()
</script>

<template>
    <div v-tooltip.top="{ value: t('common.overview') }">
        <div
            class="rounded-lg w-8 h-8 border-none p-0 text-text-color-secondary outline-0 text-center justify-center items-center flex hover:text-text-color hover:bg-surface-hover"
            @click.stop="(event) => popRef.toggle(event)"
        >
            <svg-icon
                class="outline-0"
                type="mdi"
                :path="mdiInformationSlabCircleOutline"
                :size="deviceStore.getREMSize(1.5)"
            />
        </div>
        <Popover ref="popRef" @show="emit('open', true)" @hide="emit('open', false)">
            <div
                class="mt-2.5 w-full max-w-prose bg-bg-two border border-border-one p-4 rounded-lg text-text-color"
            >
                <span class="font-bold text-lg">{{ t('layout.menu.modes') }}</span>
                <div class="mt-1 h-2 border-border-one border-t-2" />
                {{ t('components.modeInfo.description') }}
                <br /><br />
                <span class="italic">
                    {{ t('components.modeInfo.note') }}
                </span>
            </div>
        </Popover>
    </div>
</template>

<style scoped lang="scss"></style>
