<script lang="ts" setup>
import { ref, PropType } from 'vue'
import CInput from '../CInput/CInput.vue'
import CButton from '../CButton/CButton.vue'
import CSpinner from '../CSpinner/CSpinner.vue'

defineProps({
  firstLabel: { type: String, default: 'OK' },
  secondLabel: { type: String, default: 'キャンセル' },
  message: { type: String, required: true },
  // objectでinput用のpropsを格納する
  inputProps: { type: Object as PropType<{ [key in string]: any }>, default: undefined },
  // 設定するとspinnerが設置されてボタンがなくなる
  spinnerSize: { type: String, default: undefined },
  isAlert: { type: Boolean, default: false },
  imageSrc: { type: String, default: undefined },
})

const emit = defineEmits<{
  (e: 'ok', value?: string): void
  (e: 'cancel', value?: string): void
}>()

const value = ref<string | undefined>(undefined)
</script>

<template>
  <div class="_container">
    <!-- メッセージ -->
    <div class="_message" v-if="!(spinnerSize || inputProps)">
      <img :src="imageSrc" v-if="!!imageSrc" />
      <div class="_message_text">{{ message }}</div>
    </div>

    <!-- input -->
    <div v-if="inputProps" class="_input">
      <div>{{ message }}</div>
      <CInput v-bind="inputProps" v-model="value" class="_inputForm" />
    </div>

    <!-- スピナー -->
    <div v-if="spinnerSize" class="_spinner">
      <img :src="imageSrc" />
      <CSpinner :size="spinnerSize" />
    </div>
    <div class="_bottom" :class="{ _single_button: isAlert }" v-if="!spinnerSize">
      <CButton @click="() => emit('ok', value)" p_BtnType="primary" :p_Label="firstLabel" />
      <CButton
        v-if="!isAlert"
        @click="() => emit('cancel', value)"
        p_BtnType="secondary"
        class="_secondaryBtn"
        :p_Label="secondLabel"
      />
    </div>
  </div>
</template>

<style lang="sass" scoped>
._container
  width: calc(600px - 16px)
  box-sizing: border-box

._input
  padding-top: calc(20px - 8px)
  font-size: 14px
  width: fit-content
  margin: auto

._inputForm
  width: 345px
  margin: 20px auto 0 auto

._message
  padding-top: 40px
  font-size: 14px
  width: fit-content
  margin: auto
  img
    object-fit: cover
    height: 45px
    margin: 0 auto 20px
    display: block
._message_text
  margin: 0 auto
  width: fit-content

._spinner
  padding: 30px 0 40px 0
  img
    object-fit: cover
    height: 45px
    margin: 0 auto 25px
    display: block

._bottom
  margin: 0 auto
  width: fit-content
  display: grid
  grid-template-columns: 150px 150px
  padding: 30px 0 calc(30px - 8px) 0
  grid-gap: 20px

._single_button
  grid-template-columns: 180px
</style>
