import { ref, computed, defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'StarRating',

  props: {
    modelValue: {
      type: Number,
      default: 0
    },
    readonly: {
      type: Boolean,
      default: false
    },
    size: {
      type: String as PropType<'small' | 'medium' | 'large'>,
      default: 'medium'
    },
    showLabel: {
      type: Boolean,
      default: false
    },
    showValue: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: 'amber'
    }
  },

  emits: ['update:modelValue', 'change'],

  setup(props, { emit }) {
    const hoverValue = ref(0);

    const displayValue = computed(() => {
      if (!props.readonly && hoverValue.value > 0) {
        return hoverValue.value;
      }
      return props.modelValue;
    });

    const starSize = computed(() => {
      switch (props.size) {
        case 'small': return '16px';
        case 'large': return '32px';
        default: return '24px';
      }
    });

    const displayLabel = computed(() => {
      const value = displayValue.value;
      if (value >= 4.5) return 'Eccellente';
      if (value >= 4) return 'Ottimo';
      if (value >= 3.5) return 'Molto buono';
      if (value >= 3) return 'Buono';
      if (value >= 2) return 'Sufficiente';
      if (value >= 1) return 'Scarso';
      return 'Non valutato';
    });

    const getStarIcon = (star: number): string => {
      const value = displayValue.value;
      if (star <= Math.floor(value)) {
        return 'star';
      } else if (star === Math.ceil(value) && value % 1 >= 0.5) {
        return 'star_half';
      }
      return 'star_outline';
    };

    const getStarColor = (star: number): string => {
      const value = displayValue.value;
      if (star <= value) {
        return props.color;
      }
      return 'grey-4';
    };

    const setValue = (star: number) => {
      if (props.readonly) return;
      emit('update:modelValue', star);
      emit('change', star);
    };

    const setHover = (star: number) => {
      if (props.readonly) return;
      hoverValue.value = star;
    };

    const clearHover = () => {
      hoverValue.value = 0;
    };

    return {
      hoverValue,
      displayValue,
      starSize,
      displayLabel,
      getStarIcon,
      getStarColor,
      setValue,
      setHover,
      clearHover
    };
  }
});