// withHooks
// noPage
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';


import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibList } from 'esoftplay/cache/lib/list/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketProduct_detail_container } from 'esoftplay/cache/market/product_detail_container/import';
import { MarketProduct_reviewArgs } from 'esoftplay/cache/market/product_review/import';
import { MarketProduct_review_item } from 'esoftplay/cache/market/product_review_item/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketProduct_detail_reviewProps {
  data: any,
  url: string
}

export default function m(props: MarketProduct_detail_reviewProps): any {
  const [data, setData] = useSafeState<any>()
  const limit = 4

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

  function getReview() {
    new LibCurl(props.url + "?limit=" + limit, null,
      (res) => {
        setData(res)
      }, (msg) => {
        esp.log(msg);
      }, 1
    )
  }

  return (
    <MarketProduct_detail_container>
      {
        LibUtils.checkUndefined(data, "list.0") &&
        <>
          <MarketSection_menu title={esp.lang("market/product_detail_review", "rating")} />
          <View style={{ paddingHorizontal: 17, paddingVertical: 10, flexDirection: 'row', alignItems: 'flex-end' }} >
            <LibIcon name="star" color="gold" size={18} />
            <LibTextstyle text={props?.data?.rating_value} textStyle="caption1" style={{ marginLeft: 5 }} />
            <LibTextstyle textStyle="caption1" text={'/5'} />
            <View style={{ flex: 1 }} ></View>
            {
              Number(data.total) > limit &&
              <TouchableOpacity style={{ flexDirection: "row", alignItems: 'center' }} onPress={() => { LibNavigation.navigate<MarketProduct_reviewArgs>("market/product_review", { url: props.url, data: props.data }) }} >
                <LibTextstyle text={esp.lang("market/product_detail_review", "show_all")} textStyle="caption1" style={{ marginRight: 5 }} />
                <LibIcon.SimpleLineIcons name="arrow-right" color={MarketStyle.colorPrimaryMarket} size={16} />
              </TouchableOpacity>
            }
          </View>
        </>
      }
      <MarketSection_menu size="line" />
      <LibList
        data={data?.list}
        renderItem={(item: any, i: number) => (
          <MarketProduct_review_item key={i} {...item} />
        )}
      />
    </MarketProduct_detail_container>
  )
}