<script setup lang="ts">
import { ref, PropType, watch, computed } from 'vue'
import { SizeTypes, MDIconTypes, ColorTypes } from '../../types'
import CCMDIcon from '../CCMDIcon/CCMDIcon.vue'

const props = defineProps({
  /**
   * label
   * @example 'Save'
   */
  label: { type: String, default: 'label' },
  /**
   * outline
   * @example outline
   */
  outline: { 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 disable => true
   */
  disabled: { type: Boolean, default: false },
  /**
   * アイコン右
   * @example 'mail'
   */
  iconRight: { type: String as PropType<MDIconTypes>, default: '' },
  /**
   * アイコン左
   * @example 'phone'
   */
  iconLeft: { type: String as PropType<MDIconTypes>, default: '' },
  /**
   * ラベルカラー
   */
  labelColor: { type: String, default: '#FFFFFF' },
})

const emit = defineEmits<{
  (e: 'click'): void
}>()

const isDesign = ref<string>()

if (props.rounded) {
  isDesign.value = 'rounded'
}
if (props.square) {
  isDesign.value = 'square'
}
if (!props.rounded && !props.square) {
  isDesign.value = 'standard'
}

watch(
  () => [props.rounded, props.square],
  () => {
    if (props.rounded) {
      isDesign.value = 'rounded'
    }
    if (props.square) {
      isDesign.value = 'square'
    }
    if (!props.rounded && !props.square) {
      isDesign.value = 'standard'
    }
  }
)

// カラーコードが指定された場合に対応するインラインスタイルを設定
const buttonStyle = computed(() => {
  if (props.color.startsWith('#')) {
    return {
      backgroundColor: props.outline ? 'transparent' : props.color,
      border: props.outline ? `1px solid ${props.color}` : 'none',
      color: props.labelColor,
    }
  }
  return {}
})
</script>

<template>
  <button
    :disabled="disabled"
    class="_cc_button"
    :class="{
      _standard: isDesign === 'standard',
      _rounded: isDesign === 'rounded',
      _square: isDesign === 'square',
      _size_xs: size === 'xs' || size === 'XS',
      _size_s: size === 's' || size === 'S',
      _size_m: size === 'm' || size === 'M',
      _size_l: size === 'l' || size === 'L',
      _size_xl: size == 'xl' || size === 'XL',
      _disabled: disabled,
      _color_primary: color === 'primary',
      _color_secondary: color === 'secondary',
      _color_positive: color === 'positive',
      _color_negative: color === 'negative',
      _color_warning: color === 'warning',
      _outline_primary: outline && color === 'primary',
      _outline_secondary: outline && color === 'secondary',
      _outline_positive: outline && color === 'positive',
      _outline_negative: outline && color === 'negative',
      _outline_warning: outline && color === 'warning',
    }"
    :style="buttonStyle"
    @click="emit('click')"
  >
    <CCMDIcon v-show="iconLeft" :name="iconLeft" class="_cc_mdicon" />

    <div class="_label">{{ label }}</div>

    <CCMDIcon v-show="iconRight" :name="iconRight" class="_cc_mdicon" />
  </button>
</template>

<style lang="sass" scoped>
._cc_button
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  font-family: 'Roboto', sans-serif
  font-size: 18px
  cursor: pointer
  transition: 0.3s
  border: none
  width: 100%
  display: flex
  justify-content: center
  align-items: center
  color: #fff

._cc_button:hover
  opacity: 0.7

._standard
  border-radius: 5px

._rounded
  border-radius: 25px

._square
  border-radius: 0px

._size_xs
  height: 35px

._size_s
  height: 40px

._size_m
  height: 45px

._size_l
  height: 50px

._size_xl
  height: 55px

._disabled
  cursor: not-allowed
  opacity: 0.7

._color_primary
  background: var(--c-primary)

._color_secondary
  background: var(--c-secondary)

._color_positive
  background: var(--c-positive)

._color_negative
  background: var(--c-negative)

._color_warning
  background: var(--c-warning)

._label
  margin: 0 5px

._cc_mdicon
  font-size: 23px
  height: 25px
  width: 25px

._outline_primary
  background: transparent
  border: 1px solid var(--c-primary)
  color: var(--c-primary)

._outline_secondary
  background: transparent
  border: 1px solid var(--c-secondary)
  color: var(--c-secondary)
._outline_positive
  background: transparent
  border: 1px solid var(--c-positive)
  color: var(--c-positive)
._outline_negative
  background: transparent
  border: 1px solid var(--c-negative)
  color: var(--c-negative)
._outline_warning
  background: transparent
  border: 1px solid var(--c-warning)
  color: var(--c-warning)
</style>
