<script setup lang="ts">
// 製作者 樋渡
import { ref, watch } from 'vue'
import CCDialogConfirmation from '../CCDialogConfirmation.vue'
import CCInput from '../../CCInput/CCInput.vue'

const isLeftDialog = ref(false)
const isRightDialog = ref(false)
const value = ref('')

const open = (button: string) => {
  if (button === 'left') isLeftDialog.value = true
  if (button === 'right') isRightDialog.value = true
}

const close = (button: string) => {
  if (button === 'left') {
    isLeftDialog.value = false
    value.value = ''
  }
  if (button === 'right') isRightDialog.value = false
}

const registration = () => {
  alert(`${value.value}を登録しました。`)
  value.value = ''
}

watch(isLeftDialog, (newValue) => {
  if (!newValue) value.value = ''
})
</script>

<template>
  <div style="display: flex">
    <button @click="open('left')">ボタン2個<br />インプットフォーム付き</button>
    <button @click="open('right')">ボタン1個<br />テキストのみ</button>
  </div>

  <!-- ボタン2個のインプットフォーム付きダイアログ -->
  <CCDialogConfirmation
    v-model="isLeftDialog"
    rounded
    rightButtonOutline
    leftButtonLabel="閉じる"
    rightButtonLabel="登録"
    leftButtonColor="primary"
    rightButtonColor="secondary"
    @clickLeft="close('left')"
    @clickRight="registration"
  >
    <div class="_left_dialog_text">アイテムカテゴリ追加</div>
    <CCInput outline label="label" class="_left_dialog_input" v-model="value" />
  </CCDialogConfirmation>

  <!-- ボタン1個のテキストのみダイアログ -->
  <CCDialogConfirmation
    v-model="isRightDialog"
    singleButton
    rounded
    label="閉じる"
    color="primary"
    @click="close('right')"
  >
    <div class="_right_dialog_text">登録が完了しました。</div>
  </CCDialogConfirmation>
</template>

<style scoped>
button {
  width: 300px;
  padding: 15px 0;
  font-size: 18px;
}
._left_dialog_text {
  font-size: 18px;
  font-weight: bold;
  bottom: 20px;
  right: 100px;
  position: relative;
}
._left_dialog_input {
  width: 320px;
  margin: 0 auto 0 auto;
}
._right_dialog_text {
  font-size: 16px;
  color: #333333;
}
</style>
