<template>
  <div class="nv-rating">
    <NvRatingItem
      v-for="(item, idx) in length"
      :key="idx"
      class="nv-rating__item"
      :color="color"
      :customClass="customClass"
      :emptyColor="emptyColor"
      :emptyIcon="emptyIcon"
      :fullIcon="fullIcon"
      :halfIcon="halfIcon"
      :half="half"
      :hover="hover"
      :value="Math.max(0, Math.min(tmpValue - idx, 1))"
      :readonly="readonly"
      :size="size"
      @onItemHover="tmpValue = idx + $event"
      @mouseleave="setTmpValue()"
      @onItemClick="onItemClick($event, idx)"
    />
  </div>
</template>

<script>
import NvRatingItem from "./Item.vue";

export default {
  name: "NvRating",

  components: { NvRatingItem },

  props: {
    color: { type: String, default: "black" },
    customClass: { type: String, default: "" },
    emptyColor: { type: String, default: "black" },
    emptyIcon: { type: String, default: "mdi-star-outline" },
    fullIcon: { type: String, default: "mdi-star" },
    half: Boolean,
    halfIcon: { type: String, default: "mdi-star-half-full" },
    hover: Boolean,
    length: { type: Number, default: 5 },
    modelValue: { type: Number, default: 0 },
    readonly: Boolean,
    size: { type: String, default: "md" },
  },

  data: () => {
    return {
      tmpValue: 0,
    };
  },

  watch: {
    modelValue() {
      this.setTmpValue();
    },
  },

  created() {
    this.setTmpValue();
  },

  methods: {
    onItemClick($event, idx) {
      this.$emit("update:modelValue", idx + $event);
    },
    setTmpValue() {
      this.tmpValue = this.modelValue;
    },
  },
};
</script>

<style lang="scss" scoped>
.nv-rating {
  @apply flex;
}
</style>
