// withHooks
import { applyStyle } from 'esoftplay';

import { LibDialog } from 'esoftplay/cache/lib/dialog/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 { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import esp from 'esoftplay/esp';

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


export interface MarketConfirm_change_typeArgs {
}
export interface MarketConfirm_change_typeProps {

}
export default function m(props: MarketConfirm_change_typeProps): any {

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

  function Section(props: any) {
    return (
      <View style={applyStyle({ marginHorizontal: 20, marginTop: 20 })} >
        <Text allowFontScaling={false} style={applyStyle({ 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={applyStyle({ marginRight: 10, marginBottom: 10 })} >
        <View style={applyStyle({ width: itemWidth, alignItems: "center", padding: 15, borderRadius: 5 })} >
          <LibPicture source={esp.assets(props.image)} style={applyStyle({ width: 30, height: 30 })} resizeMode="contain" />
          {
            props?.badge > 0 &&
            <View style={applyStyle({ 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' })} >
              <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 8, letterSpacing: 0, color: "#fff" })} >{props?.badge || 0}</Text>
            </View>
          }
        </View>
        <Text allowFontScaling={false} style={applyStyle({ marginTop: 5, fontFamily: "Arial", textAlign: "center", fontSize: 10 })} >{props?.title}</Text>
      </TouchableOpacity>
    )
  }

  useEffect(() => {
    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
  }, [])

  return (
    <View style={{ flex: 1 }}>
      <MarketHeader title={esp.lang("market/confirm_change_type", "header_change")} onlyBack />
      <LibScroll>
        <View style={{ marginHorizontal: 17, padding: 15, backgroundColor: '#f8d7da', borderRadius: 5, marginTop: 10 }}>
          <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, lineHeight: 20, textAlign: "left", color: "#03192a" })} >{esp.lang("market/confirm_change_type", "change_to_offline")}</Text>
        </View>
        <Section title={esp.lang("market/account_merchant", "sales")} />
        <View style={applyStyle({ opacity: 0.3, marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" })} >
          <Item1 title={esp.lang("market/account_merchant", "need_process")} image={"market/ic_market_need_process.png"} onPress={() => { }} />
          <Item1 title={esp.lang("market/account_merchant", "canceled")} image={"market/ic_market_canceled.png"} onPress={() => { }} />
          <Item1 title={esp.lang("market/account_merchant", "refund")} image={"market/ic_market_return.png"} onPress={() => { }} />
          <Item1 title={esp.lang("market/account_merchant", "all_status")} image={"market/ic_market_all_status.png"} onPress={() => { }} />
        </View>

        <Section title={esp.lang("market/account_merchant", "my_store")} />
        <View style={applyStyle({ marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" })} >
          <Item1 title={esp.lang("market/account_merchant", "my_storee")} image={"market/ic_market_mystore.png"} onPress={() => { }} />
          <View style={{ opacity: 0.3 }} >
            <Item1 title={esp.lang("market/account_merchant", "edit_store")} image={"market/ic_market_edit.png"} onPress={() => { }} />
          </View>
          <Item1 title={esp.lang("market/account_merchant", "assistant")} image={"market/ic_market_assistant.png"} onPress={() => { }} />
          <View style={{ opacity: 0.3 }} >
            <Item1 title={esp.lang("market/account_merchant", "display")} image={"market/ic_market_etalase.png"} onPress={() => { }} />
          </View>
          <View style={{ opacity: 0.3 }} >
            <Item1 title={esp.lang("market/account_merchant", "shipping")} image={"market/ic_market_delivery_service.png"} onPress={() => { }} />
          </View>
          {
            esp.isDebug('coupon & promo') &&
            <>
              <View style={{ opacity: 0.3 }} >
                <Item1 image={"market/ic_market_coupon.png"} title={esp.lang("market/account_merchant", "coupon_promo")} onPress={() => { }} />
              </View>
              <View style={{ opacity: 0.3 }} >
                <Item1 image={"market/ic_market_promo.png"} title={esp.lang("market/account_merchant", "promotion")} onPress={() => { }} />
              </View>
            </>
          }
          {
            esp.isDebug('iklan bbo') &&
            <View style={{ opacity: 0.3 }} >
              <Item1 image={"market/ic_market_coupon.png"} title={esp.lang("market/account_merchant", "ads")} onPress={() => { }} />
            </View>
          }

        </View>

        <>
          <Section title={esp.lang("market/account_merchant", "product")} />
          <View style={applyStyle({ marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" })} >
            <View style={{ opacity: 0.3 }} >
              <Item1 title={esp.lang("market/account_merchant", "add_product")} image={"market/ic_market_add_product.png"} onPress={() => { }} />
            </View>
            <View style={{ opacity: 0.3 }} >
              <Item1 title={esp.lang("market/account_merchant", "my_product")} image={"market/ic_market_archive.png"} onPress={() => { }} />
            </View>
            <View style={{ opacity: 0.3 }} >
              <Item1 title={esp.lang("market/account_merchant", "product_draft")} image={"market/ic_market_draft.png"} onPress={() => { }} />
            </View>
            <View style={{ opacity: 0.3 }} >
              <Item1 title={esp.lang("market/account_merchant", "review")} image={"market/ic_market_review.png"} onPress={() => { }} />
            </View>

            {
              esp.isDebug("diskusi produk") &&
              <View style={{ opacity: 0.3 }} >
                <Item1 title={esp.lang("market/account_merchant", "discussion")} image={"market/ic_market_review.png"} onPress={() => { }} />
              </View>
            }

            <View style={{ opacity: 0.3 }} >
              <Item1 title={esp.lang("market/account_merchant", "complaint")} image={"market/ic_market_complaint.png"} onPress={() => { }} />
            </View>
          </View>
        </>
        <Section title={esp.lang("market/account_merchant", "settings")} />
        <View style={applyStyle({ marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" })} >
          <Item1 title={esp.lang("market/account_merchant", "help_center")} image={"market/ic_market_help.png"} onPress={() => { }} />
          <View style={{ opacity: 0.3 }} >
            <Item1 title={esp.lang("market/account_merchant", "my_address")} image={"market/ic_market_address.png"} onPress={() => { }} />
          </View>
        </View>

      </LibScroll>
      <View style={{ paddingHorizontal: 17, marginTop: 4, marginBottom: 8 }} >
        <MarketButton
          text={esp.lang("market/confirm_change_type", "btn_submit")}
          onPress={() => {
            LibDialog.warningConfirm(esp.lang("market/confirm_change_type", "change_title"), esp.lang("market/confirm_change_type", "change_msg"), esp.lang("market/confirm_change_type", "change_ok"), () => {
              LibNavigation.sendBackResult(true, LibNavigation.getResultKey(props))
            }, esp.lang("market/confirm_change_type", "change_cancel"), () => { })
          }} />
      </View>

    </View>
  )
}