// 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 { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketInfo } from 'esoftplay/cache/market/info/import';
import { MarketMerchant_detail_product_listArgs } from 'esoftplay/cache/market/merchant_detail_product_list/import';
import { MarketMerchant_empty } from 'esoftplay/cache/market/merchant_empty/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_slider } from 'esoftplay/cache/market/notice_slider/import';
import { MarketOrderArgs } from 'esoftplay/cache/market/order/import';
import { MarketProduct_categoryProperty } from 'esoftplay/cache/market/product_category/import';
import { MarketPromotion_programArgs } from 'esoftplay/cache/market/promotion_program/import';
import { MarketReview_merchant_listArgs } from 'esoftplay/cache/market/review_merchant_list/import';
import { NotificationMarketplaceProperty } from 'esoftplay/cache/notification/marketplace/import';
import { UseCurl } from 'esoftplay/cache/use/curl/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import { UserProfileProperty } from 'esoftplay/cache/user/profile/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

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


export interface MarketAccount_merchantArgs {

}
export interface MarketAccount_merchantProps {

}

interface itemSquare {
  image: string,
  title: string,
  onPress: () => void,
  badge?: number
  testId?: string
}

const itemWidth = (LibStyle.width - 70) / 4

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

function Item1(props: itemSquare) {
  return (
    <TouchableOpacity testID={props?.testId || 'menu-item'} activeOpacity={1} onPress={props?.onPress} style={styleId_23QjhE} >
      <View style={styleId_Z1iioi0} >
        <LibPicture source={esp.assets(props.image)} style={styleId_1kJH5V} resizeMode="contain" />
        {
          props?.badge > 0 &&
          <View style={styleId_2jcaEG} >
            <Text allowFontScaling={false} style={styleId_Zo43RJ} >{props?.badge || 0}</Text>
          </View>
        }
      </View>
      <Text allowFontScaling={false} style={styleId_Z1whoGQ} >{props?.title}</Text>
    </TouchableOpacity>
  )
}

