// withHooks
import { EventCounter_eoProperty } from 'esoftplay/cache/event/counter_eo/import';
import { EventCounter_history_item } from 'esoftplay/cache/event/counter_history_item/import';
import { EventCounter_info } from 'esoftplay/cache/event/counter_info/import';
import { EventCounter_menu } from 'esoftplay/cache/event/counter_menu/import';
import { EventCounter_section } from 'esoftplay/cache/event/counter_section/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventInput_rectangle } from 'esoftplay/cache/event/input_rectangle/import';
import { EventPopup } from 'esoftplay/cache/event/popup/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import React, { useEffect, useRef } from 'react';
import { Pressable, RefreshControl, ScrollView, Text, View } from 'react-native';


export interface EventCounter_cashierArgs {

}
export interface EventCounter_cashierProps {

}
export default function m(props: EventCounter_cashierProps): any {
  const { is_seller } = LibNavigation.getArgsAll(props)
  const dialogAdd = useRef<LibSlidingup>(null)
  const dialogUser = useRef<LibSlidingup>(null)

  const [email, setEmail] = useSafeState<string>('')

  const [result, setResult] = useSafeState<any>()
  const [refreshing, setRefreshing] = useSafeState<boolean>(false);

  useEffect(() => {
    loadData()
  }, [])

  function loadData() {
    new LibCurl('event_seller_home?event_id=' + is_seller?.id, null, (res, msg) => {
      setResult(res)
      setRefreshing(false)
    }, (error) => {
      LibDialog.warning(esp.lang("event/counter_cashier", "load_failed"), error?.message)
      LibNavigation.back()
      setRefreshing(false)
    }, 1)
  }

  function onRefresh() {
    setRefreshing(true)
    loadData()
  }

  function addLM() {
    let post = {
      event_id: is_seller?.id,
      email: email.trim()
    }

    LibDialog.confirm(esp.lang("event/counter_cashier", "add_title"), esp.lang("event/counter_cashier", "add_msg"), esp.lang("event/counter_cashier", "add_confirm"), () => {
      new LibCurl('event_seller_edit', post, (res, msg) => {
        LibDialog.info(esp.lang("event/counter_cashier", "add_success"), msg)
        loadData()
        dialogUser.current?.hide()
      }, (error) => {
        LibDialog.warning(esp.lang("event/counter_cashier", "add_failed"), error?.message)
        dialogUser.current?.hide()
      }, 1)
    }, esp.lang("event/counter_cashier", "add_cancel"), () => { })

  }


  if (!result) {
    return (
      <LibLoading />
    )
  }

  function renderMoneyRequest(item: any, i: number) {
    return (
      <View style={styleId_ZEwY6z}>
        <EventCounter_history_item item={item} is_ticket={false} onPress={() => LibNavigation.navigate('event/counter_request_detail', { url: item.url, status_user: 3 })} />
      </View>
    )
  }

  function renderTicketRequest(item: any, i: number) {
    return (
      <View style={styleId_ZEwY6z}>
        <EventCounter_history_item item={item} is_ticket={true} onPress={() => LibNavigation.navigate('event/counter_request_detail', { url: item.url, status_user: 3 })} />
      </View>
    )
  }


  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <EventHeader title={esp.lang("event/counter_cashier", "header_title")} subtitle={is_seller?.name} bgColor={"#6A0740"} titleColor="#fff" notif />
      {/* status_user 1 EO, 2 LM, 3 Seller */}
      <EventCounter_menu colorTheme={"#6A0740"} event_id={is_seller?.id} status_user={3} />
      <ScrollView style={{ marginTop: -20, backgroundColor: "#EEF1F8", borderTopLeftRadius: 15, borderTopRightRadius: 15 }} refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }>
        <Pressable onPress={() => LibNavigation.navigate('event/counter_cashier_report')} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', padding: 10, paddingHorizontal: 15, margin: 15, marginBottom: -10, borderRadius: 15, backgroundColor: '#fff', ...LibStyle.elevation(3) }}>
          <Text allowFontScaling={false}>{esp.lang("event/counter_cashier", "sell_report")}</Text>
          <LibIcon name='chevron-right' />
        </Pressable>

        {/* active balance */}
        <EventCounter_info colorTheme={"#6A0740"} amount={result?.money} ticket={result?.ticket} event_id={is_seller?.id} status_user={3} />

        {/* request */}
        {
          result?.money_request?.length > 0 &&
          <EventCounter_section icon="chevron-right-circle" onPress={() => { LibNavigation.navigate('event/counter_request', { event_id: is_seller?.id, status_user: 3 }) }} title={esp.lang("event/counter_cashier", "money")} />
        }
        {
          result?.money_request?.length > 0 && result?.money_request?.map(renderMoneyRequest)
        }

        {
          result?.ticket_request?.length > 0 &&
          <EventCounter_section icon="chevron-right-circle" onPress={() => { LibNavigation.navigate('event/counter_request', { event_id: is_seller?.id, status_user: 3 }) }} title={esp.lang("event/counter_cashier", "ticket")} />
        }
        {
          result?.ticket_request?.length > 0 && result?.ticket_request?.map(renderTicketRequest)
        }

      </ScrollView>

      <LibSlidingup ref={dialogAdd}>
        <View style={{ backgroundColor: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20 }}>
          <View style={{ height: 4, width: 32, borderRadius: 2, backgroundColor: "#C6C6C6", marginTop: 10, marginBottom: 10, alignSelf: 'center' }} />
          <View style={{ margin: 15 }}>
            <EventInput_rectangle
              autoCapitalize="none"
              onChangeText={setEmail}
              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8, borderRadius: 15, }}
              placeholder={esp.lang("event/counter_cashier", "email")}
              keyboardType="email-address"
              onSubmitEditing={() => {
                if (EventCounter_eoProperty.checkEmail(email.trim())) {
                  dialogAdd.current?.hide()
                  dialogUser.current?.show()
                }
              }}
            />
            <EventButton label={esp.lang("event/counter_cashier", "next")} style={{ borderRadius: 15, marginTop: 20 }} backgroundColor={email == "" ? LibStyle.colorGrey : "#6A0740"} onPress={() => {
              if (EventCounter_eoProperty.checkEmail(email.trim())) {
                dialogAdd.current?.hide()
                dialogUser.current?.show()
              }
            }} />
          </View>
        </View>
      </LibSlidingup>

      <LibSlidingup ref={dialogUser}>
        <View style={{ backgroundColor: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20 }}>
          <View style={{ height: 4, width: 32, borderRadius: 2, backgroundColor: "#C6C6C6", marginTop: 10, marginBottom: 10, alignSelf: 'center' }} />
          <EventPopup email={email.trim()} redirect={() => {
            addLM()
          }} cancel={() => {
            dialogUser.current?.hide()
          }} />
        </View>
      </LibSlidingup>

    </View >
  )
}
const styleId_ZEwY6z: any = { margin: 15, marginTop: 0, borderRadius: 15, backgroundColor: '#fff', overflow: 'hidden' }