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

import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibEditbox } from 'esoftplay/cache/lib/editbox/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketMerchant_detailArgs } from 'esoftplay/cache/market/merchant_detail/import';
import { MarketProduct_detailArgs } from 'esoftplay/cache/market/product_detail/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketCart_itemProduct {
  id: number,
  idx: number,
  idx_merchant: number,
  title: string,
  image: string,
  currency: string,
  sale: number,
  prices: number,
  subtotal_price: number,
  notes: string,
  price_name: string,
  min_order: number,
  stocks: number,
  option_name: number,
  option_data: number,
  option_id: number,
  checkProduct: (indexMerchant: number, indexProduct: number, check: 0 | 1) => void,
  changeQty: (indexMerchant: number, indexProduct: number, qty: number) => void,
  changeNotes: (indexMerchant: number, indexProduct: number, notes: string) => void,
  deleteProduct: (indexMerchant: number, indexProduct: number) => void,
  qty: number,
  check: number,
  disabled: number,
  disabled_notes: string,
  url: string
}
export interface MarketCart_itemMerchant {
  id: string,
  image: string,
  location_id: string,
  location_name: string,
  title: string,
  url: string,

}

export interface MarketCart_itemProps {
  id: number, //cart_id
  idx: number,
  currency: string,
  check: 1 | 0,
  checkMerchant: (index: number, check: 0 | 1) => void,
  checkProduct: (indexMerchant: number, indexProduct: number, check: 0 | 1) => void,
  changeQty: (indexMerchant: number, indexProduct: number, qty: number) => void,
  changeNotes: (indexMerchant: number, indexProduct: number, notes: string) => void,
  deleteProduct: (indexMerchant: number, indexProduct: number) => void,
  deleteMerchant: (indexMerchant: number) => void,
  merchant: MarketCart_itemMerchant,
  products: MarketCart_itemProduct[],
}

