// withHooks

import { EventRating } from 'esoftplay/cache/event/rating/import';
import { EventRating_mini } from 'esoftplay/cache/event/rating_mini/import';
import { LibGradient } from 'esoftplay/cache/lib/gradient/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import React from 'react';
import { Pressable, Text, View } from 'react-native';


export interface EventReview_itemArgs {

}
export interface EventReview_itemProps {
  id: string;
  booking_code: string;
  event_id: string;
  event_name: string;
  price_id: string;
  price_name: string;
  ondate: string;
  qty: string;
  qty_shared: string;
  total: string;
  currency: string;
  status: string;
  review_status: any;
  created: string;
  image: string;
  url: string;
  review: any;

  onPress: () => void
}


export default function m(props: EventReview_itemProps): any {
 
  return (
    <View>
      {
        props.review == null ?
          <Pressable onPress={() => {
            props.onPress()
          }} style={{ backgroundColor: '#fff', marginBottom: 10 }}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', overflow: 'hidden' }} >
              <LibPicture style={{ height: 70, width: 16 / 9 * 50 }} source={{ uri: props.image }} />
              <LibGradient colors={['#fff', "rgba(255,255,255,0)"]} direction='right-to-left' style={{ height: 70, width: 16 / 9 * 50, borderRadius: 0, position: 'absolute' }} >

              </LibGradient>
              <View style={{ flex: 1, paddingVertical: 16, marginLeft: -10 / 9 * 20 + 16 }} >
                <Text allowFontScaling={false} style={{ fontSize: 12, color: '#c9c9c9' }} numberOfLines={1} ellipsizeMode='tail'>{props.booking_code}</Text>
                <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: 'bold' }} numberOfLines={1} ellipsizeMode='tail'>{props.event_name}</Text>
                <EventRating_mini rating='0,0,0,0,5' starStyle={{ color: "#c9c9c9" }} starSize={25} />
              </View>
            </View>
          </Pressable>
          :
          <Pressable onPress={() => {
            props.onPress()
          }} style={{ padding: 15, marginBottom: 10, backgroundColor: '#fff' }}>
            <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: 'bold' }} numberOfLines={2} ellipsizeMode='tail'>{props.event_name}</Text>

            <View style={{ flexDirection: 'row', marginVertical: 3, alignContent: 'center', alignItems: 'center' }}>
              <EventRating disabled onChangeRating={() => { }} defaultValue={props?.review?.rating} size={16} containerStyle={{ padding: 0 }} />
              <View style={{ marginHorizontal: 5, height: 3, width: 3, borderRadius: 1.5, backgroundColor: "#b8a898" }} />
              <Text allowFontScaling={false} style={{ marginLeft: 7, fontSize: 12, color: '#c9c9c9' }}>{LibUtils.moment(props.review?.created).localeFormat("D MMM YYYY")}</Text>
            </View>

            <Text allowFontScaling={false} style={{ marginTop: 10, fontSize: 12, color: props.review?.content != "" ? '#000' : '#c9c9c9' }}>{props.review?.content != "" ? props?.review?.content : "Tidak ada ulasan"}</Text>
          </Pressable>
      }
    </View>
  )
}