<script setup>
import { defineProps, onMounted, ref, watch } from "vue";
import ForgeInfoModalDesktop from "./ForgeInfoModalDesktop.vue";
import ForgeInfoModalCog from "./ForgeInfoModalCog.vue";
import ForgeInfoModalChart from "./ForgeInfoModalChart.vue";

const props = defineProps({
  data: Object,
});

const currentTab = ref("desktop");
const tabs = {
  desktop: ForgeInfoModalDesktop,
  cog: ForgeInfoModalCog,
  chart: ForgeInfoModalChart,
};

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

const onCancel = () => {
  forge_info_modal.close();
  currentTab.value="desktop";
};

const position = ref({
  left: "0px",
  top: "0px",
});

watch(
  () => props.data,
  (newValue) => {
    position.value = newValue.initPos;
  }
);
</script>

<template>
  <Modal
    id="forge_info_modal"
    :onCancel="onCancel"
    width="550"
    :draggable="!data?.isMobile"
  >
    <template #modalContent>
      <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="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="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="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 px-0 py-3">
          <component :is="tabs[currentTab]" :key="currentTab" :data="data"></component>
        </div>
      </div>
    </template>
  </Modal>
</template>

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