<template>
  <div>
    <!-- small toggle -->
    <div
      v-if="size === 'small'"
      :class="[
        label == '' ? 'items-center' : 'items-start',
        disabled ? 'pointer-events-none cursor-default' : 'cursor-pointer',
      ]"
      class="flex"
    >
      <span
        class="mr-2 flex flex-grow flex-col"
        :id="id"
        v-if="direction == 'left'"
        @click="switchValue"
      >
        <span v-if="label" :class="classes" class="text-gray-900">{{
          label
        }}</span>
        <span v-if="description" class="text-sm text-gray-500">{{
          description
        }}</span>
      </span>
      <button
        type="button"
        class="group switch-state disabled-pointer-events-none relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full disabled:cursor-default disabled:opacity-50"
        aria-pressed="false"
        :style="colorStyles"
        @click="switchValue"
        :disabled="disabled"
      >
        <span class="sr-only">Use setting</span>
        <span
          aria-hidden="true"
          class="pointer-events-none absolute h-full w-full rounded-md"
        ></span>
        <span
          aria-hidden="true"
          class="switch-state pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out"
          :style="colorStyles"
        ></span>
        <span
          aria-hidden="true"
          :class="{ 'translate-x-5': isToggle, 'translate-x-0': !isToggle }"
          class="pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white ring-0 transition-transform duration-200 ease-in-out"
        ></span>
      </button>
      <span
        class="ml-2 flex flex-col"
        :id="id"
        v-if="direction == 'right'"
        @click="switchValue"
      >
        <span v-if="label" :class="classes" class="text-gray-900">{{
          label
        }}</span>
        <span v-if="description" class="text-sm text-gray-500">{{
          description
        }}</span>
      </span>
    </div>
    <!-- large toggle -->
    <div
      v-else
      :class="[
        label == '' ? 'items-center' : 'items-start',
        disabled ? 'pointer-events-none cursor-default' : 'cursor-pointer',
      ]"
      class="flex cursor-pointer justify-between"
    >
      <span
        class="mr-2 flex flex-grow flex-col"
        :id="id"
        v-if="direction == 'left'"
        @click="switchValue"
      >
        <span v-if="label" :class="classes" class="text-gray-900">{{
          label
        }}</span>
        <span v-if="description" class="text-sm text-gray-500">{{
          description
        }}</span>
      </span>
      <button
        type="button"
        aria-pressed="false"
        :class="{
          'cursor-default': disabled,
          'cursor-pointer': !disabled,
        }"
        class="switch-state relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-50"
        :style="colorStyles"
        @click.stop="switchValue"
        :disabled="disabled"
      >
        <span class="sr-only">Use setting</span>
        <span
          aria-hidden="true"
          :class="{
            'translate-x-5': isToggle == 1,
            'translate-x-0': isToggle == 0,
          }"
          class="inline-block h-5 w-5 transform rounded-full bg-white ring-0 transition duration-200 ease-in-out"
        ></span>
      </button>
      <span
        class="ml-2 flex flex-col disabled:opacity-50"
        :id="id"
        v-if="direction == 'right'"
      >
        <span v-if="label" :class="classes" class="text-gray-900">{{
          label
        }}</span>
        <span v-if="description" class="text-sm text-gray-500">{{
          description
        }}</span>
      </span>
    </div>
  </div>
</template>

<script>
import { COLOR_CONFIG } from "../../colorConfig";

export default {
  name: "CSwitch",
  components: {},
  props: {
    label: {
      type: String,
    },
    id: {
      type: String,
    },
    description: {
      type: String,
    },
    returnToggleValue: {
      type: Function,
    },
    classes: {
      type: String,
    },
    value: { type: Number },
    size: {
      type: String,
    },
    direction: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    preferredColor: {
      type: String,
      default: "indigo",
    },
  },
  data() {
    return {
      isToggle: this.value,
    };
  },
  methods: {
    switchValue() {
      if (!this.disabled) {
        this.isToggle = this.isToggle === 1 ? 0 : 1;
        this.$emit("returnToggleValue", this.isToggle);
      }
    },
  },
  watch: {
    value() {
      this.isToggle = this.value;
    },
  },
  computed: {
    colorStyles() {
      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
      const isOn = this.isToggle === 1 || this.isToggle === true;
      return {
        "--switch-enabled-color": isOn ? colors.shade600 : "#e5e7eb", // gray-200 when off
        "--switch-focus-color": colors.shade500,
      };
    },
  },
};
</script>

<style scoped>
.switch-state {
  background-color: var(--switch-enabled-color) !important;
}
.switch-state:focus {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--switch-focus-color) !important;
}
</style>
