<template>
  <div v-if="show" class="dialog">
    <div class="dialog-container">
      <div class="close" v-if="close">
        <CloseA v-if="close === 'A'" @click="handleClose" />
        <CloseB v-if="close === 'B'" @click="handleClose" />
        <Close v-else @click="handleClose" />
      </div>

      <header>
        <slot name="header"></slot>
      </header>

      <main>
        <slot></slot>
      </main>

      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </div>
</template>

<script setup>
import { useViewerStore } from '@/stores/modules/viewer'

const { show, dialogName, close } = defineProps(['show', 'dialogName', 'close'])

const useViewer = useViewerStore()

const closeDialog = () => {
  useViewer.closeElement(dialogName)
}

const handleClose = (event) => {
  if (typeof close === 'function') {
    close(event)
  } else {
    closeDialog()
  }
}
</script>

<style lang="scss">
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 20px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
}

.dialog-container {
  background-color: var(--c-dialog-bg);
  padding: 20px;
  border-radius: 4px;
  position: relative;
  
  .close {
    margin-top: -6px;
    margin-bottom: 2px;
    text-align: right;
    line-height: 0;
    font-size: 0;
    svg {
      cursor: pointer;
    }
  }
  header {
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
  main {
    margin-top: 8px;
    margin-bottom: 16px;
  }
  footer {
    display: flex;
    justify-content: flex-end;
    .rect-button {
      width: 120px;
      height: 40px;
    }
  }
}
</style>
