// withHooks
import { applyStyle } from 'esoftplay';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventMessage } from 'esoftplay/cache/event/message/import';
import { EventOrder_item } from 'esoftplay/cache/event/order_item/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/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 { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import useGlobalSubscriber, { UseSubscribeReturn } from 'esoftplay/subscribe';
import { useEffect } from 'react';

import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
import { LibAutoreload } from 'esoftplay/cache/lib/autoreload/import';
import useSafeState from 'esoftplay/state';
import React, { useRef } from 'react';
import { Pressable, Text, View } from 'react-native';


export interface EventOrder_waitingArgs {

}
export interface EventOrder_waitingProps {

}
const subs = useGlobalSubscriber()
export function subscribe(): UseSubscribeReturn {
  return subs
}

export default function m(props: EventOrder_waitingProps): any {
  const ref = useRef<LibInfinite>(null)
  const [counter, setCounter] = useSafeState(1)

  useEffect(() => {
    return () => LibAutoreload.clear()
  }, [])

  function renderItem(item: any, i: number) {
    if (item?.is_multi == 1) {
      return (
        <Pressable onPress={() => {
          LibNavigation.navigate('event/order_detail_waiting', { url: item.url })
        }} style={{ margin: 15, marginBottom: 5, marginTop: 10 }}>
          <View style={{ ...LibStyle.elevation(2), overflow: 'hidden', borderRadius: 10, backgroundColor: '#fff' }}>
            <View style={{ padding: 10, backgroundColor: '#fff', flex: 1 }}>
              <Text allowFontScaling={false} style={applyStyle({ marginHorizontal: 15, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{item?.event_name}</Text>

              <View style={applyStyle({ marginHorizontal: 15, marginTop: 15 })}>
                <View style={{ flexDirection: 'row', marginBottom: 10 }}>
                  <View style={applyStyle({ width: 60, height: 60, borderRadius: 5, backgroundColor: LibStyle.colorBgGrey, ...LibStyle.elevation(2) })}>
                    <LibPicture style={applyStyle({ width: 60, height: 60, resizeMode: 'cover', borderRadius: 5, })} source={{ uri: item?.image }} />
                  </View>
                  <View style={applyStyle({ flexDirection: 'row', justifyContent: 'space-between', marginLeft: 14, flex: 1 })}>
                    <View style={{ flex: 2, marginRight: 5, }}>
                      <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 4 }}>
                        <LibIcon name='ticket' size={20} color="#9b9b9b" />
                        {
                          Number(item?.qty) == 0 ?
                            <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{esp.lang("event/order_item", "ticket_run_out")}</Text>
                            : <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 16, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{esp.lang("event/order_item", "ticket", LibUtils.number(item?.prices?.reduce((total: any, ticket: any) => total + parseInt(ticket.qty, 10), 0)))}</Text>
                        }
                      </View>
                      <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 4 }}>
                        <LibIcon name='cash' size={20} color="#9b9b9b" />
                        <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{item?.total != "0" ? LibUtils.money(Number(item?.total), item.currency) : esp.lang("event/order_item", "free")}</Text>
                      </View>

                    </View>
                  </View>
                </View>

                {
                  item?.address != "" &&
                  <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 10 }}>
                    <LibIcon name='map-marker' size={18} color="#9b9b9b" />
                    <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{item?.address}</Text>
                  </View>
                }
              </View>
            </View>
            {
              item?.status == 0 ?
                <View style={applyStyle({ marginHorizontal: 25, marginBottom: 10, flex: 1, borderTopColor: "#000", borderTopWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', alignContent: 'center' })}>
                  <View style={{ flex: 1 }}>
                    <EventCountdown_base expired={LibUtils.moment(item?.exp_payment).serverFormat('YYYY-MM-DD HH:mm:ss', item?.timezone)} timezone={item?.timezone} style={applyStyle({ fontSize: 12, color: LibStyle.colorRed, fontFamily: "ArialBold", fontWeight: "normal", fontStyle: "normal" })} />
                  </View>
                  {
                    !!item?.booking_code &&
                    <Text allowFontScaling={false} style={applyStyle({ flex: 1, flexWrap: 'wrap', padding: 10, paddingHorizontal: 0, textAlign: 'right', fontFamily: "ArialBold", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed })}>{item?.booking_code}</Text>
                  }
                </View>
                :
                <Text allowFontScaling={false} style={applyStyle({ padding: 10, paddingBottom: 0, textAlign: 'center', textAlignVertical: 'center', fontFamily: "ArialBold", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 4, color: item?.status == 1 ? '#70472b' : LibStyle.colorRed })}>{item?.booking_code}</Text>
            }
          </View>
          <>
            <View style={{ ...LibStyle.elevation(2), marginHorizontal: 15, opacity: 0.7, backgroundColor: '#f1f1f1', height: 7, borderBottomLeftRadius: 5, borderBottomRightRadius: 5 }} />
            {
              item?.list?.length > 2 &&
              <View style={{ ...LibStyle.elevation(2), marginHorizontal: 30, opacity: 0.7, backgroundColor: '#f5f5f5', height: 7, borderBottomLeftRadius: 5, borderBottomRightRadius: 5 }} />
            }
          </>
        </Pressable>
      )
    } else {
      return (
        <EventOrder_item key={i} item={item} onPress={() => {
          LibNavigation.navigate('event/order_detail_waiting', { url: item.url })
        }} />
      )
    }

  }

  subs.useSubscribe(() => {
    ref.current?.loadData?.()
  })

  LibAutoreload.set(() => {
    setCounter(counter + 1)
  }, 6000)

  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title={esp.lang("event/order_waiting", "title")} />
      <LibInfinite
        ref={ref}
        // isDebug={1}
        key={counter}
        url={'event_order_waiting'}
        errorView={(err: any) => (
          <EventMessage message={err} />
        )}
        renderItem={renderItem}
      />
    </View>
  )
}