<script setup>
import { defineProps, inject, ref, watch } from "vue";
import SystemInfoModalDesktop from "./SystemInfoModalDesktop.vue";
import SystemInfoModalCog from "./SystemInfoModalCog.vue";
import SystemInfoModalImage from "./SystemInfoModalImage.vue";
import SystemInfoModalChart from "./SystemInfoModalChart.vue";
import { twMerge } from "tailwind-merge";

const { selectedDevice: data, clearSelectedDeviceInfo } = inject("system_selectedDevice")


const currentTab = ref("desktop");
const tabs = {
  desktop: SystemInfoModalDesktop,
  cog: SystemInfoModalCog,
  image: SystemInfoModalImage,
  // chart: SystemInfoModalChart,
};

const changeOpenKey = (key) => {
  currentTab.value = key;
};

const onCancel = () => {
  currentTab.value = "desktop";
  document.getElementById('system_info_modal').close();
  clearSelectedDeviceInfo();
};
</script>

<template>
  <div class="card bg-transparent text-white">
    <div class="card-title py-2 border-b border-zinc-700 justify-between">
      <h3>{{ data?.value?.full_name }}</h3>
      <div>
        <Button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('desktop')">
          <font-awesome-icon :icon="['fas', 'desktop']" size="lg"
            :class="twMerge(currentTab === 'desktop' ? 'text-success' : 'text-[#a5abb1]')" />
        </Button>
        <Button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('image')">
          <font-awesome-icon :icon="['fas', 'image']" size="lg"
            :class="twMerge(currentTab === 'image' ? 'text-success' : 'text-[#a5abb1]')" />
        </Button>
        <Button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('cog')">
          <font-awesome-icon :icon="['fas', 'cog']" size="lg"
            :class="twMerge(currentTab === 'cog' ? 'text-success' : 'text-[#a5abb1]')" />
        </Button>
        <!-- <Button type="link" class="btn-link btn-text-without-border px-2" @click="() => changeOpenKey('chart')">
          <font-awesome-icon :icon="['fas', 'chart-line']" size="lg"
            :class="twMerge(currentTab === 'chart' ? 'text-success' : 'text-[#a5abb1]')" />
        </Button> -->
        <Button type="link" class="btn-link btn-text-without-border px-2" @click="onCancel">
          <font-awesome-icon :icon="['fas', 'times']" size="lg" class="text-[#a5abb1]" />
        </Button>
      </div>
    </div>
    <div class="card-body p-0">
      <component :is="tabs[currentTab]"></component>
    </div>
  </div>
</template>

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