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

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 { MarketMerchant_detailArgs } from 'esoftplay/cache/market/merchant_detail/import';
import { MarketMerchant_empty } from 'esoftplay/cache/market/merchant_empty/import';
import { MarketMerchant_labelProperty } from 'esoftplay/cache/market/merchant_label/import';
import { MarketMerchant_orderArgs } from 'esoftplay/cache/market/merchant_order/import';
import { MarketMerchant_profileProperty } from 'esoftplay/cache/market/merchant_profile/import';
import { MarketMerchant_reviewingProperty } from 'esoftplay/cache/market/merchant_reviewing/import';
import { MarketNotice } from 'esoftplay/cache/market/notice/import';
import { MarketOrderArgs } from 'esoftplay/cache/market/order/import';
import { MarketProduct_categoryProperty } from 'esoftplay/cache/market/product_category/import';
import { MarketProduct_listArgs } from 'esoftplay/cache/market/product_list/import';
import { MarketPromotion_programArgs } from 'esoftplay/cache/market/promotion_program/import';
import { MarketReview_merchant_listArgs } from 'esoftplay/cache/market/review_merchant_list/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UseCurl } from 'esoftplay/cache/use/curl/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import { UserData } from 'esoftplay/cache/user/data/import';

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

export interface MarketAccountArgs {

}
export interface MarketAccountProps {

}

function Item(props: any) {
  return (
    <TouchableOpacity
      activeOpacity={1}
      onPress={() => props?.onPress?.()}
      style={{ flexDirection: "row", borderBottomWidth: 0.3, borderBottomColor: "#d1d1d1", paddingHorizontal: 20, marginTop: 10, paddingBottom: 10 }} >
      <View style={{ flex: 1 }} >
        <Text allowFontScaling={false} style={{ paddingBottom: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }} >{props.title}</Text>
        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#707070" }} >{props.subtitle}</Text>
      </View>
      <LibIcon name="chevron-right" color="#d1d1d1" size={25} />
    </TouchableOpacity>
  )
}

function Section(props: any) {
  return (
    <View style={{ marginHorizontal: 20, marginTop: 20 }} >
      <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }} >{props.title}</Text>
    </View>
  )

}

function Item1(props: any) {
  return (
    <TouchableOpacity activeOpacity={1} onPress={props?.onPress} style={{ marginRight: 10, marginBottom: 10 }} >
      <View style={{ width: itemWidth, backgroundColor: '#fffbef', alignItems: "center", padding: 15, borderRadius: 5 }} >
        <LibPicture source={esp.assets(props.image)} style={{ width: 40, height: 40 }} resizeMode="contain" />
      </View>
      <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", textAlign: "center", fontSize: 10 }} >{props?.title}</Text>
    </TouchableOpacity>
  )
}

