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


import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { MarketProduct_item } from 'esoftplay/cache/market/product_item/import';
import { MarketSection } from 'esoftplay/cache/market/section/import';

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

export interface MarketProduct_detail_relatedProps {
  url: string,
  width: number
}

export default function m(props: MarketProduct_detail_relatedProps): any {
  const [total, setTotal] = useSafeState(0)
  const [upData, setUpData] = useSafeState<any>()

  useEffect(() => {
    new LibCurl(props.url, null,
      (res, msg) => {
        setTotal(res.total)
      }, (error) => {

      }, 1)
  }, [])

  function renderItems(item: any, i: number) {
    return (
      <MarketProduct_item {...item} width={props.width} onChangeWish={(wish) => setUpData((x: any) => LibObject.set(x, wish)(i, 'wishlist'))} />
    )
  }

  if (total == 0) {
    return null
  }

  return (
    <View>
      <MarketSection text={esp.lang("market/product_detail_related", "related")} textColor="#000" />
      <LibInfinite
        url={props.url}
        horizontal
        keyExtractor={(item, i) => i.toString()}
        onDataChange={(data: any, page: number) => { setUpData(data) }}
        injectData={upData}
        style={{ marginLeft: 25, marginTop: 10 }}
        renderItem={renderItems}
      />
      <View style={{ height: 8, flex: 1, backgroundColor: '#F5F5F5' }} />
    </View>
  )
}