<template>
  <div
    class="l-switch-container"
    :style="{
      '--switch-bg': switchBG,
      '--switch-radius': switchRadius,
      '--switch-button-hover': hoverColor,
      '--switch-font-size': switchfontSize,
    }"
  >
    <div class="l-switch-inner-container">
      <div
        class="l-switch"
        
        :defaultValue="defaultValue"
      >
        <template v-if="buttons.length">
          <l-button
            v-for="(button, index) in buttons"
            :key="index"
            :button-id="button.id"
            :disabled="disabled"
            :label="button.label"
            :value="button.value"
            :pill="rounded"
            :type="button.value === selectedValue ? active : background"
            :shade="button.value === selectedValue ? activeShade : backgroundShade"
            :size="size"
            class="l-switch--button"
            :class="{
              'l-switch--button--active': button.value === selectedValue,
            }"
            @click="selectButton(button.value)"
          />
        </template>
        <slot v-else />
      </div>
      <div class="l-switch-label">
        {{ label }}
      </div>
    </div>
    <span
      v-if="note"
      :id="switchNoteId"
      class="l-switch-note"
    >{{ note }}</span>
  </div>
</template>

<script>
import LButton from "../atoms/LButton.vue";

export default {
  name: "LSwitch",
  components: {
    LButton,
  },
  props: {
    /**
     * Array of objects the switch will loop through
     */
    buttons: {
      type: Array,
    },
    /**
     * Array of objects the switch will loop through
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * The default selected value of the switch
     */
    defaultValue: {
      type: [Boolean, String, Number],
    },
    /**
     * The label of the switch field.
     */
    label: {
      type: String,
      default: "",
    },
    /**
     * The note of the switch field, it could be a hint, error or success message.
     */
    note: {
      type: String,
      default: "",
    },
    /**
     * The background color of the component and inactive buttons
     */
    background: {
      type: String,
      default: "neutral",
      validator: function (value) {
        return (
          [
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The shade of the background
     */
    backgroundShade: {
      type: [String, Number],
      default: "50",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
            50,
            100,
            200,
            300,
            400,
            500,
            600,
            700,
            800,
            900,
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The color of the active button
     */
    active: {
      type: String,
      default: "neutral",
      validator: function (value) {
        return (
          [
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The shade of the active button
     */
    activeShade: {
      type: [String, Number],
      default: "400",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
            50,
            100,
            200,
            300,
            400,
            500,
            600,
            700,
            800,
            900,
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The size of the switch buttons
     */
    size: {
      type: String,
      default: "large",
      validator: function (value) {
        return ["small", "medium", "large"].indexOf(value) !== -1;
      },
    },
    /**
     * Add full radius to the component and buttons
     */
    rounded: {
      type: Boolean,
      default: false,
    },
     /**
     * ID used to identify the switch note, useful for testing or tracking purposes
     */
    switchNoteId: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      selectedValue: null,
    };
  },
  computed: {
    switchBG() {
      if (this.background === "white" || this.background === "black") {
        return `var(--${this.background})`;
      }
      return `var(--${this.background}-${this.backgroundShade})`;
    },
    hoverColor() {
      if (this.active === "white" || this.active === "black") {
        return `var(--${this.active})`;
      }
      return `var(--${this.active}-${this.activeShade})`;
    },
    switchRadius() {
      if (this.rounded) {
        return "var(--radius-full)";
      }
      return "var(--radius-lg)";
    },
    switchfontSize() {
      if (this.size === "small") {
        return "var(--sizing-xs)";
      } else if (this.size === "medium") {
        return "var(--sizing-sm)";
      }
      return "var(--sizing-base)";
    },
  },
  watch: {
    "$attrs.value"() {
      this.selectedValue = this.$attrs.value
    },
    "selectedValue"() {
      if (this.selectedValue !== this.$attrs.value) {
        this.selectedValue = this.$attrs.value
      }
    }
  },
  created() {
    if (this.defaultValue != null || this.defaultValue != undefined) {
      this.selectedValue = this.defaultValue;
    }
  },
  methods: {
    selectButton(buttonValue) {
      this.selectedValue = buttonValue;
      this.$emit("input", buttonValue);
    },
  }
}
</script>

<style scoped>
.l-switch-container {
  display: flex;
  flex-direction: column;
}
.l-switch-inner-container {
  display: flex; 
  gap: var(--spacing-6); 
  align-items: center;
}
.l-switch {
  display: flex;
  padding: var(--spacing-1-5) var(--spacing-3);
  gap: var(--spacing-1);
  border-radius: var(--switch-radius);
  background: var(--switch-bg);
  width: fit-content;
}
.l-switch-label {
  font-size: var(--switch-font-size);
}
.l-switch-note {
  font-size: var(--sizing-xs);
  color: var(--danger-700);
  padding: 0 var(--spacing-2);
  padding-top: var(--spacing-1);
  opacity: 0.75;
}
.l-switch--button.l-button-size--tiny {
  border-radius: var(--radius-base);
}
.l-switch--button.l-button {
  /* border-radius: var(--radius-md); */
  --button-hover: var(--switch-button-hover) !important;
}
.l-switch .l-button-size--large {
  font-size: var(--switch-font-size);
  padding: var(--spacing-0-5) var(--spacing-3);
  border-radius: var(--switch-radius);
}
.l-switch .l-button {
  font-size: var(--switch-font-size);
  padding: 0 var(--spacing-3);
  border-radius: var(--switch-radius);
  font-weight: 400;
}
.l-switch--button--active {
  box-shadow: var(--shadow-lg);
  font-weight: 600 !important;
}
.l-switch--button:focus {
  outline-color: var(--switch-button-hover);
}
</style>
