// withHooks
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/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 { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/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 { useRef } from 'react';

import { applyStyle } from 'esoftplay';
import { EventInput_rectangle } from 'esoftplay/cache/event/input_rectangle/import';
import { EventLabel_input } from 'esoftplay/cache/event/label_input/import';
import { EventSheet } from 'esoftplay/cache/event/sheet/import';
import useLazyState from 'esoftplay/lazy';
import React, { useEffect } from 'react';
import { ActivityIndicator, Platform, ScrollView, Text, TouchableOpacity, View } from 'react-native';



export interface EventVisitor_inputProps {
  navigation: any
}

export default function m(props: EventVisitor_inputProps): any {
  let _data: any = LibNavigation.getArgs(props, 'data')
  const { msg, url } = LibNavigation.getArgsAll(props)

  const [data, setData, getData] = useLazyState(_data)
  const [_msg, set_msg] = useSafeState(msg)
  const [messageGenerate, setMessageGenerate] = useSafeState<any>()
  const [activeTab, setActiveTab] = useSafeState(data?.list[0])
  const [counter, setCounter] = useSafeState(1)
  const [listClaim, setListClaim] = useSafeState()
  const [selectedCode, setSelectedCode] = useSafeState()
  const [token, setToken] = useSafeState()

  const dialogListClaim = useRef<LibSlidingup>(null)
  const dialogClaim = useRef<LibSlidingup>(null)
  let inputName = useRef<EventInput_rectangle>(null)
  let inputToken = useRef<EventInput_rectangle>(null)
  const tokenRef = useRef<LibSlidingup>(null)
  const dialogMass = useRef<LibSlidingup>(null)
  const [, setDataMass, getDataMass] = useSafeState()


  let _tabs: any = getData()?.list

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

  function loadData(): void {
    new LibCurl(url, null, (result, msg) => {
      set_msg(msg)
      if (result?.hasOwnProperty('url_generate')) {
        generateCode(result?.url_generate, true)
      } else {
        setData(result)()
      }
    }, (error) => {
    })
  }

  function generateCode(url: string, loop: boolean) {
    if (loop) {
      new LibCurl(url, null, (res, msg) => {
        generateCode(url, res?.done == 1 ? false : true)
        setMessageGenerate(msg)
      }, (error) => {
        LibDialog.warningConfirm(esp.lang("event/visitor_input", "title"), error?.message, esp.lang("event/visitor_input", "resend"), () => {
          loadData()
        }, esp.lang("event/visitor_input", "back"), () => LibNavigation.back())
      })
    } else {
      loadData()
    }
  }

  function assignToken() {
    if (selectedCode?.use_token == 1 && token != 0 && token > getData()?.token_remaining) {
      LibToastProperty?.show(esp.lang("event/visitor_input", "max_token_is") + getData()?.token_remaining)
      return
    }

    let post: any = {
      name: inputName?.current?.getText(),
      code: selectedCode?.access_code
    }

    if (selectedCode?.use_token == 1) {
      post.token = inputToken?.current?.getText()
    }

    LibDialog.confirm(esp.lang("event/visitor_input", "confirm_title"), esp.lang("event/visitor_input", "confirm_input_token"), esp.lang("event/visitor_input", "yes"), () => {
      LibProgress.show(esp.lang("event/visitor_input", "please_wait"))
      new LibCurl('event_exhibitor_staff_token', post, (res, msg) => {
        LibProgress.hide()
        LibDialog.info(esp.lang("event/visitor_input", "confirm_success"), msg);
        loadData()
        setCounter(counter + 1)
        dialogClaim?.current?.hide()
      }, (error) => {
        dialogClaim?.current?.hide()
        LibProgress.hide()
        LibDialog.warning(esp.lang("event/visitor_input", "confirm_failed"), error?.message)
      })

    }, esp.lang("event/visitor_input", "no"), () => { })
  }

  function withdrawToken() {
    LibDialog.warningConfirm(esp.lang("event/visitor_input", "warning"), esp.lang("event/visitor_input", "confirm_withdraw_token"), esp.lang("event/visitor_input", "yes"), () => {
      let post = {
        token: inputToken?.current?.getText(),
        code: selectedCode?.access_code
      }
      LibProgress.show(esp.lang("event/visitor_input", "please_wait"))
      esp.log({ post });
      new LibCurl('event_exhibitor_staff_token_withdraw', post, (res, msg) => {
        LibProgress.hide()
        LibDialog.info(esp.lang("event/visitor_input", "confirm_success"), msg);
        loadData()
        setCounter(counter + 1)
        dialogClaim?.current?.hide()
      }, (error) => {
        dialogClaim?.current?.hide()
        LibProgress.hide()
        LibDialog.warning(esp.lang("event/visitor_input", "confirm_failed"), error?.message)
      })


    }, esp.lang("event/visitor_input", "no"), () => {

    })
  }

  function massAllocateToken() {
    esp.log("Alokasi masal");
  }

  function massWithdrawToken() {
    esp.log("Withdraw masal");
  }

  function renderTabs(item: any, i: number) {
    return (
      <TouchableOpacity key={i} onPress={() => {
        setActiveTab(item)
        setCounter(counter + 1)
      }}>
        <View style={applyStyle({ height: 35, width: LibStyle.width / 3.5, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' })}>
          <View style={{ width: LibStyle.width / 3.5, }}>
            <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={applyStyle({ fontFamily: "Arial", fontSize: 11, fontWeight: activeTab?.id == item?.id ? "bold" : "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: activeTab?.id == item?.id ? "#51b596" : "#c5c5c5" })}>{item.name}</Text>
            <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 11, fontWeight: activeTab?.id == item?.id ? "bold" : "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: activeTab?.id == item?.id ? "#51b596" : "#c5c5c5" })}>({LibUtils.number(item?.qty)})</Text>
          </View>
          <View style={applyStyle({ width: (LibStyle.width / 4) - 20, height: 3, backgroundColor: activeTab?.id == item?.id ? "#51b596" : "#fff", position: 'absolute', bottom: -1 })} />
        </View>
      </TouchableOpacity>
    )
  }

  function renderItem(item: any, i: any) {
    if (activeTab?.type == "INVITE") {
      let bgColor = Number(item.qty_used) != Number(item.qty) ? "#fff" : LibStyle.colorBgGrey
      let borderColor = Number(item.qty_used) != Number(item.qty) ? LibStyle.colorBgGrey : "#fff"
      return (
        <View style={{ margin: 15, marginBottom: 0, padding: 10, borderWidth: 1.5, backgroundColor: bgColor, borderColor: borderColor, borderRadius: 5 }}>
          <View style={{ flexDirection: 'row', flex: 1, justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
            <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b", }}>
              {esp.lang("event/visitor_input", "code_inv") + (i + 1)}
            </Text>
            {
              item.hasOwnProperty("url") && item.qty_used != 0 &&

              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#51b596" }}>{LibUtils.number(item.qty_used) + "/" + LibUtils.number(item.qty)}</Text>
              // <View style={{ padding: 5, borderWidth: 1, borderColor: LibStyle.colorPrimary, borderRadius: 5 }}>
              // </View>
            }
            <TouchableOpacity activeOpacity={item.name == "" ? 0 : 1} onPress={() => {
              if (Number(item.qty_used) != Number(item.qty)) {
                LibUtils.copyToClipboard(item.access_code)
                LibToastProperty.show(esp.lang("event/visitor_input", "success_copy", item.access_code))
              }
            }}>
              <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
                <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: Number(item.qty_used) == Number(item.qty) ? "#c4c4c4" : "#2980b9" })}>{item.access_code}</Text>
                <LibIcon.Ionicons name='copy' size={16} style={applyStyle({ color: Number(item.qty_used) == Number(item.qty) ? "#c4c4c4" : "#2980b9", marginLeft: 7 })} />
              </View>
            </TouchableOpacity>
          </View>
          {
            item.hasOwnProperty("name") &&
            <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "SFProText", color: '#4b4b4b' }}>{item?.name == "" ? esp.lang("event/visitor_input", "not_claimed") : item.name}</Text>
          }
          {
            item.hasOwnProperty("url") &&
            <View style={{ marginTop: 5, flexDirection: 'row', flex: 1 }}>
              {
                item.qty_used == 0 ?
                  <Text allowFontScaling={false} style={{ fontFamily: "SFProText", color: '#4b4b4b' }}>{esp.lang("event/visitor_input", "not_claimed")}</Text>
                  :
                  <View>
                    {/* <Text allowFontScaling={false} style={{ fontFamily: "SFProText", color: '#4b4b4b', marginBottom: 5 }}>{LibUtils.number(item.qty_used) + " sudah diklaim"}</Text> */}
                    <TouchableOpacity onPress={() => {
                      setListClaim(item)
                      LibUtils.debounce(() => {
                        dialogListClaim?.current?.show()
                      }, 200)
                    }} style={{ paddingHorizontal: 7, paddingVertical: 5, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorBlue }}>
                      <Text allowFontScaling={false} style={{ color: LibStyle.colorBlue, fontWeight: 'bold', fontSize: 12 }}>{esp.lang("event/visitor_input", "see_list_claimed")}</Text>
                    </TouchableOpacity>
                  </View>
              }
            </View>
          }
        </View>
      )
    } else {
      return (
        <View style={{ margin: 10, marginBottom: 0, padding: 10, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorBgGrey }}>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', }}>
            <TouchableOpacity onPress={() => {
              LibUtils.copyToClipboard(item.access_code)
              LibToastProperty.show(esp.lang("event/visitor_input", "success_copy", item.access_code))
            }} style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
              <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: item.is_used == 1 ? "#c4c4c4" : "#2980b9" })}>{item.access_code}</Text>
              <LibIcon.Ionicons name='copy' size={16} style={applyStyle({ color: item.is_used == 1 ? "#c4c4c4" : "#2980b9", marginLeft: 7 })} />
            </TouchableOpacity>
            <View style={{ flex: 1, justifyContent: 'flex-end', flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "normal", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#9b9b9b", }}>{item?.is_used == 1 ? "" : esp.lang("event/visitor_input", "notyet_used")}</Text>
              <TouchableOpacity onPress={() => {
                dialogClaim?.current?.show()
                setSelectedCode(item)
              }}>
                <LibIcon name='pencil-circle' size={20} color={LibStyle.colorRed} style={{ marginLeft: 5 }} />
              </TouchableOpacity>
            </View>
          </View>

          <View style={{ padding: 5, borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 5, marginTop: 5 }}>
            <Text allowFontScaling={false} style={{ fontSize: 10, color: '#9b9b9b' }}>{esp.lang("event/visitor_input", "name")}</Text>
            <Text allowFontScaling={false} style={{ fontSize: 14 }}>{item.name == null ? "-" : item.name}</Text>
            {
              item?.use_token == 1 &&
              <View style={{ marginTop: 5, flexDirection: 'row', justifyContent: 'space-between' }}>
                <View style={{ flex: 1 }}>
                  <Text allowFontScaling={false} style={{ fontSize: 10, color: '#9b9b9b' }}>{esp.lang("event/visitor_input", "total_token")}</Text>
                  <Text allowFontScaling={false} style={{ fontSize: 14 }}>{Number(item?.token)}</Text>
                </View>
                <View style={{ flex: 1 }}>
                  <Text allowFontScaling={false} style={{ fontSize: 10, color: '#9b9b9b' }}>{esp.lang("event/visitor_input", "token_used")}</Text>
                  <Text allowFontScaling={false} style={{ fontSize: 14 }}>{Number(item?.token_used)}</Text>
                </View>
                <View style={{ flex: 1 }}>
                  <Text allowFontScaling={false} style={{ fontSize: 10, color: '#9b9b9b' }}>{esp.lang("event/visitor_input", "token_left")}</Text>
                  <Text allowFontScaling={false} style={{ fontSize: 14 }}>{Number(item?.token_remaining)}</Text>
                </View>
              </View>
            }
          </View>
        </View>
      )
    }
  }

  if (Number(getData()?.qty_generated) != Number(getData()?.qty)) {
    return (
      <View style={{ flex: 1, backgroundColor: '#fff' }}>
        <EventHeader title={esp.lang("event/visitor_input", "title_input_exhibitors")} />
        <View style={{ backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}>
          <View style={{ justifyContent: 'center', alignItems: 'center', padding: 10 }}>
            <LibPicture source={esp.assets('img_failed_msg.png')} resizeMode="contain" style={{ width: LibStyle.width * 0.8, height: 200, resizeMode: 'contain' }} />
            <ActivityIndicator size={'large'} color={LibStyle.colorPrimary} style={{ alignItems: 'center', justifyContent: 'center' }} />
            <View style={{ width: LibStyle.width - 40, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', padding: 15, borderRadius: 10, marginTop: 20 }}>
              <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 16, fontWeight: "bold", marginBottom: 5, color: "#4a4a4a", textAlign: "center" }}>{_msg}</Text>
            </View>
            <Text allowFontScaling={false} style={{ textAlign: 'center', fontFamily: "Arial", fontSize: 14, margin: 15, marginBottom: 0 }} >{messageGenerate}</Text>
          </View>
        </View>
      </View>
    )
  }

  let menuHeader = [
    {
      id: 1,
      title: activeTab?.name,
      color: '#d3f1ec',
      textColor: '#4fbaa8',
      total: LibUtils.number(activeTab?.qty)
    },
    {
      id: 2,
      title: esp.lang("event/visitor_input", "total_token"),
      color: '#d7edf8',
      textColor: '#64b0e0',
      total: LibUtils.number(getData()?.token)
    },
    {
      id: 3,
      title: esp.lang("event/visitor_input", "token_shared"),
      color: '#fbe3dd',
      textColor: '#ec7463',
      total: LibUtils.number(getData()?.token_shared)
    },
    {
      id: 4,
      title: esp.lang("event/visitor_input", "token_left"),
      color: '#fef2de',
      textColor: '#f6c67f',
      total: LibUtils.number(getData()?.token_remaining)
    },
  ]

  esp.log({ selectedCode });

  return (
    <View style={{ flex: 1 }}>
      <EventHeader title={esp.lang("event/visitor_input", "title_input_exhibitor")} subtitle={esp.lang("event/visitor_input", "total_staff", LibUtils.number(data.qty))} />
      <LibKeyboard_avoid style={{ flex: 1 }}>
        <>
          {
            activeTab?.type == "STAFF" && data?.use_token == 1 &&
            <View style={{ padding: 10, paddingBottom: 0, flexDirection: 'row', justifyContent: 'space-between', flexWrap: 'wrap' }}>
              {
                menuHeader?.map((item, i) => {
                  return (
                    <View key={i} style={{ width: (LibStyle.width - 30) / 2, alignContent: 'center', alignItems: 'center', marginBottom: 10, overflow: 'hidden', backgroundColor: item.color, borderRadius: 5, padding: 5, flexDirection: 'row', justifyContent: 'space-between' }}>
                      <View style={{ flex: 2, }}>
                        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }}>{item.title}</Text>
                      </View>
                      <View style={{ marginLeft: 5, flex: 1 }}>
                        <View style={{ alignContent: 'center', alignItems: 'center', backgroundColor: item.textColor, paddingHorizontal: 7, paddingVertical: 3, borderRadius: 5 }}>
                          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{item.total}</Text>
                        </View>
                      </View>
                    </View>
                  )
                })
              }
            </View>
          }

          <View style={{ height: 35, marginBottom: 2, flexDirection: 'row', backgroundColor: '#fff', ...LibStyle.elevation(2) }} >
            <ScrollView horizontal showsHorizontalScrollIndicator={false} >
              {
                _tabs.map(renderTabs)
              }
            </ScrollView>
          </View>
          <LibInfinite
            url={activeTab?.url}
            // isDebug={1}
            key={activeTab + counter}
            // style={{ flex: 1 }}
            ListHeaderComponent={
              <>
                {/* {
                  activeTab?.ondate != "0000-00-00" &&
                  <View style={{ margin: 10, marginBottom: 0 }}>
                    <Text allowFontScaling={false} style={{ fontWeight: 'bold', color: LibStyle.colorGreen }}>{"Tanggal berlaku " + LibUtils.moment(activeTab?.ondate).format("DD MMMM YYYY")}</Text>
                  </View>
                } */}
              </>
            }
            removeClippedSubviews={Platform.OS == 'android'}
            renderItem={renderItem}
          />

          {
            esp.isDebug("") &&
            <TouchableOpacity onPress={() => {
              tokenRef?.current?.show()
            }} style={{ padding: 5, /* ...LibStyle.elevation(3), */ position: 'absolute', right: 0, bottom: 30, borderTopLeftRadius: 35, borderBottomLeftRadius: 35, backgroundColor: esp.isDebug("ini memang isDebug, tapi jangan di hapus") ? 'rgba(0, 191, 99, 0.1618)' : 'rgba(255, 197, 35, 0.1618)' }}>
              <View style={{ padding: 5, backgroundColor: LibStyle.colorPrimary, ...LibStyle.elevation(3), borderRadius: 30, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
                <LibIcon name='recycle-variant' size={16} />
                <Text allowFontScaling={false} style={{ fontWeight: 'bold', color: '#000', fontSize: 9 }}>{"Token"}</Text>
              </View>
            </TouchableOpacity>
          }
        </>
      </LibKeyboard_avoid>
      <LibSlidingup ref={dialogListClaim}>
        <View style={{ backgroundColor: 'white', padding: 15, height: LibStyle.height * 0.7, borderTopLeftRadius: 5, borderTopRightRadius: 5 }} >
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
            <LibTextstyle text={esp.lang("event/visitor_input", "list_claimed")} textStyle="headline" />
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#51b596" }}>{LibUtils.number(listClaim?.qty_used) + "/" + LibUtils.number(listClaim?.qty)}</Text>
          </View>
          <LibInfinite
            url={listClaim?.url}
            removeClippedSubviews={Platform.OS == 'android'}
            renderItem={(item: any, i: number) => {
              return (
                <View key={i} style={{ padding: 10, borderBottomWidth: 1.5, borderBottomColor: LibStyle.colorBgGrey, flexDirection: 'row' }}>
                  <Text allowFontScaling={false} style={{ fontSize: 16 }}>{(i + 1) + ". "}</Text>
                  <View>
                    <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ fontSize: 16 }}>{item.name}</Text>
                    <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail'>{item.email}</Text>
                  </View>
                </View>
              )
            }}
          />
        </View>
      </LibSlidingup>

      <LibSlidingup ref={dialogClaim}>
        <View style={{ backgroundColor: 'white', padding: 15, maxHeight: LibStyle.height * 0.7, borderTopLeftRadius: 5, borderTopRightRadius: 5 }} >
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
            <LibTextstyle text={esp.lang("event/visitor_input", "code")} textStyle="headline" />
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#00b894" }}>{selectedCode?.access_code}</Text>
          </View>

          <EventLabel_input label={esp.lang("event/visitor_input", "input_name")} />
          <EventInput_rectangle
            ref={inputName}
            returnKeyType="next"
            style={applyStyle({ borderRadius: 4, borderColor: '#c4c4c4', marginTop: 8, backgroundColor: '#fff' })}
            inputStyle={{ color: selectedCode?.is_used == "1" ? "#c4c4c4" : "#000" }}
            onSubmitEditing={() => inputToken?.current?.focus()}
            placeholder={esp.lang("event/visitor_input", "input_name")}
            defaultValue={selectedCode?.name}
            editable={selectedCode?.is_used == "1" ? false : true}
          />


          <View style={{ flexDirection: 'row', justifyContent: 'flex-end', alignContent: 'center', alignItems: 'center' }}>
            {
              selectedCode?.use_token == 1 &&
              <View style={{ flex: 2 }}>
                <EventLabel_input label={esp.lang("event/visitor_input", "input_token")} mandatory />
                <EventInput_rectangle
                  ref={inputToken}
                  keyboardType='phone-pad'
                  returnKeyType="done"
                  style={applyStyle({ borderRadius: 4, borderColor: '#c4c4c4', marginTop: 8, backgroundColor: '#fff' })}
                  placeholder={esp.lang("event/visitor_input", "input_token")}
                  onChangeText={(t) => setToken(t)}
                  onSubmitEditing={assignToken}
                  defaultValue={selectedCode?.token != "0" ? selectedCode?.token : ''}
                />
              </View>
            }
            {
              selectedCode?.use_token == 1 &&
              <View style={{ flex: 1, justifyContent: 'flex-end', marginLeft: 10, }}>
                <EventLabel_input label={esp.lang("event/visitor_input", "token_used")} />
                <View style={{ height: 35, marginTop: 8, alignContent: 'center', justifyContent: 'center' }}>
                  <Text allowFontScaling={false} style={{ fontSize: 14 }}>{LibUtils.number(selectedCode?.token_used)}</Text>
                </View>
              </View>
            }
            {
              selectedCode?.use_token == 1 &&
              <View style={{ flex: 1, justifyContent: 'flex-end', marginLeft: 10 }}>
                <EventLabel_input label={esp.lang("event/visitor_input", "token_left")} />
                <View style={{ height: 35, marginTop: 8, alignContent: 'center', justifyContent: 'center' }}>
                  <Text allowFontScaling={false} style={{ fontSize: 14 }}>{LibUtils.number(selectedCode?.token_remaining)}</Text>
                </View>
              </View>
            }
          </View>

          <View style={{ marginTop: 15, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
            {
              selectedCode?.use_token == 1 && selectedCode?.token_remaining != 0 &&
              <View style={{ marginRight: 5, flex: 1 }}>
                <EventButton
                  label={esp.lang("event/visitor_input", "withdraw_token")}
                  onPress={() => {
                    withdrawToken()
                  }}
                  backgroundColor='#fff'
                  borderColor={LibStyle.colorRed}
                  fontColor={LibStyle.colorRed}
                  style={{ borderRadius: 5 }}
                />
              </View>
            }

            <View style={{ marginLeft: (selectedCode?.token != "0" && selectedCode?.token_remaining != 0) ? 5 : 0, flex: 1 }}>
              <EventButton
                style={{ backgroundColor: '#00b894', borderRadius: 5 }}
                label={esp.lang("event/visitor_input", "save_btn")}
                onPress={() => {
                  assignToken()
                }} />
            </View>
          </View>
        </View>
      </LibSlidingup>

      <EventSheet
        _ref={tokenRef}
        // detail="All menu is ready"
        title={"Menu Token"}
        options={[
          {
            text: "Alokasi Token Masal",
            onPress: () => {
              let a = {
                title: 'Alokasi Token Masal',
                buttonText: 'Submit',
                buttonColor: LibStyle.colorGreen,
                onPress: () => massAllocateToken()
              }
              setDataMass(a)
              LibUtils.debounce(() => {
                dialogMass?.current?.show()
              }, 100)
            }
          },
          {
            text: "Tarik Token Masal",
            onPress: () => {
              let a = {
                title: 'Tarik Token Masal',
                buttonText: 'Tarik Token',
                buttonColor: LibStyle.colorRed,
                onPress: () => massWithdrawToken()
              }
              setDataMass(a)
              LibUtils.debounce(() => {
                dialogMass?.current?.show()
              }, 100)
            }
          },
          {
            text: "Beli ID CARD/Token",
            onPress: () => {
              LibNavigation.navigate('event/token_payment')
            }
          },
          {
            text: "Riwayat Transaksi Token",
            onPress: () => {
              LibNavigation.navigate('event/token_order')
            }
          },

        ]}
      />

      <LibSlidingup ref={dialogMass}>
        <View style={{ backgroundColor: 'white', padding: 15, maxHeight: LibStyle.height * 0.7, borderTopLeftRadius: 5, borderTopRightRadius: 5 }} >
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
            <LibTextstyle text={getDataMass()?.title} textStyle="headline" />
          </View>

          <EventLabel_input label={esp.lang("event/visitor_input", "input_token")} mandatory />
          <EventInput_rectangle
            ref={inputToken}
            keyboardType='phone-pad'
            returnKeyType="done"
            style={applyStyle({ borderRadius: 4, borderColor: '#c4c4c4', marginTop: 8, backgroundColor: '#fff' })}
            placeholder={esp.lang("event/visitor_input", "input_token")}
          // onChangeText={(t) => setToken(t)}
          // onSubmitEditing={assignToken}
          />

          <EventButton
            style={{ backgroundColor: getDataMass()?.buttonColor, borderRadius: 5, marginTop: 20 }}
            label={getDataMass()?.buttonText}
            onPress={() => {
              getDataMass()?.onPress()
            }} />
        </View>
      </LibSlidingup>

    </View>
  )
}