<template>
  <teleport to="body">
    <div class="dialog-w">
      <span class="dialog-close" @click="CloseDialog"></span>
      <div class="dialog-c">
        <div
          class="dialog-header"
          v-if="localData.title !== undefined && localData.title !== ''">
          <h3>{{ localData.title }}</h3>
        </div>
        <div
          class="dialog-content"
          v-if="localData.content !== undefined && localData.content !== ''">
          {{ localData.content }}
        </div>
        <div class="dialog-footer">
          <template
            v-if="localData.buttons !== undefined && localData.buttons.length > 0"
            v-for="(button, i) in dialogData.buttons">
            <button
              :class="['button-c', 'button-' + button.type]"
              @click="button.function(id, button.data)">
              {{ button.label }}
            </button>
          </template>
          <button
            v-if="localData.showClose"
            class="button-c button-cancel"
            @click="localData.closeFunction">
            {{ localData.closeText }}
          </button>
        </div>
      </div>

      <div class="dialog-shadow" @click="CloseDialog"></div>
    </div>
  </teleport>
</template>
<script setup lang="ts">
  import { onBeforeMount, reactive } from 'vue'
  import { useDialogStore } from './dialogStore'
  const dialogStore = useDialogStore()

  export interface Props {
    id: number
    dialogData: Record<string, any>
  }
  const props = withDefaults(defineProps<Props>(), {})
  const localData = reactive({
    title: '',
    content: '',
    showClose: true,
    closeText: 'Kapat',
    closeFunction: () => {
      CloseDialog()
    },
    buttons: []
  })

  const CreateData = () => {
    Object.assign(localData, props.dialogData)
  }

  const CloseDialog = () => {
    delete dialogStore.dialogs[props.id]
  }
  onBeforeMount(() => {
    CreateData()
  })
</script>
<style scoped>
  .dialog-w {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
  .dialog-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }
  .dialog-c {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 480px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9;
    position: relative;
    padding: 24px;
  }
  .dialog-header {
    margin-bottom: 16px;
  }
  .dialog-content {
    margin-bottom: 16px;
  }
  .dialog-footer {
    display: flex;
  }
  .dialog-close {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 9;
    cursor: pointer;
  }
  .dialog-close::before,
  .dialog-close::after {
    content: '';
    flex-direction: block;
    width: 32px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    transform: rotate(45deg);
  }
  .dialog-close::after {
    transform: rotate(-45deg);
  }
</style>
