// withHooks
import { applyStyle } from 'esoftplay';
import { EventCounter_eoProperty } from 'esoftplay/cache/event/counter_eo/import';
import { EventCounter_user_list_item } from 'esoftplay/cache/event/counter_user_list_item/import';
import { LibCollaps } from 'esoftplay/cache/lib/collaps/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 { LibList } from 'esoftplay/cache/lib/list/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 { LibUtils } from 'esoftplay/cache/lib/utils/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 { EventMessage } from 'esoftplay/cache/event/message/import';
import { EventPopup } from 'esoftplay/cache/event/popup/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import React, { useEffect, useRef } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface EventCounter_user_listArgs {

}
export interface EventCounter_user_listProps {

}
export default function m(props: EventCounter_user_listProps): any {
  const { event_id, is_navResult, status_user, is_ticket } = LibNavigation.getArgsAll(props)
  const dialogAdd = useRef<LibSlidingup>(null)
  const dialogUser = useRef<LibSlidingup>(null)
  const [result, setResult] = useSafeState<any>()
  const [error, setError] = useSafeState<any>()

  const [email, setEmail] = useSafeState<string>('')
  const [counter, setCounter] = useSafeState<number>(1)

  let url = status_user == 1 ? "event_eo_receiver?event_id=" + event_id + "&is_ticket=" + (is_ticket == 2 ? 1 : 0) : status_user == 2 ? "event_manager_receiver?event_id=" + event_id + "&is_ticket=" + (is_ticket == 2 ? 1 : 0) : "event_seller_receiver?event_id=" + event_id + "&is_ticket=" + (is_ticket == 2 ? 1 : 0)

  useEffect(() => {
    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
  }, [])

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

  function loadData() {
    new LibCurl(url, null, (res, msg) => {
      setResult(res)
    }, (err) => {
      setError(err)
      // LibDialog.warning("Oops", err)
    }, 1)
  }

  function addLM() {
    let post = {
      event_id: event_id,
      email: email
    }

    LibDialog.confirm(esp.lang("event/counter_user_list", "add_lm_title"), esp.lang("event/counter_user_list", "add_lm_msg"), esp.lang("event/counter_user_list", "add_lm_confirm"), () => {
      new LibCurl('event_manager_edit', post, (res, msg) => {
        setCounter(counter + 1)
        LibDialog.info(esp.lang("event/counter_user_list", "add_lm_ok"), msg)
        dialogUser.current?.hide()
      }, (error) => {
        LibDialog.warning(esp.lang("event/counter_user_list", "add_lm_no"), error?.message)
        dialogUser.current?.hide()
      }, 1)
    }, esp.lang("event/counter_user_list", "add_lm_cancel"), () => { })

  }

  function deleteLM(_email: string) {
    let post = {
      event_id: event_id,
      email: _email
    }

    LibDialog.confirm(esp.lang("event/counter_user_list", "delete_lm_title"), esp.lang("event/counter_user_list", "delete_lm_msg"), esp.lang("event/counter_user_list", "delete_lm_confirm"), () => {
      new LibCurl('event_manager_delete', post, (res, msg) => {
        setCounter(counter + 1)
        LibDialog.info(esp.lang("event/counter_user_list", "delete_lm_ok"), msg)
      }, (error) => {
        LibDialog.warning(esp.lang("event/counter_user_list", "delete_lm_no"), error?.message)
      }, 1)
    }, esp.lang("event/counter_user_list", "delete_lm_cancel"), () => { })
  }

  function renderUser(item2: any, i2: number) {
    return (
      <EventCounter_user_list_item {...item2} key={i2} onSelect={() => {
        if (is_navResult) {
          LibNavigation.sendBackResult(item2)
        } else {

        }
      }} showDelete={is_navResult ? false : true} onDelete={() => deleteLM(item2.email)} />
    )
  }

  function renderItem(item: any, i: number) {
    if (item?.list_user?.length > 0) {
      return (
        <LibCollaps
          header={(show) =>
            <View style={applyStyle({ marginTop: 16, marginLeft: 15, marginRight: 15, marginBottom: 5, padding: 16, justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', flexDirection: 'row', borderRadius: 15, backgroundColor: '#fff', ...LibStyle.elevation(2) })}>
              <Text allowFontScaling={false} style={applyStyle({ flex: 1, fontFamily: "Arial", fontSize: 16, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{item.title}</Text>
              <LibIcon name={!show ? "chevron-down" : "chevron-up"} />
            </View>
          } >
          {
            item?.list_user?.map(renderUser)
          }
        </LibCollaps>
      )
    } else {
      return null
    }
  }

  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title={esp.lang("event/counter_user_list", "header_title")} subtitle={status_user == 1 ? esp.lang("event/counter_user_list", "sub_eo") : status_user == 2 ? esp.lang("event/counter_user_list", "sub_lm") : esp.lang("event/counter_user_list", "sub_cashier")} />

      <LibList
        data={result}
        ListHeaderComponent={
          <View style={{ opacity: is_navResult ? 0 : 1, flexDirection: 'row', justifyContent: 'space-between', margin: 15, marginTop: is_navResult ? -10 : 0, marginBottom: 0 }}>
            <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 16 }}>{esp.lang("event/counter_user_list", "locket_manager")}</Text>
            <TouchableOpacity onPress={() => dialogAdd.current?.show()}>
              <LibIcon name="plus-circle" color="#717171" />
            </TouchableOpacity>
          </View>
        }
        ListEmptyComponent={() => {
          if (error) {
            return (
              <View style={{ margin: 15, borderRadius: 15, marginBottom: 0, backgroundColor: '#fff', overflow: 'hidden' }}>
                <EventMessage message={error?.message} />
              </View>
            )
          } else {
            return (
              <View style={{ flex: 1, height: LibStyle.height - (LibStyle.STATUSBAR_HEIGHT + 60), alignContent: 'center', alignItems: 'center', alignSelf: 'center', justifyContent: 'center' }}>
                <LibLoading />
              </View>
            )
          }
        }}
        renderItem={renderItem}
      />

      <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={(t) => {
                LibUtils.debounce(() => {
                  setEmail(t)
                }, 500)
              }}
              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8, borderRadius: 15, }}
              placeholder={esp.lang("event/counter_user_list", "input_email")}
            />
            <EventButton label={esp.lang("event/counter_user_list", "btn_save")} style={{ borderRadius: 15, marginTop: 20 }} backgroundColor={LibStyle.colorGreen} onPress={() => {
              if (EventCounter_eoProperty.checkEmail(email)) {
                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>
  )
}