// withHooks
// noPage
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import useSafeState from 'esoftplay/state';

import React, { useCallback, useEffect } from 'react';
import { TouchableOpacity, View } from 'react-native';

export interface MarketRating_inputProps {
  style?: any,
  onChangeRating: (rating: number) => void
  starSize?: number
  onPress?: (rating: number) => void
  defValue?: number
}
export default function m(props: MarketRating_inputProps): any {
  const ar = [0, 0, 0, 0, 0]
  const def = props && props.defValue || ''

  for (let index = 0; index < def; index++) {
    ar.splice(index, 1, 1)
  }

  const [allStar, setAllStar] = useSafeState(ar)
  const [rating, setRating] = useSafeState(props.defValue || 0)
  const renderStar = useCallback((name: any, index: number) => (
    <TouchableOpacity key={index} onPress={() => { setAllStar(allStar.map((x, i) => i <= index ? 1 : 0)); setRating(index + 1); props.onPress && props.onPress(index + 1) }} >
      <LibIcon name={name ? 'star' : 'star-outline'} size={props.starSize || 24} color="gold" style={{ marginRight: 1 }} />
    </TouchableOpacity>
  ), [])

  useEffect(() => {
    props.onChangeRating(rating)
  }, [rating])

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