export default function m(props: MarketAccount_merchantProps): any {
  const user = UserClass.state().useSelector(s => s)
  const [data, setData] = MarketMerchant_profileProperty.profileState().useState()
  const [curl, loading, error] = UseCurl()
  // const [reviewing, setReviewing] = MarketMerchant_reviewingProperty.reviewState().useState()
  const [hasWarningAlert, setHasWarningAlert] = useSafeState(false)
  const [badgeData, setBadge] = NotificationMarketplaceProperty.state().useState()
  const scrolRef = useRef<LibScroll>(null)
  const [animated, setAnimated] = useSafeState(new Animated.Value(0))

  const notif = animated.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0],
    extrapolate: 'clamp',
  })

  function blink() {
    Animated.loop(
      Animated.sequence([
        Animated.timing(animated, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }),
        Animated.timing(animated, {
          toValue: 0,
          duration: 500,
          useNativeDriver: true,
        })
      ]), { iterations: 5 }
    ).start()
  }

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

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

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

  function Blinkview(props: any) {
    return (
      <Animated.View style={{ opacity: notif, backgroundColor: 'white' }}>
        {props.children}
      </Animated.View>
    )
  }

  function loadData(): void {
    curl('shop/merchant_detail/' + user?.merchant_id, null,
      (res, msg) => {
        setHasWarningAlert(res.alert?.some?.((x: any) => x.type == 'warning' || x.type == 'danger'))
        if (res.url_reviewing) {
          curl(res.url_reviewing, null, (res) => {
            // setReviewing(res)
            MarketMerchant_reviewingProperty.reviewState().set(res)
          }, 1)
        }
        setData(res)
      })
  }

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <MarketHeader title={esp.lang("market/account_merchant", "header_title")} onlyBack />
      <LibScroll ref={scrolRef} style={{ flex: 1 }} onRefresh={() => { loadData(); getData() }} >
        {
          user?.merchant_id > 0 ?
            <>
              <View style={styleId_Z1nQXPF} >
                <LibPicture source={{ uri: data?.image || ' ' }} style={styleId_ZXW56z} />
                <View style={styleId_14tcJb} >
                  <LibTextstyle textStyle='footnote' text={(data?.title || '')} />
                  <LibTextstyle textStyle='footnote' text={esp.lang("market/account_merchant", "store")} style={{ color: '#888' }} />
                </View>
                <View style={styleId_A36T4} >
                  <TouchableOpacity onPress={blink} style={[styleId_Z1LCMt2, { backgroundColor: data?.is_online == '0' ? LibStyle.colorLightGrey : LibStyle.colorPrimaryMarket }]} >
                    <LibTextstyle textStyle='footnote' text={data?.is_online == '1' ? esp.lang("market/account_merchant", "online") : esp.lang("market/account_merchant", "offline")} style={{ color: data?.is_online == '0' ? "#000" : "#f6f6f6" }} />
                    <View style={[styleId_2c2YbV, { backgroundColor: data?.is_online == '1' ? LibStyle.colorGreen : "red", }]} />
                  </TouchableOpacity>
                </View>
              </View>
              {
                data?.location_name != '' &&
                <Pressable onPress={() => LibNavigation.navigate('market/address')} style={styleId_Z19kTI9}>
                  <LibIcon name="map-marker" size={20} color={LibStyle.colorPrimaryMarket} style={styleId_wxwT1} />
                  <LibTextstyle textStyle='footnote' text={data?.location_name} style={styleId_Z2mCKcI} />
                </Pressable>
              }
              {
                data?.address == '' &&
                <MarketInfo mode="danger"
                  text={esp.lang("market/account_merchant", "address_empty")}
                  disabled={false}
                  onPress={() => {
                    LibNavigation.navigate('market/address')
                  }}
                  iconRight={"chevron-right"}
                  style={{ marginBottom: 3, marginHorizontal: 20 }}
                  contentStyle={{ borderRadius: 5 }}
                />
              }
              {
                data?.alert?.length > 0 &&
                <Blinkview>
                  <MarketNotice_slider data={data?.alert} />
                </Blinkview>
              }

              <View style={styleId_10GmJE} >
                <View style={styleId_1urbRm} >
                  <LibPicture source={esp.assets('market/ic_market_merchant_balance.png')} style={styleId_Z1FAOiR} resizeMode="contain" />
                  <View style={styleId_Zkxxg6} >
                    <Text allowFontScaling={false} style={styleId_ZkV9o6} >Saldo Penjual</Text>
                    <Text allowFontScaling={false} style={styleId_1zhqJ9} >{LibUtils.money(user.saldo_merchant)}</Text>
                  </View>
                </View>
                <TouchableOpacity onPress={() => UserProfileProperty.isLogin(() => { LibNavigation.navigate('market/withdraw', { from: 'merchant' }) })} activeOpacity={1} style={styleId_SMICV} >
                  <LibPicture source={esp.assets('market/ic_market_withdraw.png')} style={styleId_1kJH5V} resizeMode="contain" />
                  <Text allowFontScaling={false} style={styleId_ZkV9o6} >{esp.lang("market/account_merchant", "withdraw")}</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => UserProfileProperty.isLogin(() => { LibNavigation.navigate('market/merchant_saldo_history') })} activeOpacity={1} style={{ paddingVertical: 10, width: itemWidth, alignItems: "center", borderRadius: 5, backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimaryMarket, 0.1) }} >
                  <LibPicture source={esp.assets('market/ic_market_history.png')} style={styleId_1kJH5V} resizeMode="contain" />
                  <Text allowFontScaling={false} style={styleId_ZkV9o6} >{esp.lang("market/account_merchant", "history")}</Text>
                </TouchableOpacity>
              </View>

              {
                // esp.isDebug() && // #publish_market
                data?.is_online == '1' && data?.active == 1 &&
                <>
                  <Section title={esp.lang("market/account_merchant", "sales")} />
                  <View style={styleId_Zs4eB9} >
                    <Item1 title={esp.lang("market/account_merchant", "need_process")} badge={badgeData?.merchant?.[3]} image={"market/ic_market_need_process.png"} onPress={() => { LibNavigation.navigate<MarketMerchant_orderArgs>('market/merchant_order', { status: 3 }) }} />
                    <Item1 title={esp.lang("market/account_merchant", "canceled")} image={"market/ic_market_canceled.png"} onPress={() => { LibNavigation.navigate<MarketMerchant_orderArgs>('market/merchant_order', { status: 2 }) }} />
                    <Item1 title={esp.lang("market/account_merchant", "refund")} badge={badgeData?.merchant?.[6]} image={"market/ic_market_return.png"} onPress={() => { LibNavigation.navigate<MarketMerchant_orderArgs>('market/merchant_order', { status: 6 }) }} />
                    <Item1 title={esp.lang("market/account_merchant", "all_status")} image={"market/ic_market_all_status.png"} onPress={() => { LibNavigation.navigate<MarketMerchant_orderArgs>('market/merchant_order') }} />
                  </View>
                </>
              }

              <Section title={esp.lang("market/account_merchant", "my_store")} />
              <View style={styleId_Zs4eB9} >
                {
                  // esp.isDebug() && // #publish_market
                  data?.is_online == '1' &&
                  <Item1 testId='my-store' title={esp.lang("market/account_merchant", "my_storee")} image={"market/ic_market_mystore.png"} onPress={() => { LibNavigation.navigate('market/merchant_detail', { url: 'shop/merchant_detail/' + user?.merchant_id }) }} />
                }
                <Item1 testId='store-edit' title={esp.lang("market/account_merchant", "edit_store")} image={"market/ic_market_edit.png"} onPress={() => { LibNavigation.navigate('market/merchant_edit') }} />
                <Item1 testId='assistant' title={esp.lang("market/account_merchant", "assistant")} image={"market/ic_market_assistant.png"} onPress={() => {
                  LibNavigation.navigate('cashier/index', { merchant_name: data?.title })
                }} />
                {
                  // esp.isDebug() && // #publish_market
                  data?.is_online == '1' &&
                  <Item1 testId='display' title={esp.lang("market/account_merchant", "display")} image={"market/ic_market_etalase.png"} onPress={() => { LibNavigation.navigate('market/merchant_label') }} />
                }
                {
                  data?.is_online == '1' &&
                  <>
                    <View style={{ opacity: hasWarningAlert ? 0.3 : 1 }} >
                      <Item1 testId='shipping' title={esp.lang("market/account_merchant", "shipping")} image={"market/ic_market_delivery_service.png"} onPress={() => {
                        if (hasWarningAlert) {
                          blink()
                          scrolRef?.current?.scrollToIndex(0)
                        } else {
                          LibNavigation.navigate('market/merchant_shipping')
                        }
                      }} />
                    </View>
                  </>
                }
                {
                  // esp.isDebug('coupon & promo') && data?.is_online == '1' &&
                  <>
                    <Item1 testId='coupon' image={"market/ic_market_coupon.png"} title={esp.lang("market/account_merchant", "coupon_promo")} onPress={() => { LibNavigation.navigate('market/merchant_voucher') }} />
                    <Item1 testId='promo' image={"market/ic_market_promo.png"} title={esp.lang("market/account_merchant", "promotion")} onPress={() => { LibNavigation.navigate<MarketPromotion_programArgs>('market/promotion_program') }} />
                  </>
                }

                {
                  esp.isDebug('iklan bbo') && data?.is_online == '1' &&
                  <>
                    <Item1 testId='ads' image={"market/ic_market_coupon.png"} title={esp.lang("market/account_merchant", "ads")} onPress={() => { LibNavigation.navigate('market/ads') }} />
                  </>
                }

              </View>

              {/* {
                esp.isDebug() && data?.is_online == '1' &&
                <>
                  <Section title={"Upgrade Toko"} />
                  <View style={styleId_Zs4eB9} >
                    <Item1 title="Super Toko" image={"market/ic_market_super.png"} onPress={() => { }} />
                    <Item1 title="Official Store" image={"market/ic_market_official.png"} onPress={() => { }} />
                  </View>
                </>
              } */}

              {
                // esp.isDebug() && // #publish_market
                data?.is_online == '1' && /* data.active == 1 && */
                <>
                  <Section title={esp.lang("market/account_merchant", "product")} />
                  <View style={styleId_Zs4eB9} >
                    <View style={{ opacity: hasWarningAlert ? 0.3 : 1 }} >
                      <Item1 testId='product-add' title={esp.lang("market/account_merchant", "add_product")} image={"market/ic_market_add_product.png"} onPress={() => {
                        if (hasWarningAlert) {
                          blink()
                          scrolRef?.current?.scrollToIndex(0)
                        } else {
                          LibNavigation.navigate('market/product_add')
                        }
                      }} />
                    </View>
                    <View style={{ opacity: hasWarningAlert ? 0.3 : 1 }} >
                      <Item1 testId='my-product' title={esp.lang("market/account_merchant", "my_product")} image={"market/ic_market_archive.png"} onPress={() => {
                        if (hasWarningAlert) {
                          blink()
                          scrolRef?.current?.scrollToIndex(0)
                        } else {
                          LibNavigation.navigate<MarketMerchant_detail_product_listArgs>('market/merchant_detail_product_list', { title: esp.lang("market/account_merchant", "my_product_title"), tab: 1, url: 'shop/merchant_product' })
                        }
                      }} />
                    </View>
                    <View style={{ opacity: hasWarningAlert ? 0.3 : 1 }} >
                      <Item1 testId='product-draft' title={esp.lang("market/account_merchant", "product_draft")} image={"market/ic_market_draft.png"} onPress={() => {
                        if (hasWarningAlert) {
                          blink()
                          scrolRef?.current?.scrollToIndex(0)
                        } else {
                          LibNavigation.navigate<MarketMerchant_detail_product_listArgs>('market/merchant_detail_product_list', { title: esp.lang("market/account_merchant", "my_product_title1"), tab: 2, url: 'shop/merchant_product_draft' })
                        }
                      }} />
                    </View>
                    <View style={{ opacity: hasWarningAlert ? 0.3 : 1 }} >
                      <Item1 testId='review' title={esp.lang("market/account_merchant", "review")} image={"market/ic_market_review.png"} onPress={() => {
                        if (hasWarningAlert) {
                          blink()
                          scrolRef?.current?.scrollToIndex(0)
                        } else {
                          LibNavigation.navigate<MarketReview_merchant_listArgs>('market/review_merchant_list')
                        }
                      }} />
                    </View>

                    {
                      esp.isDebug("diskusi produk") &&
                      <View style={{ opacity: hasWarningAlert ? 0.3 : 1 }} >
                        <Item1 testId='discuss' title={esp.lang("market/account_merchant", "discussion")} image={"market/ic_market_review.png"} onPress={() => {
                          LibNavigation.navigate('market/product_discuss')
                        }} />
                      </View>
                    }

                    <View style={{ opacity: hasWarningAlert ? 0.3 : 1 }} >
                      <Item1 testId='complaint' title={esp.lang("market/account_merchant", "complaint")} image={"market/ic_market_complaint.png"} onPress={() => {
                        if (hasWarningAlert) {
                          blink()
                          scrolRef?.current?.scrollToIndex(0)
                        } else {
                          LibNavigation.navigate<MarketOrderArgs>('market/merchant_order', { status: 6 })
                        }
                      }} />
                    </View>
                  </View>
                </>
              }

              <Section title={esp.lang("market/account_merchant", "settings")} />
              <View style={styleId_Zs4eB9} >
                {/* <Item1 title="Bahasa" image={"market/ic_market_languange.png"} onPress={() => { }} /> */}
                <Item1 testId='help' title={esp.lang("market/account_merchant", "help_center")} image={"market/ic_market_help.png"} onPress={() => { LibNavigation.navigate('user/help') }} />
                {
                  data?.is_online == '1' &&
                  <>
                    <Item1 testId='address' title={esp.lang("market/account_merchant", "my_address")} image={"market/ic_market_address.png"} onPress={() => { LibNavigation.navigate('market/address') }} />
                    {
                      data.active == 1 &&
                      <Item1 testId='close-store' title={esp.lang("market/account_merchant", "close_store")} image={"market/ic_market_close.png"} onPress={() => { LibNavigation.navigate('market/merchant_close') }} />
                    }
                  </>
                }
              </View>

            </>
            :
            <MarketMerchant_empty />

        }
        <View />
      </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_23QjhE: any = { marginRight: 10, marginBottom: 10 }
