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

const props = defineProps({
  /**
   * 値
   * @example 1
   */
  modelValue: { type: Number, default: 0 },
  /**
   * コンテンツ配列
   * @example ['Google', 'Apple', 'Facebook', 'Amazon.com']
   */
  options: { type: Array as PropType<string[]>, default: ['item1', 'item2'] },
  /**
   * アラート配列
   * 通知の設定が必要ないときは0をセットする
   * optionsの配列と同じ順番でセットする
   * @example [0,10,0,true]
   */
  alertArr: {
    type: Array as PropType<(number | boolean)[]>,
    default: [],
  },
  /**
   * パターン
   * @example 2
   */
  pattern: { type: Number, default: 1 },
  /**
   * 横幅
   * @example 100
   */
  width: { type: Number },
  /**
   * アイコンを指定できるようにする
   * @example [{name: 'home', type: 'outlined'}, {name: 'settings', type: 'outlined'}]
   */
  iconSetArr: { type: Object as PropType<{
    name: MDIconTypes,
    type: '' | 'outlined' | 'sharp' | 'round' | 'two-tone'
  }[]
    > ,default: []},
  /**
   * タブのカラーを変更できるようにする
   * @example 'secondary' | '#FF0000'
   * pattern3のみ有効
   */
  colorArr: {
    type: Array as PropType<string[]>,
    default: [],
  },
  /**
   * シャドウをつけるかどうか
   * @example true
   */
  isShadow: { type: Boolean, default: false },
  /**
   * ボーダーをつけるかどうか：pattern3のみ有効
   */
  isBorder: { type: Boolean, default: false },
})

const emit = defineEmits<{
  (e: 'update:modelValue', val: number): void
}>()

const model = computed({
  get: () => props.modelValue,
  set: value => {
    emit('update:modelValue', value)
  },
})
const alertArr = computed(() => props.alertArr)

// 対象のアイテムをクリック
const selectItem = (index: number) => {
  model.value = index
}

// カラーコードが指定された場合に対応するスタイルを設定
const tabColorArr = computed(() => {
  const colorMap = props.colorArr.flatMap((color) => {
    if (color.startsWith('#')) {
    return color
  }
  return `var(--c-${color})`
  })
  return colorMap
})
// console.log('tabColorArr:',tabColorArr.value)
// iconを配列で受け取る
const iconSetArr = computed(() => props.iconSetArr)

</script>

