// withHooks
import { LibCurl } from 'esoftplay/cache/lib/curl/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 { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketCartArgs } from 'esoftplay/cache/market/cart/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketOrderArgs } from 'esoftplay/cache/market/order/import';
import { MarketProduct_listArgs } from 'esoftplay/cache/market/product_list/import';
import { NotificationItem } from 'esoftplay/cache/notification/item/import';
import { NotificationMarketplaceProperty } from 'esoftplay/cache/notification/marketplace/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';

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


export interface MarketAccount_buyerArgs {

}
export interface MarketAccount_buyerProps {

}

function Section(props: any) {
  return (
    <View style={styleId_29iAqi} >
      <Text allowFontScaling={false} style={styleId_ZSCPyb} >{props.title}</Text>
    </View>
  )
}

function Item(props: any) {
  return (
    <TouchableOpacity
      activeOpacity={1}
      onPress={() => props?.onPress?.()}
      style={styleId_7eux2} >
      <View style={styleId_ZcMJmd} >
        <Text allowFontScaling={false} style={styleId_QPzUz} >{props.title}</Text>
        <Text allowFontScaling={false} style={styleId_ZkhjnY} >{props.subtitle}</Text>
      </View>
      <LibIcon name="chevron-right" color="#d1d1d1" size={25} />
    </TouchableOpacity>
  )
}

