<template>
  <FormWrapper class="space-radio" v-bind="formProps">
    <ul>
      <li v-for="(choice, index) in props.choices" :key="index">
        <input
          @input="changeEvent(index)"
          type="radio"
          :name="props.radioId"
          :id="props.radioId + '-' + index"
          :value="choice.value"
          :checked="
            choice.value === props.value || choice.value === props.modelValue
          "
          :disabled="disabled"
        />
        <label :for="props.radioId + '-' + index">
          <div class="icon medium">
            <SpIcon
              v-if="
                choice.value === props.value ||
                choice.value === props.modelValue
              "
              name="radiobuttonChecked"
            />

            <SpIcon v-else name="radiobuttonUnchecked" />
          </div>
          <p class="h700">{{ choice.title }}</p>
        </label>
      </li>
    </ul>
  </FormWrapper>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import FormMixin from "@/mixins/FormMixin";
export default defineComponent({
  mixins: [FormMixin],
  props: {
    radioId: {
      type: String,
      required: true,
      default: "",
    },
    choices: {
      required: true,
      type: Array,
      default: [],
    },
    modelValue: {
      default: "",
    },
  },
  setup(props: any, { emit }) {
    const changeEvent = (index: number): void => {
      emit("update:modelValue", props.choices[index].value);
    };

    return {
      changeEvent,
      props,
    };
  },
});
</script>

<style lang="scss">
.space-radio {
  ul {
    display: flex;
    padding-top: var(--form-label-margin);

    li {
      &:not(:last-child) {
        margin-right: 24px;
      }

      input {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        margin: 0;
        cursor: none;

        &:checked + label {
          color: var(--radio-color);

          .icon svg path {
            fill: var(--radio-color);
          }
        }
      }

      label {
        display: flex;
        align-items: center;
        cursor: pointer;
        white-space: nowrap;
        color: var(--grey-1);
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

        .icon {
          margin-right: 8px;
        }
      }
    }
  }

  &.disabled {
    ul {
      li {
        label {
          pointer-events: var(--pointer-events);
        }
      }
    }
  }

  // @include desktop-768max() {
  //   &.mobile-vertical {
  //     ul {
  //       flex-direction: column;

  //       li {
  //         &:not(:last-child) {
  //           margin-right: 0;
  //           margin-bottom: 8px;
  //         }
  //       }
  //     }
  //   }
  // }
}
</style>
