<script setup lang="ts">
import { PropType } from 'vue'
import { SizeTypes, MDIconTypes, ColorTypes } from '../../types'
import { CCModal, CCButtonSet, CCButton } from '../../index'
defineProps({
  /**
   * ボタンが1個の場合
   * @example singleButton
   */
  singleButton: { type: Boolean, default: false },
  /**
   * ボタンのラベル
   * @example '登録'
   */
  label: { type: String, default: 'label' },
  /**
   * 左ボタンのラベル
   * @example 'キャンセル'
   */
  leftButtonLabel: { type: String, default: 'label' },
  /**
   * 右ボタンのラベル
   * @example '保存'
   */
  rightButtonLabel: { type: String, default: 'label' },
  /**
   * ボタンのアウトライン
   * @example outline
   */
  outline: { type: Boolean, default: false },
  /**
   * 左ボタンのアウトライン
   * @example leftButtonOutline
   */
  leftButtonOutline: { type: Boolean, default: false },
  /**
   * 右ボタンのアウトライン
   * @example rightButtonOutline
   */
  rightButtonOutline: { type: Boolean, default: false },
  /**
   * ラウンドデザイン
   * @example rounded
   */
  rounded: { type: Boolean, default: false },
  /**
   * スクエアデザイン
   * @example square
   */
  square: { type: Boolean, default: false },
  /**
   * サイズ
   * @example 'xs' | 'XS' | 's' | 'S' | 'm' | 'M' | 'l' | 'L' | 'xl' | 'XL'
   */
  size: { type: String as PropType<SizeTypes>, default: 'S' },
  /**
   * カラー
   * @example 'secondary'
   */
  color: {
    type: String as PropType<ColorTypes>,
    default: 'primary',
  },
  /**
   * 左ボタンのカラー
   * @example 'primary'
   */
  leftButtonColor: {
    type: String as PropType<ColorTypes>,
    default: 'primary',
  },
  /**
   * 右ボタンのカラー
   * @example 'secondary'
   */
  rightButtonColor: {
    type: String as PropType<ColorTypes>,
    default: 'primary',
  },
  /**
   * ディセーブル
   * @example disabled
   */
  disabled: { type: Boolean, default: false },
  /**
   * 左ボタンのディセーブル
   * @example leftButtonDisabled
   */
  leftButtonDisabled: { type: Boolean, default: false },
  /**
   * 右ボタンのディセーブル
   * @example rightButtonDisabled
   */
  rightButtonDisabled: { type: Boolean, default: false },
  /**
   * アイコン右
   * @example 'mail'
   */
  iconRight: { type: String as PropType<MDIconTypes>, default: '' },
  /**
   * アイコン左
   * @example 'phone'
   */
  iconLeft: { type: String as PropType<MDIconTypes>, default: '' },
  /**
   * 左ボタンのアイコン左
   * @example 'mail'
   */
  leftButtonIconLeft: { type: String as PropType<MDIconTypes>, default: '' },
  /**
   * 左ボタンのアイコン右
   * @example 'phone'
   */
  leftButtonIconRight: { type: String as PropType<MDIconTypes>, default: '' },
  /**
   * 右ボタンのアイコン左
   * @example 'mail'
   */
  rightButtonIconLeft: { type: String as PropType<MDIconTypes>, default: '' },
  /**
   * 右ボタンのアイコン右
   * @example 'phone'
   */
  rightButtonIconRight: { type: String as PropType<MDIconTypes>, default: '' },
})

const emit = defineEmits<{
  (e: 'click'): void
  (e: 'clickLeft'): void
  (e: 'clickRight'): void
}>()
</script>

<template>
  <CCModal loginPage size="s">
    <div class="_slot_container">
      <slot />
    </div>
    <CCButton
      v-if="singleButton"
      class="_single_button"
      :label="label"
      :outline="outline"
      :rounded="rounded"
      :square="square"
      :size="size"
      :color="color"
      :disabled="disabled"
      :iconRight="iconRight"
      :iconLeft="iconLeft"
      @click="() => emit('click')"
    />
    <CCButtonSet
      v-else
      class="_double_button"
      center-space="20px"
      :leftButtonLabel="leftButtonLabel"
      :rightButtonLabel="rightButtonLabel"
      :leftButtonOutline="leftButtonOutline"
      :rightButtonOutline="rightButtonOutline"
      :rounded="rounded"
      :square="square"
      :size="size"
      :leftButtonColor="leftButtonColor"
      :rightButtonColor="rightButtonColor"
      :leftButtonDisabled="leftButtonDisabled"
      :rightButtonDisabled="rightButtonDisabled"
      :leftButtonIconLeft="leftButtonIconLeft"
      :leftButtonIconRight="leftButtonIconRight"
      :rightButtonIconLeft="rightButtonIconLeft"
      :rightButtonIconRight="rightButtonIconRight"
      @clickLeft="() => emit('clickLeft')"
      @clickRight="() => emit('clickRight')"
    />
  </CCModal>
</template>

<style lang="sass" scoped>
._single_button
  width: 150px
  margin: 30px auto
._double_button
  width: 320px
  margin: 30px auto
._slot_container
  margin: 20px
  margin-bottom: 0
  text-align: center
</style>