export default function m(props: MarketAccount_buyerProps): any {
  const user = UserClass.state().useSelector(s => s)
  const [data, setData] = NotificationMarketplaceProperty.state().useState()
  const height = (LibStyle.width / 4) - 50

  const styleId_ZlOXNj: any = { height: height }

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

  function getData() {
    new LibCurl('shop/order_notification', null,
      (res, msg) => {
        setData(res)
      }, msg => {
        esp.log(msg);
      }, 1
    )
  }

  return (
    <View style={styleId_qpkod}>
      <MarketHeader title={esp.lang("market/account_buyer", "header_title")} onlyBack />
      <LibScroll style={styleId_ZcMJmd} >
        <View style={styleId_Z17Ivmk} >
          <LibPicture source={{ uri: user?.image }} style={styleId_ZXW56z} />
          <View style={styleId_Zkxxg6} >
            <LibTextstyle textStyle='footnote' text={(user?.name)} />
            <LibTextstyle textStyle='footnote' text={esp.lang("market/account_buyer", "label_member")} style={styleId_ZcFIEN} />
          </View>
        </View>
        <View style={styleId_Z25n7cO} >
          {/* {
            esp.isDebug() &&
            <TouchableOpacity activeOpacity={1} style={{ alignItems: "center" }} >
              <LibPicture source={esp.assets('market/034-store.png')} style={{ width: 25, height: 25 }} resizeMode="contain" />
              <Text allowFontScaling={false} style={{ paddingVertical: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#d1d1d1" }} >Toko Member</Text>
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }} >0 Member</Text>
            </TouchableOpacity>
          } */}
          <TouchableOpacity onPress={() => { LibNavigation.navigate('user/menu_bigbank') }} activeOpacity={1} style={styleId_1FeFsJ} >
            <LibPicture source={esp.assets('market/034-store.png')} style={styleId_1MM29v} resizeMode="contain" />
            <Text allowFontScaling={false} style={styleId_1xxnEx} >{esp.lang("market/account_buyer", "bbo_pay")}</Text>
            <Text allowFontScaling={false} style={styleId_1zhqJ9} >{LibUtils.money(user?.saldo)}</Text>
          </TouchableOpacity>
          {/* {
            esp.isDebug() &&
            <TouchableOpacity activeOpacity={1} style={{ alignItems: "center" }} >
              <LibPicture source={esp.assets('market/034-store.png')} style={{ width: 25, height: 25 }} resizeMode="contain" />
              <Text allowFontScaling={false} style={{ paddingVertical: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#d1d1d1" }} >Kupon Saya</Text>
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }} >0 Kupon</Text>
            </TouchableOpacity>
          } */}
        </View>
        {
          // esp.isDebug() && // #publish_market
          <>
            <Section title={esp.lang("market/account_buyer", "transaction")} />
            <View style={styleId_Z1AoQq1}>
              <NotificationItem badgeContainerStyle={styleId_1J3hIs} imgStyle={styleId_24uPtP} containerStyle={styleId_ZlOXNj} icon={'market/ic_notification_wait.png'} badge={data?.member?.[1]} onPress={() => { LibNavigation.navigate<MarketOrderArgs>('market/order', { status: 1 }) }} title={esp.lang("market/account_buyer", "waiting_payment")} />
              <NotificationItem badgeContainerStyle={styleId_1J3hIs} imgStyle={styleId_24uPtP} containerStyle={styleId_ZlOXNj} icon={'market/ic_notification_finish.png'} badge={data?.member?.[7]} onPress={() => { LibNavigation.navigate<MarketOrderArgs>('market/order', { status: 7 }) }} title={esp.lang("market/account_buyer", "order_done")} />
              <NotificationItem badgeContainerStyle={styleId_1J3hIs} imgStyle={styleId_24uPtP} containerStyle={styleId_ZlOXNj} icon={'market/ic_notification_complaint.png'} badge={data?.member?.[6]} onPress={() => { LibNavigation.navigate<MarketOrderArgs>('market/order', { status: 6 }) }} title={esp.lang("market/account_buyer", "complaint")} />
              <NotificationItem badgeContainerStyle={styleId_1J3hIs} imgStyle={styleId_24uPtP} containerStyle={styleId_ZlOXNj} icon={'market/ic_market_review.png'} badge={0} onPress={() => { LibNavigation.navigate('market/review_list') }} title={esp.lang("market/account_buyer", "review")} />
            </View>


            {/* <Item title="Menunggu Pembayaran" subtitle="Semua transaksi yang belum dibayar" onPress={() => LibNavigation.navigate<MarketOrderArgs>('market/order', { status: 1 })} />
            <Item title="Pesanan Selesai" subtitle="Semua transaksi yang pernah dilakukan" onPress={() => LibNavigation.navigate<MarketOrderArgs>('market/order', { status: 7 })} />
            <Item title="Ulasan" subtitle="Berikan penilaian dan ulasan produk" onPress={() => LibNavigation.navigate('market/review_list')} />
            <Item title="Komplain sebagai pembeli" subtitle="Lihat status komplain" onPress={() => LibNavigation.navigate<MarketOrderArgs>('market/order', { status: 6 })} /> */}
            {
              esp.isDebug('payment_offline') &&
              <>
                <Section title={esp.lang("market/account_buyer", "offline")} />
                <Item title={esp.lang("market/account_buyer", "history")} subtitle={esp.lang("market/account_buyer", "history_sub")} onPress={() => { LibNavigation.navigate('market/payment_offline') }} />
              </>
            }

            <Section title={esp.lang("market/account_buyer", "favorite")} />
            <Item title={esp.lang("market/account_buyer", "product_last_seen")} subtitle={esp.lang("market/account_buyer", "check_last_seen")} onPress={() => LibNavigation.navigate<MarketProduct_listArgs>('market/product_list', { title: esp.lang("market/account_buyer", "last_seen"), url: 'shop/product_list_seen' })} />
            <Item title={esp.lang("market/account_buyer", "wishlist")} subtitle={esp.lang("market/account_buyer", "wish_product")} onPress={() => LibNavigation.navigate<MarketCartArgs>("market/cart", { initialIndex: 1 })} />
            <Item title={esp.lang("market/account_buyer", "favourite_merchant")} subtitle={esp.lang("market/account_buyer", "fav_merchant")} onPress={() => LibNavigation.navigate<MarketCartArgs>("market/cart", { initialIndex: 2 })} />
          </>
        }
        <Section title={esp.lang("market/account_buyer", "setting")} />
        <Item title={esp.lang("market/account_buyer", "address")} subtitle={esp.lang("market/account_buyer", "address_sub")} onPress={() => LibNavigation.navigate('market/address')} />
        <Item title={esp.lang("market/account_buyer", "help")} subtitle={esp.lang("market/account_buyer", "help_sub")} onPress={() => LibNavigation.navigate('user/help')} />

      </LibScroll>
    </View>
  )
}
const styleId_29iAqi: any = { marginHorizontal: 20, marginTop: 20 }
const styleId_ZSCPyb: any = { fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }
const styleId_7eux2: any = { flexDirection: "row", borderBottomWidth: 0.3, borderBottomColor: "#d1d1d1", paddingHorizontal: 20, marginTop: 10, paddingBottom: 10 }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_QPzUz: any = { paddingBottom: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }
const styleId_ZkhjnY: any = { fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#707070" }
const styleId_qpkod: any = { flex: 1, backgroundColor: '#fff' }
const styleId_Z17Ivmk: any = { marginTop: 15, flexDirection: 'row', marginHorizontal: 17 }
const styleId_ZXW56z: any = { height: 40, width: 40, borderRadius: 20 }
const styleId_Zkxxg6: any = { marginLeft: 10 }
const styleId_ZcFIEN: any = { color: '#888' }
const styleId_Z25n7cO: any = { flexDirection: "row", marginHorizontal: 15, paddingVertical: 10, borderRadius: 5, alignItems: "center", backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimaryMarket, 0.1), marginTop: 20, justifyContent: "space-evenly" }
const styleId_1FeFsJ: any = { alignItems: "center" }
const styleId_1MM29v: any = { width: 25, height: 25 }
const styleId_1xxnEx: any = { paddingVertical: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#d1d1d1" }
const styleId_1zhqJ9: any = { fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }
const styleId_Z1AoQq1: any = { marginRight: 5, marginTop: 10, flexDirection: 'row', flexWrap: 'wrap' }
const styleId_1J3hIs: any = { top: -15, right: 0 }
const styleId_24uPtP: any = { width: 30, height: 30, alignSelf: 'center' }