const itemWidth = (LibStyle.width - 70) / 4
export default function m(props: MarketAccountProps): any {
  UserData.register("market/merchant_profil")
  const user = UserClass.state().useSelector(s => s)
  const _tabIndex = LibUtils.getArgs(props, 'tabIndex', 0)
  const [tabIndex, setTabIndex] = useSafeState(_tabIndex)
  const tabs = [esp.lang("market/account", "buyer"), esp.lang("market/account", "store")]
  const activeTabs = tabs[tabIndex]
  const [curl, loading, error] = UseCurl()
  const [data, setData] = MarketMerchant_profileProperty.profileState().useState()
  // const [reviewing, setReviewing] = MarketMerchant_reviewingProperty.reviewState().useState()
  MarketMerchant_labelProperty.list()

  function loadData(): void {
    curl('shop/merchant_detail/' + user?.merchant_id, null,
      (res, msg) => {
        if (res.url_reviewing) {
          curl(res.url_reviewing, null, (res) => {
            // setReviewing(res)
            MarketMerchant_reviewingProperty.reviewState().set(res)
          }, 1)
        }
        setData(res)
      })
  }

  useEffect(() => {
    loadData()
    MarketProduct_categoryProperty.update()
  }, [user])



  return (
    <View style={{ flex: 1 }} >
      <MarketHeader title={esp.lang("market/account", "my_account")} onlyBack />
      <LibScroll style={{ flex: 1 }} >
        <View style={{ flexDirection: 'row', marginTop: 10, marginHorizontal: 17 }} >
          {
            tabs.map((tab, i) => (
              <TouchableOpacity
                key={i}
                onPress={() => setTabIndex(i)}
                style={{ height: 32, marginRight: 10, borderRadius: 20, backgroundColor: activeTabs == tab ? MarketStyle.colorPrimaryMarket : 'transparent', borderColor: activeTabs == tab ? 'transparent' : '#ccc', borderWidth: 1, paddingHorizontal: 17, justifyContent: 'center' }} >
                <LibTextstyle textStyle='footnote' text={tab} />
              </TouchableOpacity>
            ))
          }
        </View>
        {
          tabIndex == 0 ?
            <>
              <View style={{ marginTop: 30, flexDirection: 'row', marginHorizontal: 17 }} >
                <LibPicture source={{ uri: user?.image }} style={{ height: 40, width: 40, borderRadius: 20 }} />
                <View style={{ marginLeft: 10 }} >
                  <LibTextstyle textStyle='footnote' text={LibUtils.ucwords(user?.name)} />
                  <LibTextstyle textStyle='footnote' text={esp.lang("market/account", "member")} style={{ color: '#888' }} />
                </View>
              </View>
              <View style={{ flexDirection: "row", marginHorizontal: 15, paddingVertical: 10, borderRadius: 13, alignItems: "center", backgroundColor: '#fffbef', marginTop: 20, justifyContent: "space-evenly" }} >
                {
                  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" }} >{esp.lang("market/account", "member_store")}</Text>
                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }} >{esp.lang("market/account", "member_", 0)}</Text>
                  </TouchableOpacity>
                }
                <TouchableOpacity onPress={() => { }} 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" }} >{esp.lang("market/account", "bbo_pay")}</Text>
                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }} >{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" }} >{esp.lang("market/account", "my_coupon")}</Text>
                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }} >{esp.lang("market/account", "coupon", 0)}</Text>
                  </TouchableOpacity>
                }
              </View>
              {
                esp.isDebug("") &&
                <>
                  <Section title={esp.lang("market/account", "transaction")} />
                  <Item title={esp.lang("market/account", "waiting")} subtitle={esp.lang("market/account", "waiting_notes")} onPress={() => LibNavigation.navigate<MarketOrderArgs>('market/order', { status: 1 })} />
                  <Item title={esp.lang("market/account", "done")} subtitle={esp.lang("market/account", "done_notes")} onPress={() => LibNavigation.navigate<MarketOrderArgs>('market/order', { status: 7 })} />
                  <Item title={esp.lang("market/account", "review")} subtitle={esp.lang("market/account", "review_notes")} onPress={() => LibNavigation.navigate('market/review_list')} />
                  <Item title={esp.lang("market/account", "complaint_buyer")} subtitle={esp.lang("market/account", "complaint_notes")} onPress={() => LibNavigation.navigate<MarketOrderArgs>('market/order', { status: 6 })} />
                  <Section title={esp.lang("market/account", "favorite")} />
                  <Item title={esp.lang("market/account", "last_seen")} subtitle={esp.lang("market/account", "last_seen_notes")} onPress={() => LibNavigation.navigate<MarketProduct_listArgs>('market/product_list', { title: esp.lang("market/account", "last_seen_title"), url: 'shop/product_list_seen' })} />
                  <Item title={esp.lang("market/account", "wishlist")} subtitle={esp.lang("market/account", "wishlist_notes")} onPress={() => LibNavigation.navigate<MarketCartArgs>("market/cart", { initialIndex: 1 })} />
                  <Item title={esp.lang("market/account", "fav_store")} subtitle={esp.lang("market/account", "fav_notes")} onPress={() => LibNavigation.navigate<MarketCartArgs>("market/cart", { initialIndex: 2 })} />
                  <Section title={esp.lang("market/account", "settings")} />
                  <Item title={esp.lang("market/account", "address")} subtitle={esp.lang("market/account", "address_notes")} onPress={() => LibNavigation.navigate('market/address')} />
                </>
              }
            </>
            :
            user?.merchant_id == 0 ?
              <MarketMerchant_empty />
              :
              <>
                <View style={{ marginTop: 30, flexDirection: 'row', marginHorizontal: 17, marginBottom: 10 }} >
                  <LibPicture source={{ uri: user?.image || ' ' }} style={{ height: 40, width: 40, borderRadius: 20 }} />
                  <View style={{ marginLeft: 10, flex: 1 }} >
                    <LibTextstyle textStyle='footnote' text={LibUtils.ucwords(data?.title || '')} />
                    <LibTextstyle textStyle='footnote' text={esp.lang("market/account", "store_")} style={{ color: '#888' }} />
                  </View>
                  <View style={{ alignItems: "center", justifyContent: "center" }} >
                    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "center", backgroundColor: data?.is_online == '0' ? LibStyle.colorLightGrey : MarketStyle.colorPrimaryMarket, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 5 }} >
                      <LibTextstyle textStyle='footnote' text={data?.is_online == '1' ? esp.lang("market/account", "online") : esp.lang("market/account", "offline")} style={{ color: data?.is_online == '0' ? "#000" : "#f6f6f6" }} />
                      <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: data?.is_online == '1' ? MarketStyle.colorGreen : "red", marginLeft: 3 }} />
                    </View>
                  </View>
                </View>

                {data && data?.status == 0 && <MarketNotice mode="danger" text={esp.lang("market/account", "merchant_close", data?.closed_notes)} />}
                {
                  data && data.alert && data.alert.map((text: any) => <MarketNotice key={text} mode="warning" text={text} onPress={() => LibNavigation.navigate('market/merchant_edit')} />)
                }

                <View style={{ flexDirection: "row", marginHorizontal: 15, paddingVertical: 10, borderRadius: 13, alignItems: "center", backgroundColor: '#fffbef', marginTop: 10, justifyContent: "space-evenly" }} >
                  <TouchableOpacity onPress={() => LibNavigation.navigate('market/merchant_saldo')} activeOpacity={1} style={{ alignItems: "center" }} >
                    <LibPicture source={esp.assets('market/ic_market_merchant_balance.png')} style={{ width: 40, height: 40 }} resizeMode="contain" />
                    <Text allowFontScaling={false} style={{ paddingVertical: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#d1d1d1" }} >{esp.lang("market/account", "seller_saldo")}</Text>
                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }} >{LibUtils.money(user.saldo_merchant)}</Text>
                  </TouchableOpacity>
                  {
                    data?.is_online == "0" &&
                    <TouchableOpacity onPress={() => LibNavigation.navigate('market/merchant_edit')} 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" }} >{esp.lang("market/account", "upgrade")}</Text>
                      <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }} >{esp.lang("market/account", "open_store")}</Text>
                    </TouchableOpacity>
                  }
                </View>

                {
                  esp.isDebug("") && data?.is_online == '1' &&
                  <>
                    <Section title={esp.lang("market/account", "my_sale")} />
                    <View style={{ marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" }} >
                      <Item1 title={esp.lang("market/account", "need_process")} image={"market/ic_market_need_process.png"} onPress={() => { LibNavigation.navigate<MarketMerchant_orderArgs>('market/merchant_order', { status: 3 }) }} />
                      <Item1 title={esp.lang("market/account", "canceled")} image={"market/ic_market_canceled.png"} onPress={() => { LibNavigation.navigate<MarketMerchant_orderArgs>('market/merchant_order', { status: 2 }) }} />
                      <Item1 title={esp.lang("market/account", "return")} image={"market/ic_market_return.png"} onPress={() => { LibNavigation.navigate<MarketMerchant_orderArgs>('market/merchant_order', { status: 6 }) }} />
                      <Item1 title={esp.lang("market/account", "all_status")} image={"market/ic_market_all_status.png"} onPress={() => { LibNavigation.navigate<MarketMerchant_orderArgs>('market/merchant_order') }} />
                    </View>
                  </>
                }

                <Section title={esp.lang("market/account", "my_store")} />
                <View style={{ marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" }} >
                  {
                    esp.isDebug("") && data?.is_online == '1' &&
                    <Item1 title={esp.lang("market/account", "my_store1")} image={"market/ic_market_mystore.png"} onPress={() => { LibNavigation.navigate<MarketMerchant_detailArgs>('market/merchant_detail', { url: 'shop/merchant_detail/' + user?.merchant_id }) }} />
                  }
                  <Item1 title={esp.lang("market/account", "store_edit")} image={"market/ic_market_edit.png"} onPress={() => { LibNavigation.navigate('market/merchant_edit') }} />
                  <Item1 title={esp.lang("market/account", "saldo")} image={"market/ic_market_merchant_balance.png"} onPress={() => { LibNavigation.navigate('market/merchant_saldo') }} />
                  <Item1 title={esp.lang("market/account", "assistance")} image={"market/ic_market_assistant.png"} onPress={() => { /* LibNavigation.navigate('cashier/list') */ }} />
                  {
                    esp.isDebug("") && data?.is_online == '1' &&
                    <Item1 title={esp.lang("market/account", "display")} image={"market/ic_market_etalase.png"} onPress={() => { LibNavigation.navigate('market/merchant_label') }} />
                  }
                  {
                    data?.is_online == '1' &&
                    <>
                      <Item1 title={esp.lang("market/account", "shipping")} image={"market/ic_market_delivery_service.png"} onPress={() => { LibNavigation.navigate('market/merchant_shipping') }} />
                    </>
                  }
                  {
                    esp.isDebug("") && data?.is_online == '1' &&
                    <>
                      <Item1 image={"market/ic_market_coupon.png"} title={esp.lang("market/account", "coupon_promo")} onPress={() => { LibNavigation.navigate('market/voucher') }} />
                      <Item1 image={"market/ic_market_promo.png"} title={esp.lang("market/account", "promotion")} onPress={() => { LibNavigation.navigate<MarketPromotion_programArgs>('market/promotion_program') }} />
                    </>
                  }

                </View>

                {
                  esp.isDebug("") && data?.is_online == '1' &&
                  <>
                    <Section title={esp.lang("market/account", "store_upgrade")} />
                    <View style={{ marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" }} >
                      <Item1 title={esp.lang("market/account", "store_super")} image={"market/ic_market_super.png"} onPress={() => { }} />
                      <Item1 title={esp.lang("market/account", "store_official")} image={"market/ic_market_official.png"} onPress={() => { }} />
                    </View>
                  </>
                }

                {
                  esp.isDebug("") && data?.is_online == '1' &&
                  <>
                    <Section title={esp.lang("market/account", "product")} />
                    <View style={{ marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" }} >
                      <Item1 title={esp.lang("market/account", "add_product")} image={"market/ic_market_add_product.png"} onPress={() => { LibNavigation.navigate('market/product_add') }} />
                      <Item1 title={esp.lang("market/account", "my_product")} image={"market/ic_market_archive.png"} onPress={() => { LibNavigation.navigate<MarketProduct_listArgs>('market/product_list', { title: esp.lang("market/account", "my_product1"), url: 'shop/product_list?merchant_id=' + user?.merchant_id }) }} />
                      <Item1 title={esp.lang("market/account", "draft_product")} image={"market/ic_market_draft.png"} onPress={() => { LibNavigation.navigate<MarketProduct_listArgs>('market/product_list', { title: esp.lang("market/account", "draft"), url: 'shop/merchant_product_draft' }) }} />
                      {/* <Item1 title="Arsip Produk" image={"market/ic_market_archive.png"} onPress={() => { }} /> */}
                      <Item1 title={esp.lang("market/account", "product_review")} image={"market/ic_market_archive.png"} onPress={() => { LibNavigation.navigate<MarketReview_merchant_listArgs>('market/review_merchant_list') }} />
                      {/* <Item1 title="Komplain" image={"market/ic_market_archive.png"} onPress={() => { LibNavigation.navigate<MarketComplaint_seller_listArgs>('market/complaint_seller_list') }} /> */}
                      {/* <Item1 title="Produk List" image={"market/ic_market_archive.png"} onPress={() => { LibNavigation.push('market/product_list') }} /> */}
                    </View>
                  </>
                }

                <Section title={esp.lang("market/account", "setting_section")} />
                <View style={{ marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" }} >
                  <Item1 title={esp.lang("market/account", "languange")} image={"market/ic_market_languange.png"} onPress={() => { }} />
                  <Item1 title={esp.lang("market/account", "help")} image={"market/ic_market_help.png"} onPress={() => { }} />
                  {
                    data?.is_online == '1' &&
                    <>
                      <Item1 title={esp.lang("market/account", "my_address")} image={"market/ic_market_address.png"} onPress={() => { LibNavigation.navigate('market/address') }} />
                      <Item1 title={esp.lang("market/account", "close_store")} image={"market/ic_market_close.png"} onPress={() => { LibNavigation.navigate('market/merchant_close') }} />
                    </>
                  }
                </View>

              </>
        }
        {
          (tabIndex == 0) &&
          <>
            <Section title={esp.lang("market/account", "bbo_care")} />
            <Item title={esp.lang("market/account", "help_center")} subtitle={esp.lang("market/account", "help_center_notes")} onPress={() => LibNavigation.navigate('user/help')} />
          </>
        }
      </LibScroll>
    </View>
  )
}