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

import { LibFocus } from 'esoftplay/cache/lib/focus/import';
import { LibList } from 'esoftplay/cache/lib/list/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 { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketDisplay_item } from 'esoftplay/cache/market/display_item/import';
import { MarketMerchant_labelProperty } from 'esoftplay/cache/market/merchant_label/import';
import { UserClass } from 'esoftplay/cache/user/class/import';

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


export interface MarketDisplayArgs {

}
export interface MarketDisplayProps {
  onPressOption: (item: any) => void,
  merchant: any
}
export default function m(props: MarketDisplayProps): any {
  const user = UserClass.state().get()
  const data = MarketMerchant_labelProperty.state().useSelector(t => t)

  useEffect(() => {
    MarketMerchant_labelProperty.list()
  }, [])

  if (!MarketMerchant_labelProperty.state().get()) {
    return <LibLoading />
  }

  return (
    <View style={{ flex: 1 }} >
      <LibFocus onFocus={() => MarketMerchant_labelProperty.list()} />
      <LibList
        data={data}
        extraData={data}
        renderItem={(item: any, i: number) => {
          return (
            <MarketDisplay_item {...item} key={i} onPressOptions={() => {
              props.onPressOption(item)
            }} />
          )
        }}
        ListEmptyComponent={
          <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 60 }} >
            <LibPicture source={esp.assets('market/ic_etalase_empty.png')} style={{ width: 150, height: 150 }} resizeMode={'contain'} />
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, textAlign: "center", color: "#03192a" }} >{esp.lang("market/display", "display_empty")}</Text>
            {
              (user?.merchant_id == props?.merchant?.id) &&
              <MarketButton onPress={() => { LibNavigation.navigate('market/merchant_label_add') }} text={esp.lang("market/display", "add_display")} textStyle={{ color: "white", fontSize: 12, fontWeight: 'bold' }} buttonStyle={{ borderRadius: 20, marginHorizontal: 55, marginVertical: 10 }} />
            }
          </View>
        }
        ListFooterComponent={
          <View style={{ marginTop: 15 }} />
        }
      />
    </View>
  )
}