// withHooks
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 { EventCounter_user_list_item } from 'esoftplay/cache/event/counter_user_list_item/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibFocus } from 'esoftplay/cache/lib/focus/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 { LibToastProperty } from 'esoftplay/cache/lib/toast/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 { EventConfigProperty } from 'esoftplay/cache/event/config/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventInput_rectangle } from 'esoftplay/cache/event/input_rectangle/import';
import { EventLabel_input } from 'esoftplay/cache/event/label_input/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 { Pressable, RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventCounter_eoArgs {

}
export interface EventCounter_eoProps {

}

export function checkEmail(email: string) {
  if (email == '') {
    LibToastProperty.show(esp.lang("event/counter_eo", "empty_email"))
    return false
  }

  let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (reg.test(email) === false) {
    LibToastProperty.show(esp.lang("event/counter_eo", "invalid_email"));
    return false;
  }
  return true
}

export default function m(props: EventCounter_eoProps): any {
  const { is_eo } = LibNavigation.getArgsAll(props)
  const dialogAdd = useRef<LibSlidingup>(null)
  const dialogUser = useRef<LibSlidingup>(null)
  const dialogListLM = useRef<LibSlidingup>(null)
  const [eventConfig] = EventConfigProperty.state().useState()

  const [email, setEmail] = useSafeState<string>('')
  // result
  const [result, setResult] = useSafeState<any>()
  const [refreshing, setRefreshing] = useSafeState<boolean>(false);

  const [typeCashier, setTypeCashier] = useSafeState<any>();
  const [selectedLM, setSelectedLM] = useSafeState<any>();
  const [selectedTypeAdd, setSelectedTypeAdd] = useSafeState<any>({
    id: 1,
    title: esp.lang("event/counter_eo", "loket_manager")
  });

  useEffect(() => {
    EventConfigProperty.curlConfig('v2/config_event')
    loadData()
  }, [])

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

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

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

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

  }

  function deleteLM(_email: string) {
    let post = {
      event_id: is_eo?.id,
      email: _email.trim()
    }

    LibDialog.confirm(esp.lang("event/counter_eo", "delete_title"), esp.lang("event/counter_eo", "delete_msg"), esp.lang("event/counter_eo", "delete_confirm"), () => {
      new LibCurl('event_manager_delete', post, (res, msg) => {
        LibDialog.info(esp.lang("event/counter_eo", "delete_ok"), msg)
        loadData()
      }, (error) => {
        LibDialog.warning(esp.lang("event/counter_eo", "delete_fail"), error?.message)
      }, 1)
    }, esp.lang("event/counter_eo", "delete_cancel"), () => { })
  }

  function addCashier() {
    if (selectedTypeAdd.id == 2 && !typeCashier) {
      LibToastProperty.show(esp.lang("event/counter_eo", "select_cashier_first"))
      return
    }

    if (selectedTypeAdd.id == 2 && !selectedLM) {
      LibToastProperty.show(esp.lang("event/counter_eo", "empty_lm"))
      return
    }


    let post = {
      event_id: is_eo?.id,
      email: email.trim(),
      manager_id: selectedLM?.user_id,
      is_digital: typeCashier?.id
    }

    LibDialog.confirm(esp.lang("event/counter_eo", "cashier_title"), esp.lang("event/counter_eo", "cashier_msg"), esp.lang("event/counter_eo", "cashier_confirm"), () => {
      new LibCurl('event_seller_edit', post, (res, msg) => {
        LibDialog.info(esp.lang("event/counter_eo", "cashier_ok"), msg)
        loadData()
        dialogUser.current?.hide()
      }, (error) => {
        LibDialog.warning(esp.lang("event/counter_eo", "cashier_failed"), error?.message)
        dialogUser.current?.hide()
      }, 1)
    }, esp.lang("event/counter_eo", "cashier_cancel"), () => { })

  }

  function deleteCashier(_email: string) {
    let post = {
      event_id: is_eo?.id,
      email: _email.trim()
    }

    LibDialog.confirm(esp.lang("event/counter_eo", "delete_cashier_title"), esp.lang("event/counter_eo", "delete_cashier_msg"), esp.lang("event/counter_eo", "delete_cashier_confirm"), () => {
      new LibCurl('event_seller_delete', post, (res, msg) => {
        LibDialog.info(esp.lang("event/counter_eo", "delete_cashier_ok"), msg)
        loadData()
      }, (error) => {
        LibDialog.warning(esp.lang("event/counter_eo", "delete_cashier_failed"), error?.message)
      }, 1)
    }, esp.lang("event/counter_eo", "delete_cashier_cancel"), () => { })
  }

  let a = [
    {
      id: 1,
      title: esp.lang("event/counter_eo", "id1")
    },
    {
      id: 2,
      title: esp.lang("event/counter_eo", "id2")
    },
  ]

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

  function renderMoneyRequest(item: any, i: number) {
    return (
      <View key={i} style={styleId_ZEwY6z}>
        <EventCounter_history_item item={item} is_ticket={false} onPress={() => LibNavigation.navigate('event/counter_request_detail', { url: item.url, status_user: 1 })} />
      </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: 1 })} />
      </View>
    )
  }

  function renderManager(item: any, i: number) {
    return (
      <EventCounter_user_list_item
        {...item}
        showDelete={is_eo?.add_tms == 1 ? true : false}
        onDelete={() => {
          deleteLM(item.email)
        }}
        showSellers
        showDeleteSellers
        onDeleteSellers={(email: string) => {
          deleteCashier(email)
        }}
      />
    )
  }

  function renderItem(item: any, i: number) {
    return (
      <Pressable key={i} onPress={() => {
        setSelectedTypeAdd(item)
        setSelectedLM(undefined)
      }} style={{ flex: 1, padding: 7, backgroundColor: item.id == selectedTypeAdd?.id ? "#009AE4" : "#EEF1F8" }}>
        <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontWeight: item.id == selectedTypeAdd?.id ? "bold" : "normal", fontStyle: "normal", letterSpacing: 0, color: item.id == selectedTypeAdd?.id ? "#fff" : "#000" }}>{item.title}</Text>
      </Pressable>
    )
  }

  function renderListManage(item: any, i: number) {
    return (
      <EventCounter_user_list_item {...item} onSelect={() => {
        dialogListLM.current?.hide()
        setSelectedLM(item)
      }} />
    )
  }

  function renderTypeCashier(item: any, i: number) {
    const styleId_Z23v85x: any = { marginLeft: 5, flexWrap: 'wrap', fontFamily: 'SFProText', color: Number(item.debit) == 0 ? "#717171" : "#000" }
    const styleId_1eMW7i: any = { marginBottom: 5, marginTop: 5, marginRight: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center' }
    return (
      <Pressable key={i} onPress={() => {
        setTypeCashier(item)
      }} style={styleId_1eMW7i} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }}>
        <LibIcon name={item.id == typeCashier?.id ? "radiobox-marked" : "radiobox-blank"} color={item.id == typeCashier?.id ? "#009AE4" : "#000"} />
        <Text allowFontScaling={false} style={styleId_Z23v85x}>{item.title}</Text>
      </Pressable>
    )
  }

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <LibFocus onFocus={loadData} />
      <EventHeader title={esp.lang("event/counter_eo", "header_title")} subtitle={is_eo?.name} bgColor={"#009AE4"} titleColor="#fff" notif />
      {/* status_user 1 EO, 2 LM, 3 Seller */}
      {/* user_type kenapa 2, karena untuk menambahkan Loket Manager */}
      <EventCounter_menu colorTheme={"#009AE4"} event_id={is_eo?.id} user_type={2} status_user={1} />
      <ScrollView style={{ marginTop: -20, backgroundColor: "#EEF1F8", borderTopLeftRadius: 15, borderTopRightRadius: 15 }} refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }>

        {/* active balance */}
        <EventCounter_info colorTheme={"#009AE4"} amount={result?.money} ticket={result?.ticket} event_id={is_eo?.id} status_user={1} />

        {/* request */}

        {
          result?.money_request?.length > 0 &&
          <EventCounter_section icon="chevron-right-circle" onPress={() => { LibNavigation.navigate('event/counter_request', { event_id: is_eo?.id, status_user: 1 }) }} title={esp.lang("event/counter_eo", "recent_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_eo?.id, status_user: 1 }) }} title={esp.lang("event/counter_eo", "recent_ticket")} />
        }
        {
          result?.ticket_request?.length > 0 && result?.ticket_request?.map(renderTicketRequest)
        }

        {/* loket manager */}
        <EventCounter_section icon="plus-circle" onPress={() => {
          dialogAdd.current?.show()
          // initial state
          setSelectedTypeAdd({
            id: 1,
            title: esp.lang("event/counter_eo", "loket")
          })
          setSelectedLM(undefined)
        }} showIcon={is_eo?.add_tms == 1 ? true : false} title={esp.lang("event/counter_eo", "title_lm")} />

        {
          result?.manager?.map(renderManager)
        }

        {
          result?.manager?.length == 0 &&
          <View style={{ margin: 15, borderRadius: 15, marginTop: 0, backgroundColor: '#fff', overflow: 'hidden' }}>
            <EventMessage message={esp.lang("event/counter_eo", "empty_lm1")} />
          </View>
        }

        {
          result?.manager?.length > 9 &&
          <TouchableOpacity onPress={() => { LibNavigation.navigate('event/counter_user_list', { event_id: is_eo?.id, status_user: 1 }) }} style={{ marginTop: 15, justifyContent: 'center', alignSelf: 'center', width: 104, height: 23, borderRadius: 11.5, backgroundColor: "#fff", borderStyle: "solid", borderWidth: 1, borderColor: "#e1e1e1" }}>
            <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{esp.lang("event/counter_eo", "show_all")}</Text>
          </TouchableOpacity>
        }

      </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 }}>

            <View style={{ flexDirection: 'row', borderRadius: 15, overflow: 'hidden' }}>
              {
                a.map(renderItem)
              }
            </View>

            <EventLabel_input label={esp.lang("event/counter_eo", "label_email")} />

            <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_eo", "email")}
              keyboardType="email-address"
              onSubmitEditing={() => {
                if (checkEmail(email.trim())) {
                  if (selectedTypeAdd?.id == 2) {
                    if (!typeCashier) {
                      LibToastProperty.show(esp.lang("event/counter_eo", "select_cashier_first"))
                    } else if (!selectedLM) {
                      LibToastProperty.show(esp.lang("event/counter_eo", "lm_not_select"))
                    } else {
                      dialogAdd.current?.hide()
                      dialogUser.current?.show()
                    }
                  } else {
                    dialogAdd.current?.hide()
                    dialogUser.current?.show()
                  }
                }
              }}
            />


            {
              selectedTypeAdd?.id == 2 &&
              <View>
                <EventLabel_input label={esp.lang("event/counter_eo", "label_type")} />
                <View style={{ backgroundColor: '#fff', padding: 10, paddingLeft: 0, borderRadius: 15, marginBottom: 0, flexDirection: 'row', flexWrap: 'wrap' }}>

                  {
                    eventConfig?.event?.cashier_type?.map(renderTypeCashier)
                  }

                </View>
                {
                  selectedLM ?
                    <EventCounter_user_list_item
                      email={selectedLM?.email}
                      image={selectedLM?.image}
                      name={selectedLM?.name}
                      user_id={selectedLM?.user_id}
                      showChange
                      style={{ ...LibStyle.elevation(2), marginTop: 10, margin: 0 }}
                      onChange={() => {
                        dialogListLM.current?.show()
                      }}
                    />
                    :
                    <TouchableOpacity onPress={() => {
                      dialogListLM.current?.show()
                    }} style={{ ...LibStyle.elevation(2), marginTop: 10, backgroundColor: '#fff', padding: 10, borderRadius: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
                      <Text allowFontScaling={false} style={{ flexWrap: 'wrap', fontFamily: 'SFProText', fontWeight: 'bold' }}>{esp.lang("event/counter_eo", "select_lm")}</Text>
                      <LibIcon name={"chevron-right-circle-outline"} color="#009AE4" />
                    </TouchableOpacity>
                }
              </View>
            }

            <EventButton label={esp.lang("event/counter_eo", "btn_next")} style={{ borderRadius: 15, marginTop: 30 }} backgroundColor={email == "" ? LibStyle.colorGrey : "#009AE4"} onPress={() => {
              if (checkEmail(email.trim())) {
                if (selectedTypeAdd?.id == 2) {
                  if (!typeCashier) {
                    LibToastProperty.show(esp.lang("event/counter_eo", "select_cashier_first"))
                  } else if (!selectedLM) {
                    LibToastProperty.show(esp.lang("event/counter_eo", "lm_not_select"))
                  } else {
                    dialogAdd.current?.hide()
                    dialogUser.current?.show()
                  }
                } else {
                  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={() => {
            if (selectedTypeAdd?.id == 2) {
              addCashier()
            } else {
              addLM()
            }
          }} cancel={() => {
            dialogUser.current?.hide()
          }} />
        </View>
      </LibSlidingup>

      <LibSlidingup ref={dialogListLM}>
        <View style={{ backgroundColor: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20, maxHeight: LibStyle.height / 2 }}>
          <View style={{ height: 4, width: 32, borderRadius: 2, backgroundColor: "#C6C6C6", marginTop: 10, marginBottom: 10, alignSelf: 'center' }} />
          <ScrollView>
            {
              result?.manager?.map(renderListManage)
            }
          </ScrollView>
        </View>
      </LibSlidingup>



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