<!--
  - 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">
import type { NodeProps } from '@vue-flow/core'
import type { LcdChannelNodeData } from './useOverviewGraph'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
// @ts-ignore
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiTelevisionShimmer } from '@mdi/js'

const props = defineProps<NodeProps<LcdChannelNodeData>>()
const { t } = useI18n()
const router = useRouter()

function onClick() {
    router.push({
        name: 'device-lcd',
        params: {
            deviceId: props.data.deviceUID,
            channelName: props.data.channelName,
        },
    })
}
</script>

<template>
    <div
        class="cursor-pointer rounded-lg border border-border-one bg-bg-two shadow-md transition-all hover:shadow-lg hover:border-accent"
        style="min-width: 220px"
        @click="onClick"
    >
        <div
            class="flex items-center gap-2 rounded-t-lg px-3 py-2"
            :style="{ borderTop: `3px solid ${data.channelColor}` }"
        >
            <svg-icon type="mdi" :path="mdiTelevisionShimmer" class="size-5 text-text-color" />
            <div class="flex-1 truncate text-sm font-semibold text-text-color">
                {{ data.channelLabel }}
            </div>
        </div>
        <div class="space-y-1 px-3 pb-2">
            <div class="truncate text-xs text-text-color-secondary">
                {{ data.deviceLabel }}
            </div>
            <div v-if="data.currentMode" class="truncate text-xs text-accent">
                {{ data.currentMode }}
            </div>
            <div v-else class="text-xs text-text-color-secondary">
                {{ t('models.channelType.lcd') }}
            </div>
        </div>
    </div>
</template>
