<script setup>
import { defineProps, inject, ref, watch } from "vue";

const props = defineProps({
  open: Boolean,
  toggleModal: Function,
});

const modalContent = inject("modalContent");
console.log("Modal context", modalContent);

const openkey = ref("leaf");
const changeOpenKey = (val) => {
  openkey.value = val;
};
</script>

<template>
  <a-modal
    :open="open"
    :footer="null"
    :mask="false"
    wrapClassName="forge_modal"
    :onCancel="toggleModal"
    :destroyOnClose="true"
  >
    <div class="card bg-transparent text-white">
      <h2 class="card-title pb-2 border-b border-zinc-700 justify-between">
        <span>{{ modalContent?.full_name }}</span>
        <div>
          <a-button
            type="link"
            class="px-1"
            @click="() => changeOpenKey('leaf')"
          >
            <font-awesome-icon
              :icon="['fas', 'leaf']"
              size="2x"
              class="text-[#a5abb1]"
            />
          </a-button>
          <a-button
            type="link"
            class="px-1"
            @click="() => changeOpenKey('desktop')"
          >
            <font-awesome-icon
              :icon="['fas', 'desktop']"
              size="2x"
              class="text-[#a5abb1]"
            />
          </a-button>
          <a-button
            type="link"
            class="px-1"
            @click="() => changeOpenKey('cog')"
          >
            <font-awesome-icon
              :icon="['fas', 'cog']"
              size="2x"
              class="text-[#a5abb1]"
            />
          </a-button>
          <a-button
            type="link"
            class="px-1"
            @click="() => changeOpenKey('triangle')"
          >
            <font-awesome-icon
              :icon="['fas', 'exclamation-triangle']"
              size="2x"
              class="text-[#a5abb1]"
            />
          </a-button>
          <a-button
            type="link"
            class="px-1"
            @click="() => changeOpenKey('bars')"
          >
            <font-awesome-icon
              :icon="['fas', 'bars']"
              size="2x"
              class="text-[#a5abb1]"
            />
          </a-button>
          <a-button type="link" class="px-1" @click="props.toggleModal">
            <font-awesome-icon
              :icon="['fas', 'times']"
              size="2x"
              class="text-[#a5abb1]"
            />
          </a-button>
        </div>
      </h2>
      <div class="card-body px-0">
        <ForgeModalContent :openkey="openkey" />
      </div>
    </div>
  </a-modal>
</template>

<style lang="css">
.forge_modal {
  position: relative;
}

.forge_modal .ant-modal-close {
  display: none;
}

.forge_modal .ant-modal {
  border: 1px solid #35eded;
  padding: 10px;
  margin-bottom: 15px;
  background-color: theme("colors.body");
  position: absolute;
  top: 30%;
  left: 40%;
}

.ant-modal-content {
  background: linear-gradient(
    180deg,
    rgba(127, 237, 193, 0.1),
    rgba(0, 0, 0, 0),
    rgba(127, 237, 193, 0.1)
  ) !important;
}

.ant-modal-header {
  background-color: transparent !important;
}

/**資料框裝飾**/
.forge_modal .ant-modal .ant-modal-content::before {
  content: "" !important;
  background: url(../../assets/img/table/content-box-background01.svg) center
    center !important;
  position: absolute !important;
  left: 4px !important;
  top: 4px !important;
  height: 20px !important;
  width: 20px !important;
  background-repeat: no-repeat !important;
  z-index: 1 !important;
}

.forge_modal .ant-modal .ant-modal-content::after {
  content: "" !important;
  background: url(../../assets/img/table/content-box-background05.svg) center
    center !important;
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  height: 20px !important;
  width: 20px !important;
  background-repeat: no-repeat !important;
  z-index: 3 !important;
}
</style>
