<template>
  <div
    class="l-radio-container"
    :class="containerClass"
    @click="disabled ? null : $emit('input', optionValue)"
  >
    <div class="l-radio-heading">
      <slot name="heading" />
    </div>
    <div class="l-radio-input">
      <input
        :id="inputId"
        ref="input"
        type="radio"
        :name="name"
        :checked="checked"
        :disabled="disabled"
        :value="value"
        :aria-labelledby="ariaLabelledby"
        :aria-label="ariaLabel"
        @focus="onFocus"
        @blur="onBlur"
      >
    </div>
    <div class="l-radio-main">
      <div
        ref="box"
        class="l-radio-box"
      >
        <div
          class="l-radio-icon"
          :class="[
            'l-radio-icon',
            {
              'l-radio-icon--highlight': checked,
              'l-radio-icon--disabled': disabled,
              'l-radio-icon--focus': focused,
            },
          ]"
        >
          <div class="l-radio-icon-inner" />
        </div>
        <div class="l-radio-content">
          <slot name="content">
            <span class="l-radio-label">{{ label }}</span>
            <span
              v-if="description"
              class="l-radio-desc"
            >{{ description }}</span>
          </slot>
        </div>
      </div>
      <div class="l-radio-add">
        <slot />
      </div>
    </div>
    <div class="l-radio-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
export default {
  name: "RadioButton",
  emits: ["input", "focus", "blur"],
  props: {
    /**
     * value (used with v-model)
     */
    value: {},
    /**
     * value of the radio button
     */
    optionValue: {},
    /**
     * name of the radio button
     */
    name: {
      type: String,
      default: null,
    },
    /**
     * label of the radio button
     */
    label: {
      type: String,
      default: null,
    },
    /**
     * description of the radio button
     */
    description: {
      type: String,
      default: null,
    },
    /**
     * disable the radio button
     */
    disabled: {
      type: Boolean,
      default: false,
    },
    /**
     * input id
     */
    inputId: {
      type: String,
      default: null,
    },
    /**
     * expanded style will add spacing and a border to the radio button
     */
    expanded: {
      type: Boolean,
      default: false,
    },
    "aria-labelledby": {
      type: String,
      default: null,
    },
    "aria-label": {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      focused: false,
    };
  },
  computed: {
    checked() {
      return (
          this.optionValue != null &&
          this.value != null &&
          this.optionValue === this.value
      );
    },
    containerClass() {
      return [
        "l-radio l-component",
        {
          "l-radio-container--checked": this.checked,
          "l-radio-container--disabled": this.disabled,
          "l-radio-container--focused": this.focused,
          "l-radio-container--expanded": this.expanded,
        },
      ];
    },
  },
  methods: {
    onFocus(event) {
      this.focused = true;
      this.$emit("focus", event);
    },
    onBlur(event) {
      this.focused = false;
      this.$emit("blur", event);
    },
  },
};
</script>
<style>
.l-radio-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.l-radio-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.l-radio-input {
  display: none;
}
.l-radio {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
  vertical-align: bottom;
}
.l-radio-box {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-2-5);
}
.l-radio-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.l-radio-footer {
  width: 100%;
}
.l-radio-label {
  font-size: var(--sizing-base);
  color: var(--neutral-700);
}
.l-radio-desc {
  font-size: var(--sizing-xs);
  color: var(--neutral-400);
}

.l-radio-container--disabled {
  cursor: not-allowed;
}

.l-radio-container--expanded {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2) var(--spacing-4);
  transition: all var(--duration-300) ease-in-out;
}
.l-radio-container--expanded.l-radio-container--checked {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-base);
}

.l-radio-icon {
  width: var(--spacing-4);
  min-width: var(--spacing-4);
  height: var(--spacing-4);
  min-height: var(--spacing-4);
  background-color: transparent;
  border: 1px solid var(--neutral-300);
  margin-top: var(--spacing-0-5);
  border-radius: var(--radius-full);
  transform: translateY(var(--spacing-px));
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all var(--duration-300) ease-in-out;
}
.l-radio-icon-inner {
  width: var(--spacing-2);
  height: var(--spacing-2);
  background-color: var(--primary-500);
  border-radius: var(--radius-full);
  transition: all var(--duration-300) var(--ease-squish-3);
  opacity: 0;
  transform: scale(0);
}

.l-radio-container:not(.l-radio-container--disabled):hover .l-radio-icon {
  background-color: var(--primary-200);
  border-color: var(--primary-500);
}
.l-radio-icon--disabled {
  border-color: var(--neutral-200);
}
.l-radio-icon--highlight {
  background-color: var(--primary-200);
  border-color: var(--primary-500);
}
.l-radio-icon--highlight .l-radio-icon-inner {
  opacity: 1;
  transform: scale(1);
}
.l-radio-heading{
  position: absolute;
}
</style>
