<script setup lang="ts">
import { PropType, computed } from 'vue'
import { CCCard } from '../../index'
import { ColorTypes } from '../../types'

const props = defineProps({
  /**
   * カラー
   * @example 'primary' | 'secondary' | 'positive' | 'negative' | 'warning'
   */
  color: {
    type: String as PropType<ColorTypes>,
    default: 'secondary',
  },
  /**
   * アップロード済みの写真かどうか
   * @example uploaded
   */
  uploaded: { type: Boolean, default: true },
  /**
   * ボタンの透明度
   * @example opacity
   */
  opacity: { type: Boolean, default: false },
  /**
   *
   */
  modelValue: { type: Boolean },
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'onClick', action: 'download' | 'delete' | 'shareUrl' | 'edit'): void
  (e: 'fileChange', file: File): void
}>()

/** メニューの表示非表示フラグ */
const isShowCard = computed<boolean>({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})

/** メニューの表示非表示を切り替える */
const toggleCard = () => {
  isShowCard.value = !isShowCard.value
}

/** 範囲外をクリックしてもメニューが閉じるようにする */
document.addEventListener('click', e => {
  const menuButton = (e.target as Element).closest('#menuButton')
  const anotherElement = (e.target as Element).closest('#menuCard')
  if (!menuButton && !anotherElement && isShowCard.value) {
    isShowCard.value = false
  }
})

/** 渡ってきたカラーに応じて色を変える */
const changeColor = computed(() => {
  if (props.color === 'primary') return 'var(--c-primary)'
  if (props.color === 'secondary') return 'var(--c-secondary)'
  if (props.color === 'positive') return 'var(--c-positive)'
  if (props.color === 'negative') return 'var(--c-negative)'
  if (props.color === 'warning') return 'var(--c-warning)'
})
</script>

<template>
  <div id="menuButton" :class="['_circle', { _opacity: opacity }]" @click="toggleCard()">
    <div class="_line"></div>
    <div class="_line"></div>
    <div class="_line"></div>
  </div>
  <transition name="fade">
    <CCCard id="menuCard" class="_card" v-show="isShowCard">
      <div v-if="uploaded">
        <div class="_button" @click="() => emit('onClick', 'download')">ダウンロード</div>
        <div class="_button" @click="() => emit('onClick', 'edit')">編集</div>
        <div class="_button" @click="() => emit('onClick', 'delete')">削除</div>
        <div class="_button" @click="() => emit('onClick', 'shareUrl')">共有用URL</div>
      </div>
      <div v-else>
        <div class="_button" @click="() => emit('onClick', 'edit')">編集</div>
        <div class="_button" @click="() => emit('onClick', 'delete')">削除</div>
      </div>
      <div class="_button" @click="toggleCard()">閉じる</div>
    </CCCard>
  </transition>
</template>

<style lang="sass" scoped>
._circle
  width: 40px
  height: 40px
  background: rgba(255, 255, 255)
  border-radius: 50%
  position: relative
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
  cursor: pointer
._opacity
  background: rgba(255, 255, 255, 0.5)
._line
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)
  width: 20px
  height: 2px
  background: v-bind(changeColor)
._line:nth-child(2)
  top: 65%
._line:nth-child(3)
  top: 35%
._card
  width: 130px
  margin-top: 10px
  position: absolute
.fade-enter-active, .fade-leave-active
  transition: opacity 0.2s
.fade-enter, .fade-enter-from, .fade-leave-to
  opacity: 0
.fade-enter-to, .fade-leave
  opacity: 1
._button
  font-size: 16px
  color: #707070
  padding: 10px 15px
  cursor: pointer
  transition: 0.3s
._button:hover
  background: v-bind(changeColor)
  color: #ffffff
</style>
