<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  /**
   * 値
   * @example 'Google'
   */
  modelValue: { type: String, default: '' },
  /**
   * 表示名
   * @example 'フェイスブック'
   */
  label: { type: String },
  /**
   * 連動値
   * @example 'Facebook'
   */
  value: { type: String, default: '' },
  /**
   * 制御
   * @example true | false
   */
  disabled: { type: Boolean, default: false },
  /**
   * ホバーを解除する
   * @example hoverInvalid
   */
  hoverInvalid: { type: Boolean, default: false },
})

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

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

// コンポーネントをクリックした場合の処理
const clickBox = () => {
  if (props.disabled) return

  if (model.value !== props.value) {
    model.value = props.value
  }
}
</script>

<template>
  <div class="_box" :class="{ _active: !disabled, _disable: disabled }" @click="clickBox">
    <div v-show="!props.hoverInvalid" class="_hover_circle_container">
      <div v-show="!props.disabled" class="_hover_circle" />
    </div>

    <div
      class="_radio_item_container"
      :class="{ _hover_invalid_radio_item_container: hoverInvalid }"
    >
      <div
        :class="{
          _outer_circle_active: model === props.value,
          _outer_circle_passive: model !== props.value,
        }"
        class="_outer_circle"
      >
        <div :class="{ _inner_circle_active: model === props.value }" class="_inner_circle" />
      </div>
      <input v-model="model" type="radio" :value="value" />
      <label :for="value" :class="{ _label: !disabled, _label_disabled: disabled }">
        {{ typeof label === 'string' ? label : value }}
      </label>
    </div>
  </div>
</template>

<style lang="sass" scoped>
._box
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  position: relative
  width: fit-content
  font-family: 'Roboto', sans-serif

._box:hover ._hover_circle
  height: 48px
  width: 48px
._active
  cursor: pointer
  opacity: 1
._disable
  cursor: not-allowed
  opacity: 0.7

._radio_item_container
  display: flex
  align-items: center
  padding: 9px 5px 9px 9px

._hover_invalid_radio_item_container
  padding: 0px 5px 0px 0px

._hover_circle_container
  position: absolute
  height: 48px
  width: 48px
  display: flex
  justify-content: center
  align-items: center

._hover_circle
  border-radius: 50%
  height: 0px
  width: 0px
  transition: 0.3s
  background: rgb(var(--c-primary-rgb), 0.1)

input
  display: none

label
  font-size: 16px
  color: #333333
  margin-left: 12px

._label
  cursor: pointer

._label_disabled
  cursor: not-allowed

._outer_circle
  height: 24px
  width: 24px
  border-radius: 50%
  background: #fff
  display: flex
  justify-content: center
  align-items: center
  transition: 0.3s
._outer_circle_active
  border: solid 3px var(--c-primary)
._outer_circle_passive
  border: solid 3px #9E9E9E


._inner_circle
  background: var(--c-primary)
  border-radius: 50%
  transition: 0.3s
._inner_circle_active
  height: 14px
  width: 14px
</style>
