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


import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketAds_store_preview } from 'esoftplay/cache/market/ads_store_preview/import';
import { MarketDevice_type } from 'esoftplay/cache/market/device_type/import';
import { MarketEmpty_product } from 'esoftplay/cache/market/empty_product/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketProduct_item } from 'esoftplay/cache/market/product_item/import';

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


export interface MarketProduct_listArgs {
  title?: string,
  url: string
}
export interface MarketProduct_listProps {

}
export default function m(props: MarketProduct_listProps): any {
  const { title, url } = LibNavigation.getArgsAll<any>(props)

  const dimension = useMemo(() => MarketDevice_type(2, 4, 5), [])
  const imgDimension = useMemo(() => (LibStyle.width - ((dimension + 1) * 10)) / dimension, [])
  const [upData, setUpData] = useSafeState<any>()
  const [adsToko, setAdsToko] = useSafeState<any>()

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

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader title={title || esp.lang("market/product_list", "header_title")}
        leftIcon={{ name: "arrow-left", onPress: () => LibNavigation.back() }}
        rightView={() => (
          <TouchableOpacity onPress={() => {
            LibNavigation.navigateForResult('market/product_search').then((t) => {
              LibNavigation.push('market/product_list_search', { url: url, keyword: t })
            })
          }} style={{ height: 50, justifyContent: 'center', paddingRight: 17 }} >
            <LibIcon name="magnify" />
          </TouchableOpacity>
        )} />
      <LibInfinite
        isDebug={1}
        url={url}
        style={{ marginHorizontal: 5, paddingTop: 10 }}
        initialNumToRender={4}
        keyExtractor={(item, i) => i.toString()}
        onDataChange={(data: any, page: number) => { setUpData(data) }}
        injectData={upData}
        numColumns={dimension}
        onResponseEdit={(res: any) => {
          setAdsToko(res.ads_merchant)
          return res
        }}
        ListHeaderComponent={
          LibUtils.checkUndefined(adsToko, 'list.0') &&
          <MarketAds_store_preview description={adsToko.description} merchant={{ id: adsToko.merchant_id, image: adsToko.merchant_image, title: adsToko.merchant_name, url: adsToko.merchant_url }} products={adsToko?.list} />
        }
        LoadingView={
          <LibSkeleton backgroundStyle={{ height: LibStyle.height }}>
            <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', marginLeft: 10 }} >
              {
                [1, 1, 1, 1].map((item: any, i: number) => (
                  <View key={i} style={{ width: imgDimension, borderWidth: 1, marginRight: 10, marginBottom: 10, borderRadius: 10, overflow: 'hidden' }}>
                    <View style={{ width: imgDimension, height: imgDimension, backgroundColor: 'white' }} />
                    <View style={{ width: '60%', height: 15, borderRadius: 7.5, backgroundColor: 'white', margin: 10 }} />
                    <View style={{ width: '50%', height: 20, borderRadius: 10, backgroundColor: 'white', margin: 10, marginTop: 5, marginBottom: 0 }} />
                    <LibIcon name="heart" style={{ marginHorizontal: 10, marginBottom: 10, alignSelf: 'flex-end' }} />
                  </View>
                ))
              }
            </View>
          </LibSkeleton>
        }
        errorView={(eror: string) => {
          if (eror) {
            return (
              <MarketEmpty_product message={eror} />
            )
          }
        }}
        renderItem={renderItems}
      />
    </View>
  )
}