function Product(props: MarketCart_itemProduct): any {

  function addQty() {
    const newQty = props?.qty + 1
    props?.changeQty(props?.idx_merchant, props?.idx, (newQty <= props?.stocks ? newQty : props?.qty))
  }

  function delProduct() {
    LibDialog.warningConfirm(esp.lang("market/cart_item", "delete_title", props?.title), esp.lang("market/cart_item", "delete_detail"), esp.lang("market/cart_item", "delete_confirm"), () => {
      props?.deleteProduct(props?.idx_merchant, props?.idx)
    }, esp.lang("market/cart_item", "delete_cancel"), () => { })
  }

  function subQty() {
    const newQty = props?.qty - 1
    if (newQty < 1) {
      LibDialog.warningConfirm(esp.lang("market/cart_item", "delete_title", props?.title), esp.lang("market/cart_item", "delete_detail"), esp.lang("market/cart_item", "delete_confirm1"), () => {
        props?.deleteProduct(props?.idx_merchant, props?.idx)
      }, esp.lang("market/cart_item", "delete_cancel1"), () => { })
    } else {
      props?.changeQty(props?.idx_merchant, props?.idx, (newQty >= (props?.min_order || 0) ? newQty : props?.qty))
    }
  }

  return (
    <View style={styleId_Z1czirB} >
      <View style={styleId_2hNwds}>
        {
          props?.disabled == 0 ?
            <TouchableOpacity onPress={() => props?.checkProduct(props?.idx_merchant, props?.idx, props?.check == 1 ? 0 : 1)} style={styleId_Z1j4pPu} >
              <LibIcon name={props?.check == 1 ? "checkbox-marked-circle-outline" : "checkbox-blank-circle-outline"} color={props?.check == 1 ? MarketStyle.colorGreen : "#bbb"} />
            </TouchableOpacity>
            :
            <TouchableOpacity disabled activeOpacity={1} style={styleId_Z1j4pPu} >
              <LibIcon name={"checkbox-blank-circle"} color={"#fff"} />
            </TouchableOpacity>
        }
        <TouchableOpacity onPress={() => LibNavigation.push<MarketProduct_detailArgs>('market/product_detail', { url: props?.url })} >
          <LibPicture source={{ uri: props?.image }} style={[styleId_1Y0G78, { opacity: props?.disabled == 1 ? 0.6 : undefined }]} resizeMode="cover" />
        </TouchableOpacity>
        <View style={styleId_ZEsO9f}>
          <Text allowFontScaling={false} numberOfLines={2} style={[styleId_Z17LdUb, { opacity: props?.disabled == 1 ? 0.6 : undefined }]}>{props?.title}</Text>
          {
            props?.price_name != '' &&
            <View style={styleId_Z1pvJHL} >
              <LibTextstyle text={props?.price_name} textStyle="caption2" style={styleId_1rgcuB} />
            </View>
          }
          <View style={[styleId_Zrzc5a, { opacity: props?.disabled == 1 ? 0.6 : undefined }]} >
            {
              props?.sale && props?.prices != props?.sale &&
              <Text allowFontScaling={false} style={styleId_DUaMs}>{LibUtils.money(props?.prices)}</Text>
            }
            <Text allowFontScaling={false} style={styleId_ZCaqEs}>{LibUtils.money(props?.sale)}</Text>
          </View>
          {
            props?.disabled == 1 &&
            <LibTextstyle textStyle='caption2' text={props?.disabled_notes || ' '} style={styleId_Qtdaz} />
          }
          {
            props?.disabled == 0 &&
            <>
              <TouchableOpacity
                onPress={() => { LibEditbox.show('Catatan', props?.notes, 'default', (notes) => { props?.changeNotes(props?.idx_merchant, props?.idx, notes) }) }}
                style={styleId_2fAOom} >
                <LibIcon.AntDesign name='edit' size={12} color={'#999'} />
                <LibTextstyle textStyle='caption2' text={props?.notes || esp.lang("market/cart_item", "empty_notes")} style={styleId_Z1Opfu2} />
              </TouchableOpacity>
              <View style={styleId_Zrz44M} >
                <TouchableOpacity
                  style={styleId_23m1yA}
                  onPress={subQty} hitSlop={styleId_Z2qRWka} >
                  <LibIcon name='minus-circle' color={MarketStyle.colorBrown} size={18} />
                </TouchableOpacity>
                {/* <TouchableOpacity onPress={() => { }} > */}
                <View style={styleId_15dJmg} >
                  <LibTextstyle text={LibUtils.number(props?.qty)} textStyle="caption1" />
                </View>
                {/* </TouchableOpacity> */}
                <TouchableOpacity
                  style={styleId_23m1yA}
                  onPress={addQty} hitSlop={styleId_Z2qRWka} >
                  <LibIcon name='plus-circle' color={MarketStyle.colorBrown} size={18} />
                </TouchableOpacity>
              </View>
            </>
          }
        </View>
        <View style={styleId_Z1IS0fI}>
          {/* <TouchableOpacity>
            <LibIcon color="#707070" name="heart" />
          </TouchableOpacity> */}
          <TouchableOpacity onPress={delProduct} >
            <LibIcon style={styleId_Zkxxg6} color="#707070" name="delete" />
          </TouchableOpacity>
        </View>
      </View>

      {/* <View style={styleId_Z20jOK9} >
        <TouchableOpacity onPress={() => props?.checkProduct(props?.idx_merchant, props?.idx, props?.check == 1 ? 0 : 1)} style={styleId_Z1j4pPu} >
          <LibIcon name={props?.check == 1 ? "checkbox-marked-circle-outline" : "checkbox-blank-circle-outline"} color={props?.check == 1 ? MarketStyle.colorGreen : "#bbb"} />
        </TouchableOpacity>
        <View style={styleId_1Apyol} >
          <LibPicture source={{ uri: props?.image }} style={styleId_Zhb5x9} />
        </View>
        <View style={styleId_Z1JkUNA} >
          <LibTextstyle text={props?.title} textStyle="footnote" />
          {
            props?.price_name != '' &&
            <View style={{ flexDirection: 'row', flexWrap: 'wrap' }} >
              <LibTextstyle text={props?.price_name} textStyle="caption2" style={{ color: "#999", backgroundColor: '#f1f2f3', paddingHorizontal: 3, paddingVertical: 2, borderRadius: 3 }} />
            </View>
          }
          <LibTextstyle text={"@ " + LibUtils.money(props?.prices, props?.currency)} textStyle="caption1" style={styleId_15VF73} />
          <TouchableOpacity
            onPress={() => { LibEditbox.show('Catatan', props?.notes, 'default', (notes) => { props?.changeNotes(props?.idx_merchant, props?.idx, notes) }) }}
            style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 10 }} >
            <LibIcon.AntDesign name='edit' size={12} color={'#999'} />
            <LibTextstyle textStyle='caption2' text={props?.notes || 'Tidak ada catatan'} style={{ color: '#999', marginLeft: 10 }} />
          </TouchableOpacity>
          <View style={styleId_Zrz44M} >
            <TouchableOpacity
              style={{ borderRadius: 10, height: 20, width: 20, borderWidth: 1, borderColor: "#ccc" }}
              onPress={subQty} hitSlop={styleId_Z2qRWka} >
              <LibIcon name='minus-circle' color={"#ccc"} size={18} />
            </TouchableOpacity>
            <View style={styleId_15dJmg} >
              <LibTextstyle text={LibUtils.number(props?.qty)} textStyle="caption1" />
            </View>
            <TouchableOpacity
              style={{ borderRadius: 10, height: 20, width: 20, borderWidth: 1, borderColor: "#ccc" }}
              onPress={addQty} hitSlop={styleId_Z2qRWka} >
              <LibIcon name='plus' color={"#ccc"} size={18} />
            </TouchableOpacity>
          </View>
        </View>
        <View style={styleId_Z3STOu} >
          <View style={styleId_ZcMJmd} />
          <LibTextstyle text={LibUtils.money(props?.subtotal_price, props?.currency)} textStyle="caption1" style={styleId_1Mru9r} />
        </View>
      </View> */}

    </View>
  )
}

