// withHooks


import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventRating } from 'esoftplay/cache/event/rating/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import React, { useEffect } from 'react';
import { ScrollView, Text, View } from 'react-native';


export interface EventReview_detailArgs {

}
export interface EventReview_detailProps {

}
export default function m(props: EventReview_detailProps): any {
  const { url }: any = LibNavigation.getArgsAll(props)

  const [result, setResult] = useSafeState<any>()

  useEffect(() => {
    loadData()
  }, [])

  function loadData() {
    new LibCurl(url, null, (res, msg) => {
      setResult(res)
    }, (err) => {
      LibDialog.warning(esp.lang("event/review_detail", "oops"), err.message)
      LibNavigation.back()
    })
  }

  if (!result) {
    return <LibLoading />
  }

  return (
    <View style={{ flex: 1 }}>
      <EventHeader title={esp.lang("event/review_detail", "header_title")} />
      <ScrollView>
        <View style={{ margin: 10, padding: 10, borderWidth: 1, borderColor: '#c9c9c9', borderRadius: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
          <LibPicture source={{ uri: result?.event?.image }} style={{ height: 50, width: 50, borderRadius: 10 }} />
          <View style={{ marginLeft: 10, flex: 1 }}>
            <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: 'bold' }} numberOfLines={2} ellipsizeMode='tail'>{result?.event?.name}</Text>
          </View>
        </View>
        <View style={{ marginLeft: 10, marginTop: 5, flexDirection: 'row', marginVertical: 3, alignContent: 'center', alignItems: 'center' }}>
          <EventRating disabled onChangeRating={() => { }} defaultValue={result?.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(result?.review?.created).localeFormat("D MMM YYYY")}</Text>
        </View>

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

      </ScrollView>
    </View>
  )
}