<script setup>
import { computed } from 'vue'

const props = defineProps({
  /**
   * ボタンのdisable判定
   * @example disabled: false
   */
  disabled: { type: Boolean, default: false },

  /**
   * v-modelの値
   * @example true
   */
  modelValue: { type: [Boolean, Array] },

  /**
   * value(配列の場合使用)
   * @example true
   */
  value: { type: [String, Number], default: '' },
  /**
   *toggleタイトルに表示するテキスト
   * @example p_Title: 'text'
   */
  p_Title: { type: String, default: '' },
})

const emit = defineEmits(['update:modelValue'])

const toggleModelValue = computed({
  get: () => {
    if (typeof props.modelValue === 'boolean') return props.modelValue
    if (!props.value && !props.p_Title) return console.warn('valueかp_Titleを指定してください')
    return props.modelValue.includes(props.value ? props.value : props.p_Title)
  },
  set: (value) => {
    if (typeof props.modelValue === 'boolean') return emit('update:modelValue', value)

    if (value) {
      return emit('update:modelValue', [
        ...props.modelValue,
        props.value ? props.value : props.p_Title,
      ])
    } else {
      return emit(
        'update:modelValue',
        [...props.modelValue].filter((item) => item !== (props.value ? props.value : props.p_Title))
      )
    }
  },
})

const changeValue = () => {
  if (props.disabled) return

  toggleModelValue.value = !toggleModelValue.value
}
</script>

<template>
  <div class="_c_toggle" :class="{ _disabled_hover: disabled }">
    <div class="_title_area">{{ p_Title }}</div>
    <div class="_toggle_area" :class="{ _disabled: disabled }">
      <div :class="{ _checked: toggleModelValue }" @click="changeValue">
        <input
          v-model="toggleModelValue"
          class="_c_toggleflg"
          type="checkbox"
          :disabled="disabled"
        />
        <!-- トグルのベース部分 -->
        <div class="_toggle_track"></div>
        <!-- トグルの可動部分 -->
        <div class="_toggle_thumb"></div>
      </div>
    </div>
  </div>
</template>
<style lang="sass">
._c_toggleflg
  display: none
._disabled
  pointer-events: none
  opacity: 0.5
  cursor: not-allowed
._disabled_hover
  cursor: not-allowed
._c_toggle
  display: flex

._title_area
  user-select: none
  font-size: 12px
  color: #707070
  margin-right: 5px
  line-height: 20px

._toggle_area
  user-select: none
  position: relative
  width: 32px
  height: 20px
  cursor: pointer

// トグルのベース部分
._toggle_track
  position: absolute
  top: 50%
  left:  0
  margin: auto 0
  width: 32px
  height: 14px
  border-radius: 7px
  background-color: #000000
  transform: translateY(-50%)
  opacity: .38
// トグルの可動部分
._toggle_thumb
  position: absolute
  top: 50%
  left: 0
  width: 0
  height: 20px
  background: transparent
  transform: translateY(-50%)
  transition: left .22s

// トグルの可動部分のホバー時用要素
._toggle_thumb::before
  content: ""
  width: 20px
  height: 20px
  position: absolute
  border-radius: 50%
  background: #000
  opacity: 0.12
  transform: scale3d(0, 0, 1)
  transition: transform 0.22s cubic-bezier(0, 0, 0.2, 1)
  box-sizing: border-box

// トグルの可動部分の色反映用要素
._toggle_thumb::after
  content: ""
  position: absolute
  top: 50%
  width: 20px
  height: 20px
  border-radius: 50%
  background: #fff
  box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)
  transition: all 0.22s cubic-bezier(0, 0, 0.2, 1)
  transform: translateY(-50%)

  //--------------------------------------------
  // checkboxがcheckされた際の表示
  //--------------------------------------------
._checked ._c_toggleflg ~ ._toggle_track
  background-color: var(--q-primary)
  opacity: .54

._checked ._c_toggleflg ~ ._toggle_thumb
  left: calc(32px - 20px)

._checked ._c_toggleflg ~ ._toggle_thumb::before,
._checked ._c_toggleflg ~ ._toggle_thumb::after
  background-color: var(--q-primary)

._toggle_thumb_shadow
  background: #000
  border-radius: 50%

._toggle_area:hover ._toggle_thumb::before
  transform: scale3d(1.5, 1.5, 1)
</style>
