<script setup>
import { computed } from 'vue'
const props = defineProps({
  /**
   *radioの項目に表示するテキスト
   * @example p_Label: 'text'
   */
  p_Label: { type: String, default: '' },
  /**
   *hover時のエフェクト表示フラグ
   * @example p_HoverEffect: true
   */
  p_HoverEffect: { type: Boolean, default: true },
  /**
   * クリックの有効無効
   * @example p_Checkbox: false
   */
  p_CheckboxType: {
    type: String,
    default: 'normal',
    validator: (val) => ['normal', 'mini'].includes(val),
  },
  /**
   *radioの項目に表示するテキスト
   * @example p_Label: 'text'
   */
  value: { type: String, default: '' },
  /**
   * クリックの有効無効
   * @example disabled: false
   */
  disabled: { type: Boolean, default: false },
  /**
   * v-modelの値
   * @example modelValue: false or ['test1', 'test2']
   */
  modelValue: { type: [Boolean, Array] },
})

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

// checkboxの値
const checkboxValue = computed({
  get() {
    if (typeof props.modelValue === 'boolean') return props.modelValue
    if (!props.value && !props.p_Label) return console.warn('value or p_Label is required')
    // valueがセットされていない場合はlabelで判定
    if (!props.value) return props.modelValue.includes(props.p_Label)
    return props.modelValue.includes(props.value)
  },
  set(value) {
    if (typeof props.modelValue === 'boolean') {
      return emit('update:modelValue', value)
    }
    if (value) {
      emit('update:modelValue', [...props.modelValue, props.value ? props.value : props.p_Label])
    } else {
      emit(
        'update:modelValue',
        [...props.modelValue].filter(
          (label) => label !== (props.value ? props.value : props.p_Label)
        )
      )
    }
  },
})
</script>

<template>
  <!-- componentの全体 -->
  <div :class="`_checkbox_area _checkboxType_${p_CheckboxType}`" @click.stop>
    <div :class="`_checkbox_contents ${disabled ? '_disabled' : '_not_disabled'}`">
      <label>
        <input
          type="checkbox"
          v-model="checkboxValue"
          :disabled="disabled"
          class="_input_checkbox"
        />
        <!-- checkbox全体 -->
        <div class="_checkbox_motion">
          <div class="_auto_square" :class="{ _hover_effective: p_HoverEffect }">
            <!-- box内の描写 -->
            <div class="_firstLine"></div>
            <div class="_secondLine"></div>
          </div>
        </div>
        <!-- label内テキスト -->
        <div class="_checkbox_text">{{ p_Label }}</div>
      </label>
    </div>
  </div>
</template>
<style lang="sass">
//--------------------------------------------------------------------------
// CCheckboxの共通設定
//--------------------------------------------------------------------------
._checkbox_area
  padding: 10px
  font-size: 12px
  color: #707070
._checkbox_area._checkboxType_mini
  padding: 0

._checkbox_contents
  width: fit-content

._checkbox_contents label
  display: flex
._input_checkbox
  display: none
//--------------------------------------------------------------------------
// checkboxの表示　アニメーションなど
//--------------------------------------------------------------------------
._checkbox_motion
  user-select: none
  position: relative
  width:22.5px
  height:22.5px

._auto_square
  position: absolute
  width: 90%
  height: 90%
  top: 5%
  left: 5%
  border: 2px solid #707070
  border-radius: 2px
  background: transparent
  transition: background .22s

._hover_effective::before
  content: ""
  width: 35px
  height: 35px
  position: absolute
  top: calc( -50% - 5%  )
  left: calc( -50% - 5%  )
  border-radius: 50%
  background: #000
  opacity: 0.12
  transform: scale3d(0, 0, 1)
  transition: transform 0.22s cubic-bezier(0, 0, 0.2, 1)

  //hover時の表示
._checkbox_area ._not_disabled:hover ._hover_effective::before
  transform: scale3d(1, 1, 1)

._checkbox_contents._not_disabled label:hover
  cursor: pointer

// box内の線共通
._checkbox_motion ._auto_square ._firstLine,
._checkbox_motion ._auto_square ._secondLine
  position: absolute
  height: 2.5px
  background: #ffffff
  border-radius: .5px
  opacity: 0

// box内の線固有
._firstLine
  width: 7.9px
  transform: rotate(45deg)
  bottom: 4.8px

._secondLine
  width: 14.2px
  transform: rotate(-45deg)
  bottom: 7px
  left: 3.2px

//--------------------------------------------------------------------------
// checkboxの表示　checked時
//--------------------------------------------------------------------------
._input_checkbox:checked ~ ._checkbox_motion ._auto_square
  border: 2px solid var(--q-primary, #0000a0)
  background: var(--q-primary, #0000a0)

._input_checkbox:checked ~ ._checkbox_motion ._auto_square ._firstLine,
._input_checkbox:checked ~ ._checkbox_motion ._auto_square ._secondLine
  opacity: 1

._checkbox_text
  display: inline-block
  padding-left: 6px
  height: 18px
  font-weight: 600
  line-height: 2.1
  color: inherit
  user-select: none

._input_checkbox:checked ~ ._checkbox_motion ._auto_square::before
  background: var(--q-primary, #0000a0)
//--------------------------------------------------------------------------
// radioボタンのdisabled有効時
//--------------------------------------------------------------------------

._checkbox_contents._disabled label:hover
  cursor: not-allowed

._input_checkbox:disabled ~ ._checkbox_motion,
._input_checkbox:disabled ~ ._checkbox_text
  opacity: .75
</style>
