// withHooks

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import useSafeState from 'esoftplay/state';
import React, { useCallback, useMemo } from 'react';
import { View } from 'react-native';


export interface EventRating_miniArgs {

}
export interface EventRating_miniProps {
  rating: string,
  containerStyle?: any,
  starSize?: number,
  starStyle?: any
}
export default function m(props: EventRating_miniProps): any {
  const [value, setValue] = useSafeState<any>([])
  const renderStar = useCallback((name: any, i: number) => <LibIcon key={i} name={name} size={props.starSize || 12} style={{ ...props.starStyle }} color="gold" />, [])
  useMemo(() => {
    const ratingCount = props.rating?.split(',').map((item) => parseInt(item)).reduce((acc, curr) => acc + curr)
    const ratingValue = props.rating?.split(',').map((item) => parseInt(item)).reduce((acc, curr, index) => acc + (curr * (index + 1)))
    const value = (ratingValue / ratingCount).toFixed(1)
    const all = [1, 2, 3, 4, 5].map((x) => x <= Number(value) ? "star" : x - 0.9 <= Number(value) ? "star-half" : "star-outline")
    setValue(all)
  }, [props.rating])

  return (
    <View style={{ flexDirection: "row", ...props.containerStyle }} >
      {value.map(renderStar)}
    </View>
  )

}