const styleId_Z1iioi0: any = { width: itemWidth, alignItems: "center", padding: 15, borderRadius: 5 }
const styleId_1kJH5V: any = { width: 30, height: 30 }
const styleId_2jcaEG: any = { position: 'absolute', top: 0, right: 10, height: 20, width: 20, borderRadius: 10, padding: 5, paddingVertical: 2, backgroundColor: LibStyle.colorRed, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }
const styleId_Zo43RJ: any = { fontFamily: "Arial", fontSize: 8, letterSpacing: 0, color: "#fff" }
const styleId_Z1whoGQ: any = { marginTop: 5, fontFamily: "Arial", textAlign: "center", fontSize: 10 }
const styleId_Z1nQXPF: any = { marginTop: 15, flexDirection: 'row', marginHorizontal: 17, marginBottom: 10 }
const styleId_ZXW56z: any = { height: 40, width: 40, borderRadius: 20 }
const styleId_14tcJb: any = { marginLeft: 10, flex: 1 }
const styleId_A36T4: any = { alignItems: "center", justifyContent: "center" }
const styleId_Z1LCMt2: any = { flexDirection: "row", alignItems: "center", justifyContent: "center", paddingHorizontal: 10, paddingVertical: 5, borderRadius: 5 }
const styleId_2c2YbV: any = { width: 10, height: 10, borderRadius: 5, marginLeft: 3 }
const styleId_Z19kTI9: any = { marginBottom: 5, padding: 10, paddingVertical: 8, backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimaryMarket, 0.1), borderRadius: 5, marginHorizontal: 20, flexDirection: 'row', alignItems: 'center' }
const styleId_wxwT1: any = { marginRight: 5 }
const styleId_Z2mCKcI: any = { fontSize: 11 }
const styleId_10GmJE: any = { flexDirection: "row", marginHorizontal: 20, marginTop: 10 }
const styleId_1urbRm: any = { flex: 1, marginRight: 10, flexDirection: 'row', alignItems: "center", padding: 10, borderRadius: 5, backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimaryMarket, 0.1) }
const styleId_Z1FAOiR: any = { width: 35, height: 35 }
const styleId_Zkxxg6: any = { marginLeft: 10 }
const styleId_ZkV9o6: any = { paddingVertical: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center" }
const styleId_1zhqJ9: any = { fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }
const styleId_SMICV: any = { paddingVertical: 10, width: itemWidth, alignItems: "center", marginRight: 10, borderRadius: 5, backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimaryMarket, 0.1) }
const styleId_Zs4eB9: any = { marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" }