// withHooks

import { applyStyle } from 'esoftplay';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import React, { useRef } from 'react';
import { Pressable, Text, View } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';


export interface EventCounter_cashier_reportArgs {

}
export interface EventCounter_cashier_reportProps {

}

export default function m(props: EventCounter_cashier_reportProps): any {
  const is_seller = UserClass?.state?.()?.get()?.is_seller?.[0]
  let dialogOtherTicket = useRef<LibSlidingup>(null)

  const [codes, setCodes] = useSafeState<any>()
  const [totalTrx, setTotalTrx] = useSafeState<any>()

  function renderItem(item: any, i: number) {
    return (
      <Pressable onPress={() => { }} style={applyStyle({ padding: 10, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomColor: "#EEF1F8", borderBottomWidth: 1 })}>
        <View style={applyStyle({ flex: 3 })}>
          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
            <Text allowFontScaling={false} style={applyStyle({ flex: 1, fontSize: 16, color: LibStyle.colorBlue })}>#{item?.booking_code}</Text>
            {
              item?.hasOwnProperty("price_name") && item?.price_name != "" &&
              <Text allowFontScaling={false} style={{ flex: 1, textAlign: 'right', fontSize: 13 }}>{item?.price_name} {item?.ondate != "0000-00-00" && "- " + LibUtils.moment(item?.ondate).localeFormat("D MMM YYYY")}</Text>
            }

          </View>
          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
            <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, lineHeight: 18 })}>Code : {item?.code[0]} {item?.code?.length > 1 ? ",   " : ""}</Text>
            {
              item?.code?.length > 1 &&
              <Pressable onPress={() => {
                setCodes(item?.code)
                LibUtils.debounce(() => {
                  dialogOtherTicket?.current?.show()
                }, 100)
              }}>
                <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", textDecorationLine: 'underline', fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue }}>{esp.lang("event/counter_cashier_report", "other", Number(item?.code?.length - 1).toString())}</Text>
              </Pressable>
            }
          </View>

          <View style={{ marginTop: 5, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
            <Text allowFontScaling={false} style={{ flex: 1, }}>{item.qty} Tiket</Text>
            <Text allowFontScaling={false} style={{ flex: 1, textAlign: 'right', }}>{LibUtils?.money(item?.total)}</Text>
          </View>
          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
            <LibIcon name='cash' color='green' size={30} />
            <Text allowFontScaling={false} style={{ marginLeft: 8 }}>{item?.payment_title}</Text>
          </View>
          <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, color: "#797979" })}>{LibUtils.moment(item?.created).serverFormat("DD MMMM YYYY hh:mm:ss")}</Text>

        </View>
      </Pressable>
    )
  }

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <EventHeader title={esp.lang("event/counter_cashier_report", "header_title")} subtitle={is_seller?.name} bgColor={"#6A0740"} titleColor="#fff" notif />

      <LibInfinite
        url={'event_seller_ticket_sell_history?event_id=' + is_seller?.id}
        // isDebug={1}
        ListHeaderComponent={
          <View style={{ padding: 7, marginBottom: 10, borderBottomWidth: 1, borderBottomColor: LibStyle.colorPrimary, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
            <Text allowFontScaling={false} style={{ fontSize: 18 }}>{esp.lang("event/counter_cashier_report", "total_trx")}</Text>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <View style={{ backgroundColor: LibStyle.colorRed, height: 17, padding: 5, paddingVertical: 2, borderRadius: 10, alignContent: 'center', alignItems: 'center' }}>
                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, letterSpacing: 0, color: "#ffffff" }}>{totalTrx > 99 ? "99+" : String(totalTrx)}</Text>
              </View>
            </View>
          </View>
        }
        onResult={(res) => {
          setTotalTrx(res?.total)
        }}
        renderItem={renderItem}
      />
      <LibSlidingup ref={dialogOtherTicket}>
        <View style={{ backgroundColor: 'white', maxHeight: LibStyle.height - (LibStyle.height / 3), borderTopRightRadius: 20, borderTopLeftRadius: 20, padding: 20 }}>
          <ScrollView>
            <Text allowFontScaling={false} style={{ marginBottom: 23, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("event/counter_cashier_report", "list_code")}</Text>
            {
              codes?.map((item: any, i: number) => {
                return (
                  <View key={i} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', backgroundColor: LibStyle.colorBgGrey, padding: 10, marginBottom: 10, borderRadius: 5, flex: 1 }}>
                    <Text allowFontScaling={false} style={{ fontSize: 17, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#000', paddingLeft: 3, paddingRight: 3 }}>{item}</Text>
                  </View>
                )
              })
            }
          </ScrollView>
        </View>
      </LibSlidingup>
    </View>
  )
}