// withHooks

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTheme } from 'esoftplay/cache/lib/theme/import';
import useSafeState from 'esoftplay/state';
import React from 'react';
import { TouchableOpacity, View } from 'react-native';


export interface EventRatingArgs {
  
}
export interface EventRatingProps {
  onChangeRating: (rate: number) => void,
  disabled?: boolean,
  defaultValue?: number,
  size?: number,
  containerStyle?: any 
}
export default function m(props: EventRatingProps): any {
  const { disabled, defaultValue, size, containerStyle } = props
  const [rate, setRate] = useSafeState<any>(defaultValue ? defaultValue - 1 : '')

  let rating = []
  for (let i = 0; i < 5; i++) {
    rating.push(i <= rate ?
      <TouchableOpacity activeOpacity={1} disabled={disabled} key={i.toString()} onPress={() => {
        setRate(i)
        props.onChangeRating(i + 1)
      }} >
        <LibIcon size={size ? size : 30} name='star' color={LibStyle.colorPrimary} />
      </TouchableOpacity>
      :
      <TouchableOpacity activeOpacity={1} disabled={disabled} key={i.toString()} onPress={() => {
        setRate(i)
        props.onChangeRating(i + 1)
      }} >
        <LibIcon size={size ? size : 30} name='star-outline' color={LibStyle.colorPrimary} />
      </TouchableOpacity>
    )
  }

  return (
    <View style={{ flexDirection: 'row', justifyContent: 'center', alignContent: 'center', alignItems: 'center', padding: 10, borderRadius: 2, backgroundColor: LibTheme._colorBackgroundCardPrimary(), ...containerStyle }} >
      {rating}
    </View>
  )
}