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


import { LibBlock } from 'esoftplay/cache/lib/block/import';
import { LibFocus } from 'esoftplay/cache/lib/focus/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketMerchant_label_productArgs } from 'esoftplay/cache/market/merchant_label_product/import';

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


export interface MarketDisplay_itemArgs {

}
export interface MarketDisplay_itemProps {
  id: string,
  image: string,
  title: string,
  total: number,
  onPressOptions: () => void,
  merchant: any
}
export default function m(props: MarketDisplay_itemProps): any {
  const itemWidth = (LibStyle.width - 80) / 3
  const [counter, setCounter] = useSafeState(0)

  return (
    <>
      <LibFocus onFocus={() => setCounter(counter + 1)} />
      <View style={[{ marginTop: 10, padding: 10, backgroundColor: "white", marginHorizontal: 15, borderRadius: 5 }, LibStyle.elevation(2)]} >
        <View style={{ flexDirection: "row", alignItems: 'center' }} >
          <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#03192a" }} >{props.title}</Text>
          <TouchableOpacity onPress={() => { props.onPressOptions() }} >
            <LibIcon name='dots-vertical' />
          </TouchableOpacity>
        </View>
        <View style={{ flexDirection: "row" }} >
          <LibBlock
            key={counter}
            url={"shop/merchant_label_product/" + props.id + "?limit=3"}
            render={(row) => {
              return (
                <View style={{ flexDirection: "row", paddingVertical: 10 }} >
                  {
                    row.list.map((item2: any, i2: number) => {
                      if (i2 < 2) {
                        return (
                          <LibPicture
                            key={i2}
                            source={{ uri: item2.image }}
                            style={{ width: itemWidth, height: itemWidth, borderRadius: 5, marginRight: 15, backgroundColor: '#d1d1d1' }}
                          />
                        )
                      } else if (i2 == 2) {
                        return (
                          <TouchableOpacity key={i2} onPress={() => LibNavigation.navigate<MarketMerchant_label_productArgs>('market/merchant_label_product', { id: props.id, image: props.image, title: props.title, total: props.total })} style={{ alignItems: "center", justifyContent: "center", width: itemWidth, height: itemWidth, borderRadius: 5, marginRight: 10 }} >
                            <ImageBackground source={{ uri: item2.image }} style={{ height: itemWidth, width: itemWidth, alignItems: 'center', justifyContent: 'center' }} imageStyle={{ borderRadius: 5 }} >
                              <View style={{ height: itemWidth, width: itemWidth, alignItems: 'center', justifyContent: 'center', borderRadius: 5, backgroundColor: LibUtils.hexToRgba('#000', 0.3) }} >
                                <Text allowFontScaling={false} style={{ fontSize: 12, marginHorizontal: 15, textAlign: 'center', textAlignVertical: 'center', color: 'white' }} >{esp.lang("market/display_item", "show_all")}</Text>
                              </View>
                            </ImageBackground>
                          </TouchableOpacity>
                        )
                      } else {
                        return null
                      }
                    }
                    )
                  }
                </View>
              )
            }}
            ErrorView={(x) => {
              return (
                <View style={{ height: itemWidth, justifyContent: 'center' }} >
                  <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14 }} >{x}</Text>
                </View>
              )
            }}
          />
        </View>
      </View>
    </>
  )
}