export default function m(props: MarketCart_itemProps): any {

  function renderProductItem(x: any, i: number) {
    return (
      <Product
        key={i}
        {...x}
        idx={i}
        idx_merchant={props?.idx}
        currency={props?.currency}
        changeQty={props?.changeQty}
        changeNotes={props?.changeNotes}
        deleteProduct={props?.deleteProduct}
        checkProduct={props?.checkProduct} />
    )
  }

  return (
    <>
      <View style={styleId_1RMb7x}>
        {/* <TouchableOpacity style={{ width: 15, height: 15, borderRadius: 3, backgroundColor: '#fff', borderStyle: "solid", borderWidth: 1, borderColor: "#d1d1d1" }} /> */}
        {
          props?.products?.some?.((x) => x?.disabled == 0) &&
          <TouchableOpacity onPress={() => props?.checkMerchant(props?.idx, props?.check == 1 ? 0 : 1)} style={styleId_Z1j4pPu} >
            {
              // props?.products.some((x) => x.disabled == 0) ?
              <LibIcon name={props?.check == 1 ? "checkbox-marked-circle-outline" : "checkbox-blank-circle-outline"} color={props?.check == 1 ? MarketStyle.colorGreen : "#bbb"} />
              // :
              // <LibIcon name={"close-circle-outline"} color={"#bbb"} />
            }
          </TouchableOpacity>
        }
        <TouchableOpacity onPress={() => LibNavigation.navigate<MarketMerchant_detailArgs>('market/merchant_detail', { url: 'shop/merchant_detail/' + props?.merchant.id })} style={styleId_104UKR} >
          <LibPicture source={{ uri: props?.merchant?.image }} style={styleId_18pFre} resizeMode="cover" />
          <View style={styleId_ZkwSed}>
            <Text allowFontScaling={false} style={styleId_Z1dSilI}>{props?.merchant?.title}</Text>
            <View style={styleId_Z2kirXg}>
              <LibIcon name="map-marker" size={12} color="#d1d1d1" />
              <Text allowFontScaling={false} style={styleId_Z163Hi1}>{props?.merchant?.location_name}</Text>
            </View>
          </View>
        </TouchableOpacity>
      </View>
      {/* <View style={styleId_Z2a57Qq} >
        <TouchableOpacity onPress={() => props?.checkMerchant(props?.idx, props?.check == 1 ? 0 : 1)} style={styleId_Z1j4pPu} >
          <LibIcon name={props?.check == 1 ? "checkbox-marked-circle-outline" : "checkbox-blank-circle-outline"} color={props?.check == 1 ? MarketStyle.colorGreen : "#bbb"} />
        </TouchableOpacity>
        <View style={styleId_1KxIIo} >
          <LibTextstyle text={props?.merchant.title} textStyle={'callout'} />
        </View>
        <View style={styleId_ZcMJmd} />
        <TouchableOpacity onPress={() => LibDialog.warningConfirm("Hapus " + props?.merchant.title + " ?", "Tindakan ini tidak bisa dibatalkan", "HAPUS", () => {
          props?.deleteMerchant(props?.idx)
        }, "BATALKAN", () => { })} >
          <View style={styleId_Z1pnPHV} >
            <LibTextstyle text={"Hapus"} textStyle={'caption1'} style={styleId_Z25PwrP} />
          </View>
        </TouchableOpacity>
      </View> */}
      {
        props?.products?.map?.(renderProductItem)
      }
      <MarketSection_menu size="small" />
    </>
  )
}
const styleId_Z1czirB: any = { backgroundColor: "white" }
const styleId_2hNwds: any = { flex: 1, marginHorizontal: 17, marginTop: 10, marginBottom: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'flex-start' }
const styleId_Z1j4pPu: any = { padding: 10, paddingRight: 0, minHeight: 40, justifyContent: 'center' }
const styleId_1Y0G78: any = { marginLeft: 15, width: 50, height: 50, borderRadius: 4 }
const styleId_ZEsO9f: any = { marginLeft: 15, flex: 2 }
const styleId_Z17LdUb: any = { fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#707070", flexWrap: 'wrap' }
const styleId_Z1pvJHL: any = { flexDirection: 'row', flexWrap: 'wrap', marginTop: 4 }
const styleId_1rgcuB: any = { color: "#999", backgroundColor: '#f1f2f3', paddingHorizontal: 3, paddingVertical: 2, borderRadius: 3 }
const styleId_Zrzc5a: any = { flexDirection: 'row', alignItems: 'center', marginTop: 4 }
const styleId_DUaMs: any = { textDecorationLine: 'line-through', fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 16, letterSpacing: 0, textAlign: "left", color: "#999", marginRight: 5 }
const styleId_ZCaqEs: any = { fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 16, letterSpacing: 0, textAlign: "left", color: "#03192a" }
const styleId_Qtdaz: any = { color: LibStyle.colorRed, marginTop: 5 }
const styleId_2fAOom: any = { flexDirection: 'row', alignItems: 'center', marginVertical: 10 }
const styleId_Z1Opfu2: any = { color: '#999', marginLeft: 10 }
const styleId_Zrz44M: any = { flexDirection: 'row', alignItems: 'center', marginTop: 5 }
const styleId_23m1yA: any = { borderRadius: 10, height: 20, width: 20 }
const styleId_Z2qRWka: any = { top: 10, left: 10, right: 10, bottom: 10 }
const styleId_15dJmg: any = { paddingHorizontal: 10, margin: 1, padding: 2, borderRadius: 2, alignItems: 'center', backgroundColor: "white" }
const styleId_Z1IS0fI: any = { flexDirection: 'row' }
const styleId_Zkxxg6: any = { marginLeft: 10 }
const styleId_Z20jOK9: any = { flexDirection: 'row', alignItems: 'flex-start', borderBottomColor: "white", borderBottomWidth: 1 }
const styleId_1Apyol: any = { padding: 10, paddingRight: 0 }
const styleId_Zhb5x9: any = { height: 40, width: 40, backgroundColor: "#f1f2f3" }
const styleId_Z1JkUNA: any = { padding: 10, flex: 1, minHeight: 40, justifyContent: 'center' }
const styleId_15VF73: any = { marginTop: 5, color: "#888" }
const styleId_Z3STOu: any = { justifyContent: "center" }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_1Mru9r: any = { marginBottom: 12, textAlign: "right", marginRight: 17, fontWeight: "bold" }
const styleId_1RMb7x: any = { marginHorizontal: 17, flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginTop: 10 }
const styleId_104UKR: any = { flexDirection: "row", alignItems: 'center' }
const styleId_18pFre: any = { marginLeft: 15, width: 20, height: 20 }
const styleId_ZkwSed: any = { marginLeft: 15 }
const styleId_Z1dSilI: any = { fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", lineHeight: 13, letterSpacing: 0, textAlign: "left", color: "#03192a" }
const styleId_Z2kirXg: any = { flexDirection: 'row', marginTop: 4, alignContent: 'center', alignItems: 'center' }
const styleId_Z163Hi1: any = { fontFamily: "Arial", fontSize: 8, fontWeight: "normal", fontStyle: "normal", lineHeight: 16, letterSpacing: 0, textAlign: "center", color: "#d1d1d1" }
const styleId_Z2a57Qq: any = { flexDirection: 'row', alignItems: 'center', backgroundColor: "white", }
const styleId_1KxIIo: any = { padding: 10 }
const styleId_Z1pnPHV: any = { backgroundColor: LibUtils.hexToRgba('#FD2C01', 0.1), padding: 3, paddingHorizontal: 5, borderRadius: 3, marginRight: 10 }
const styleId_Z25PwrP: any = { color: '#FD2C01' }