<template>
  <div class="_box">
    <!-- pattern1 -->
    <div v-show="pattern === 1" class="_item_container_common">
      <div
        v-for="(item, index) in options"
        :key="index"
        :style="{
          width: width ? width + 'px' : '100%'
        }"
        :class="{
          _pattern1_item_border_left: index === 0,
          _pattern1_item_active: model === index,
          _pattern1_item_passive: model !== index,
          _shadow: isShadow,
        }"
        class="_pattern1_item"
        @click="selectItem(index)"
      >
        <div v-if="alertArr.at(index)" class="_badge_annihilation" />
        <div v-if="iconSetArr.at(index)?.name" class="_icon_container_gap">
          <CCMDIcon :name="iconSetArr.at(index)?.name!" :type="iconSetArr.at(index)?.type" />
        </div>
        <div>
          {{ item }}
        </div>
        <div v-if="alertArr.at(index)" class="_alert_icon">
          {{
            !alertArr.at(index)
              ? ''
              : typeof alertArr.at(index) === 'number'
              ? alertArr.at(index)
              : '!'
          }}
        </div>
      </div>
    </div>

    <!-- pattern2 -->
    <div v-show="pattern === 2" class="_item_container_common _item_container_gap" >
      <div
        v-for="(item, index) in options"
        :key="index"
        :style="{
          width: width ? width + 'px' : '100%',
        }"
        :class="{
          _pattern2_item_active: model === index,
          _pattern2_item_passive: model !== index,
          _shadow: isShadow,
        }"
        class="_pattern2_item "
        @click="selectItem(index)"
      >
        <div class="_pattern2_content">
          <div v-if="alertArr.at(index)" class="_badge_annihilation" />
          <div v-if="iconSetArr.at(index)?.name"  class="_icon_container_gap">
            <CCMDIcon :name="iconSetArr.at(index)?.name!" :type="iconSetArr.at(index)?.type" />
          </div>
          <div class="_pattern2_content _parttern2_underbar">{{ item }}</div>
          <div v-if="alertArr.at(index)" class="_alert_icon">
            {{
              !alertArr.at(index)
                ? ''
                : typeof alertArr.at(index) === 'number'
                ? alertArr.at(index)
                : '!'
            }}
          </div>
        </div>
      </div>
    </div>

    <!-- pattern3 -->
    <div v-show="pattern === 3" class="_item_container_common _item_container_gap" :class="{ _border_under: isBorder }">
      <div
        v-for="(item, index) in options"
        :key="index"
        :style="{
          width: width ? width + 'px' : '100%',
          background: model === index ? tabColorArr[index] : '',
          color: model !== index ? tabColorArr[index] : '',
        }"
        :class="{
          _pattern3_item_active: model === index,
          _pattern3_item_passive: model !== index,
          _shadow: isShadow,
          
        }"
        class="_pattern3_item"
        @click="selectItem(index)"
      >
        <div v-if="alertArr.at(index)" class="_badge_annihilation" />
        <div v-if="iconSetArr.at(index)?.name" class="_icon_container_gap">
          <CCMDIcon :name="iconSetArr.at(index)?.name!" :type="iconSetArr.at(index)?.type" />
        </div>
        <div>
          {{ item }}
        </div>
        <div v-if="alertArr.at(index)" class="_alert_icon">
          {{
            !alertArr.at(index)
              ? ''
              : typeof alertArr.at(index) === 'number'
              ? alertArr.at(index)
              : '!'
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="sass" scoped>
._box
  font-family: 'Roboto', sans-serif
  font-size: 16px

._item_container_common
  display: flex
._item_container_gap
  gap: 10px

._pattern1_item
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  height: 38px
  justify-content: center
  display: flex
  place-items: center
  cursor: pointer
  transition: 0.3s
  border-top: solid 1px var(--c-primary)
  border-bottom: solid 1px var(--c-primary)
  border-right: solid 1px var(--c-primary)
._pattern1_item:hover
  background: var(--c-primary)
  opacity: 0.7
  color: #fff
._badge_annihilation
  width: 27px
._alert_icon
  border-radius: 50%
  width: 17px
  height: 17px
  color: var(--c-text-color)
  background: var(--c-warning)
  text-align: center
  line-height: 17px
  margin-left: 10px
._pattern1_item_border_left
  border-left: solid 1px var(--c-primary)
._pattern1_item_active
  background: var(--c-primary)
  color: #fff
._pattern1_item_passive
  background: #fff
  color: var(--c-primary)

._pattern2_item
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  height: 30px
  display: flex
  justify-content: center
  align-items: center
  border-top-left-radius: 10px
  border-top-right-radius: 10px
  cursor: pointer
  transition: 0.3s
._pattern2_content
  display: flex
  height: 100%
  justify-content: center
  align-items: center
  box-sizing: border-box
  ._parttern2_underbar
    padding-bottom: 2px

._pattern2_item:hover
  color: var(--c-primary)
._pattern2_item_active
  color: var(--c-primary)
  ._parttern2_underbar
    border-bottom: solid 2px var(--c-primary)
._pattern2_item_passive
  color: #D2D2D2
  ._parttern2_underbar
    opacity: 0.7

._pattern3_item
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  height: 40px
  display: flex
  justify-content: center
  place-items: center
  border-top-left-radius: 10px
  border-top-right-radius: 10px
  cursor: pointer
  transition: 0.3s

._pattern3_item_active
  background: var(--c-primary)
  opacity: 0.7
  color: #fff
._pattern3_item_active:hover
  background: var(--c-primary)
  opacity: 0.5
._pattern3_item_passive
  background: #ECECEC
  color: var(--c-primary)
._pattern3_item_passive:hover
  background: rgb(236, 236, 236, 0.7)

._icon_container_gap
  display: flex
  align-items: center
  justify-content: center

._shadow
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1), -1px -1px 5px rgba(0, 0, 0, 0.1)
._border_under
  border-bottom: solid 2px var(--c-primary)

</style>
