// withHooks
// noPage

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibList } from 'esoftplay/cache/lib/list/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/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 { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketCart_offlineProperty } from 'esoftplay/cache/market/cart_offline/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';

import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
import React, { useRef } from 'react';
import { TouchableOpacity, View } from 'react-native';


export interface MarketCart_offlineProps {

}
export interface MarketCart_offlineItem {
  id: string,
  name: string,
  image: string,
  price: string,
  merchant_name: string,
  merchant_id: string,
  notes: string,
  qty: number,
  qty_max: number,
  price_id: string
}

const _state = useGlobalState<MarketCart_offlineItem[]>([], { persistKey: 'market_cart_offline' })
export function state(): useGlobalReturn<MarketCart_offlineItem[]> {
  return _state
}
const _show = useGlobalState<boolean>(false)
export function showState(): useGlobalReturn<boolean> {
  return _show
}

export function addTo(data: MarketCart_offlineItem): void {
  let carts = _state.get()
  let productExist = carts.findIndex((x) => x.id == data.id && x.price_id == data.price_id && x.merchant_id == data.merchant_id)
  if (productExist > -1) {
    let newProduct = carts[productExist]
    newProduct.qty = newProduct.qty + data.qty
    carts[productExist] = newProduct
  } else {
    carts.unshift(data)
  }
  _state.set(carts)
  _show.set(true)
}

export default function m(props: MarketCart_offlineProps): any {
  const [cart, setCart] = MarketCart_offlineProperty.state().useState()
  const [show, setShow] = MarketCart_offlineProperty.showState().useState()
  let last_merchant_id = useRef<string>('').current


  function addQty(index: number) {
    setCart(LibObject.update(cart, (qty) => qty + 1)(index, 'qty'))
  }

  function minQty(index: number) {
    setCart(LibObject.update(cart, (qty) => qty == 1 ? 1 : qty - 1)(index, 'qty'))
  }

  function changeNotes(text: string, index: number) {
    setCart(LibObject.set(cart, text)(index, 'notes'))
  }

  function deleteProduct(index: number) {
    setCart(cart.filter((x, i) => i != index))
  }
  function deleteMerchant(merchant_id: string) {
    setCart(cart.filter((x, i) => x.merchant_id != merchant_id))
  }

  esp.log(cart);

  if (!show)
    return null
  return (
    <TouchableOpacity activeOpacity={1} onPress={() => setShow(false)} style={styleId_ZFUjbt} >
      <TouchableOpacity activeOpacity={1} onPress={() => { }} style={styleId_13lA92} >
        <View style={styleId_Z1ja9Kf} >
          <LibTextstyle textStyle='headline' text={esp.lang("market/cart_offline", "temp_cart")} style={styleId_ZcMJmd} />
          <TouchableOpacity onPress={() => setShow(false)} >
            <LibIcon name="close-circle" />
          </TouchableOpacity>
        </View>
        <LibList
          data={cart}
          renderItem={(cart: MarketCart_offlineItem, i) => {
            let adder = undefined
            if (last_merchant_id != cart.merchant_id) {
              adder = <LibTextstyle textStyle="callout" text={cart.merchant_name} style={styleId_Z27iAru} />
              last_merchant_id = cart.merchant_id
            }
            return (
              <>
                {adder}
                <View style={styleId_23xzdi} >
                  <LibPicture source={{ uri: cart.image }} style={styleId_13XpkF} />
                  <View style={{ marginLeft: 10 }} >
                    <LibTextstyle textStyle="callout" text={cart.name} />
                    <LibTextstyle textStyle="footnote" text={'@' + LibUtils.money(cart.price)} />
                    <View style={{ flexDirection: 'row', alignItems: 'center' }} >
                      <TouchableOpacity onPress={() => minQty(i)} >
                        <LibIcon name="minus-circle-outline" />
                      </TouchableOpacity>
                      <LibTextstyle textStyle="footnote" text={LibUtils.number(cart.qty)} style={styleId_Z27jvu8} />
                      <TouchableOpacity onPress={() => addQty(i)} >
                        <LibIcon name="plus-circle-outline" />
                      </TouchableOpacity>
                    </View>
                  </View>
                </View>
                <MarketSection_menu size="line" />
              </>
            )
          }}
        />
        <MarketButton
          text={esp.lang("market/cart_offline", "login")}
          buttonStyle={styleId_1lOprH}
          onPress={() => LibNavigation.navigate('user/login')}
        />
      </TouchableOpacity>
    </TouchableOpacity>
  )
}
const styleId_ZFUjbt: any = { flex: 1, position: 'absolute', backgroundColor: 'rgba(0,0,0,0.5)', top: 0, left: 0, right: 0, bottom: 0 }
const styleId_13lA92: any = { flex: 1, position: 'absolute', top: LibStyle.height * 0.2, left: 17, right: 17, bottom: LibStyle.height * 0.2, backgroundColor: 'white', borderRadius: 13, ...LibStyle.elevation(30) }
const styleId_Z1ja9Kf: any = { flexDirection: 'row', paddingHorizontal: 17, paddingVertical: 10, alignItems: 'center', backgroundColor: MarketStyle.colorPrimaryMarket, borderTopLeftRadius: 13, borderTopRightRadius: 13 }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_Z27iAru: any = { marginHorizontal: 17 }
const styleId_23xzdi: any = { marginHorizontal: 17, marginVertical: 10, marginBottom: 0, flexDirection: 'row' }
const styleId_13XpkF: any = { width: 60, height: 60 }
const styleId_Z27jvu8: any = { marginHorizontal: 10 }
const styleId_1lOprH: any = { marginHorizontal: 17, marginVertical: 10 }