<script setup lang="ts">
import { PropType, computed } from "vue";
import { CCToggleType } from "./CCToggle.types";
import CCMDIcon from "../CCMDIcon/CCMDIcon.vue";

const props = defineProps({
  /**
   * 値
   * @example true | false
   */
  modelValue: { type: Boolean, default: false },
  /**
   * パターン
   * @example 'pattern1' | 'pattern2' | 'pattern3'
   */
  design: { type: String as PropType<CCToggleType>, default: "pattern1" },
  /**
   * 制御
   * @example true: 制御, false: 解除
   */
  disabled: { type: Boolean, default: false },
  /**
   * ラベル
   * @example 'label'
   */
  label: { type: String, default: "" },
  /**
   * ホバー解除
   * @example hoverInvalid
   */
  hoverInvalid: { type: Boolean, default: false },
});

const emit = defineEmits<{
  (e: "update:modelValue", val: boolean): void;
}>();

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

// トグルをクリックする
const clickToggle = () => {
  if (props.disabled) return;
  model.value = !model.value;
};
</script>

<template>
  <div
    v-if="design === 'pattern1' || design === 'pattern2'"
    class="_p1_p2_item_container"
    :class="{
      _disabled_item_container: props.disabled,
      _hover_invalid_item_container: props.hoverInvalid,
    }"
    @click="clickToggle"
  >
    <div
      v-if="design === 'pattern1'"
      :class="{
        _p1_p2_ball_passive: !model && !props.hoverInvalid,
        _p1_p2_ball_active: model && !props.hoverInvalid,
        _p1_p2_ball_passive_hover_invalid: !model && props.hoverInvalid,
        _p1_p2_ball_active_hover_invalid: model && props.hoverInvalid,
        _ball_disabled: props.disabled,
      }"
      class="_p1_p2_ball"
    />
    <div
      v-if="design === 'pattern2'"
      :class="{
        _p1_p2_ball_passive: !model && !props.hoverInvalid,
        _p1_p2_ball_active: model && !props.hoverInvalid,
        _p1_p2_ball_passive_hover_invalid: !model && props.hoverInvalid,
        _p1_p2_ball_active_hover_invalid: model && props.hoverInvalid,
        _ball_disabled: props.disabled,
      }"
      class="_p1_p2_ball"
    >
      <div>
        <CCMDIcon
          :name="model ? 'done' : 'close'"
          :class="{
            _icon_active: model,
            _icon_passive: !model,
          }"
          class="_icon_common"
        />
      </div>
    </div>

    <div
      v-if="!props.disabled && !props.hoverInvalid"
      :class="{
        _p1_p2_hover_circle_passive: !model,
        _p1_p2_hover_circle_active: model,
      }"
      class="_p1_p2_hover_circle"
    />

    <div
      :class="{
        _p1_p2_bar_active: model,
        _p1_p2_bar_passive: !model,
      }"
      class="_p1_p2_bar"
    />
  </div>

  <div
    v-if="design === 'pattern3'"
    :class="{
      _p3_item_active: model,
      _p3_item_passive: !model,
      _disabled_item_container: props.disabled,
    }"
    class="_p3_item_container"
    @click="clickToggle"
  >
    <div
      class="_p3_ball"
      :class="{
        _p3_ball_passive: !model,
        _p3_ball_active: model,
        _ball_disabled: props.disabled,
      }"
    />
  </div>
</template>

<style lang="sass" scoped>
._p1_p2_item_container
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  position: relative
  height: 50px
  width: 65px
  cursor: pointer
  border-radius: 25px
._p1_p2_item_container:hover ._p1_p2_hover_circle
  background: rgb(var(--c-primary-rgb), 0.3)

._hover_invalid_item_container
  height: 25px
  width: 40px

._p1_p2_ball
  position: absolute
  top: 50%
  left: 0%
  transform: translateY(-50%)
  -webkit-transform: translateY(-50%)
  -ms-transform: translateY(-50%)
  z-index: 10
  width: 25px
  height: 25px
  border-radius: 25px
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 6px, rgba(0, 0, 0, 0.23) 0px 2px 6px
  transition: 0.3s

._icon_common
  position: absolute
  font-size: 16px
  font-weight: 700
  border-radius: 25px
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  -webkit-transform: translate(-50%, -50%)
  -ms-transform: translate(-50%, -50%)
._icon_active
  color: #fff
._icon_passive
  color: #707070

._p1_p2_ball_passive
  background: #fff
  margin-left: 12px

._p1_p2_ball_active
  background: var(--c-primary)
  margin-left: 28px

._p1_p2_ball_passive_hover_invalid
  background: #fff
._p1_p2_ball_active_hover_invalid
  background: var(--c-primary)
  margin-left: 16px

._p1_p2_hover_circle
  position: absolute
  top: 50%
  left: 0
  transform: translateY(-50%)
  -webkit-transform: translateY(-50%)
  -ms-transform: translateY(-50%)
  z-index: 5
  height: 50px
  width: 50px
  border-radius: 25px
  transition: 0.3s

._p1_p2_hover_circle_passive
  margin-left: 0px

._p1_p2_hover_circle_active
  margin-left: 15px

._p1_p2_bar
  position: absolute
  z-index: 1
  height: 13px
  width: 40px
  border-radius: 25px
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  -webkit-transform: translate(-50%, -50%)
  -ms-transform: translate(-50%, -50%)
._p1_p2_bar_active
  background: rgb(var(--c-primary-rgb), 0.3)
._p1_p2_bar_passive
  background: #9E9E9E

._p3_item_container
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  height: 30px
  width: 60px
  border-radius: 25px
  display: flex
  align-items: center
  cursor: pointer
  transition: 0.3s
._p3_item_active
  background: var(--c-primary)
._p3_item_passive
  background: #9E9E9E

._p3_ball
  width: 24px
  height: 24px
  border-radius: 25px
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 6px, rgba(0, 0, 0, 0.23) 0px 2px 6px
  transition: 0.3s

._p3_ball_passive
  margin-left: 4px
  background: #fff

._p3_ball_active
  margin-left: 32px
  background: #fff

._disabled_item_container
  cursor: not-allowed

._ball_disabled
  background: #ECECEC
</style>
