// withHooks

import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventSheet } from 'esoftplay/cache/event/sheet/import';
import { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/import';
import { EventTms_in_successProperty } from 'esoftplay/cache/event/tms_in_success/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import React, { useEffect, useRef } from 'react';
import { Text, View } from 'react-native';


export interface EventTms_idcardArgs {

}
export interface EventTms_idcardProps {

}
export default function m(props: EventTms_idcardProps): any {
  const width = LibStyle.width
  const height = 12 / 9 * width
  const marginTop = 2.7 / 9 * width
  const photoHeight = 4 / 9 * width
  const photoWidth = 3 / 9 * width
  const photoMarginBot = 0.46 / 9 * width

  const menuRef = useRef<EventSheet>(null)

  const {
    hall,
    selectedTicket,
    event_id,
    selectGate,
    url_ticket_update,
    price_type,
    gate_type,
    event_title,
    typeScanner,
    url_ticket_detail,
    configPriority,
    scan_type
  } = LibNavigation.getArgsAll(props)

  const [result, setResult] = useSafeState<any>()

  function loadData() {
    // load data untuk ngambil background id card
    new LibCurl('event_tms_visitor?event_id=' + event_id, null, (res, message) => {
      setResult(res)
    }, (error) => {
      LibToastProperty?.show(error?.message)
      LibNavigation.back()
    }, 1)
  }

  useEffect(() => {
    loadData()
    if (hall && hall == "in") {
      entranceHall()
    } else if (hall && hall == "out") {
      exitHall()
    } else {
      entrance()
    }
  }, [])

  function entrance() {
    let url = url_ticket_update

    let post = {
      "target-url": `https://api.${esp.config().domain}/gate_checkin`,
      price_id: 0,
      qr: encodeURIComponent(selectedTicket?.key),
      trx_id: new Date().getTime() + "" + UserClass.state().get()?.id,
      event_id: event_id,
      gate_id: selectGate?.id,
      is_tms: 1,
      qty: selectedTicket?.qty,
      tms_id: UserClass.state().get()?.id
    }

    EventTms_homeProperty.addCounterEntranceOpenGateIdCard(1, selectedTicket?.price_id)
    EventTms_in_successProperty.syncUsedTiket().set(LibObject.push(EventTms_in_successProperty.syncUsedTiket().get(), [url, post])())
    EventTms_homeProperty.subscribeSync().trigger(EventTms_in_successProperty.syncUsedTiket().get())
  }

  function entranceHall() {
    let post = {
      event_id: event_id,
      hall_id: selectGate?.id,
      staff_id: selectedTicket?.id
    }
    new LibCurl('event_tms_hall_confirm_staff', post, (res, message) => {
      // setResult(res)
      EventTms_homeProperty.addCounterHallInGateIdcard(1, selectedTicket?.price_id)
    }, (error) => {
    }, 1)
  }

  function exitHall() {
    let post = {
      event_id: event_id,
      hall_id: selectGate?.id,
      id: selectedTicket?.id // ini id stafff
    }
    new LibCurl('event_tms_hall_out_confirm_staff', post, (res, message) => {
      // setResult(res)
      EventTms_homeProperty.addCounterHallOutOpenGateIdCard(1, selectedTicket?.price_id)
    }, (error) => {
    }, 1)
  }


  return (
    <View style={{ flex: 1 }}>
      <EventHeader
        title={esp.lang("event/tms_idcard", "header")}
        notif
        onPressMore={() => menuRef.current?.show()}
        more
      />
      <View style={{ backgroundColor: '#000', height: LibStyle.height, alignItems: 'center' }}>
        {/* ini id_card nya */}
        <LibPicture source={result?.event?.image_idcard == "" ? esp.assets('white_idcard.png') : { uri: result?.event?.image_idcard }} style={{ width: width, height: height, resizeMode: 'contain' }} />
        <View style={{ position: 'absolute' }}>
          <LibPicture source={{ uri: selectedTicket?.user_image != '' ? decodeURIComponent(selectedTicket?.user_image) : 'https://www.w3schools.com/howto/img_avatar.png' }} style={{ marginBottom: photoMarginBot, marginTop: marginTop, height: photoHeight, width: photoWidth, alignSelf: 'center', resizeMode: 'cover', }} />
          <View style={{ padding: 10, marginTop: 5 }} >
            {/* view nama */}
            <View style={{ flexDirection: 'row' }} >
              <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 3 }} >{esp.lang("event/tms_idcard", "name")}</Text>
              <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} > : </Text>
              <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode={"tail"} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 5 }} >{selectedTicket ? decodeURIComponent((selectedTicket?.user_name))?.split("+").join(' ') : esp.lang("event/tms_idcard", "visitor")}</Text>
            </View>
            {/* view company */}
            <View style={{ flexDirection: 'row' }} >
              <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 3 }} >{esp.lang("event/tms_idcard", "company")}</Text>
              <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} > : </Text>
              <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode={"tail"} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 5 }} >{selectedTicket?.exhibitor_name?.split('-')[1]}</Text>
            </View>

            <View style={{ width: width - 20, alignSelf: 'center', backgroundColor: '#4a4a4a', height: 4, marginVertical: 4 }} />
            <Text allowFontScaling={false} style={{ marginTop: -5, fontSize: 20, fontWeight: "bold", fontStyle: "normal", lineHeight: 32, textAlign: 'center', letterSpacing: 0, color: "#4a4a4a" }} >{selectedTicket?.exhibitor_name?.split('-')[0]}</Text>
          </View>

        </View>
        <EventButton
          label={esp.lang("event/tms_idcard", "btn_back")}
          backgroundColor={LibStyle.colorPrimary}
          onPress={() => {
            // LibNavigation.back()
            LibNavigation.replace('component/scanner', {
              selectGate: selectGate,
              fromPage: 'event/tms_home',
              event_id: event_id,
              event_title: event_title,
              typeScanner: typeScanner,
              gate_type: gate_type,
              price_type: price_type,
              url_ticket_detail: url_ticket_detail,
              url_ticket_update: url_ticket_update,
              configPriority: configPriority,
              scan_type: scan_type
            })
          }}
          style={{ marginTop: 20, marginHorizontal: 15 }}
        />
      </View>
      <EventSheet
        _ref={menuRef}
        title={"ID CARD"}
        options={[
          {
            text: "Tahan ID CARD",
            textStyle: { color: "red" },
            onPress: () => {
              LibDialog.warningConfirm(esp.lang("event/tms_dashboard", "block_idcard_title"), esp.lang("event/tms_dashboard", "block_idcard_message"), esp.lang("event/tms_dashboard", "block_idcard_ok"), () => {
                new LibCurl("event_tms_staff_hold", { qr: encodeURIComponent(selectedTicket?.key) }, (result, message) => {
                  LibDialog.info("Berhasil!", message)
                }, (error) => {
                  LibDialog.warning("Oops!", error?.message)
                })
              }, esp.lang("event/tms_dashboard", "block_idcard_no"), () => {
                LibDialog.hide()
              })
            }
          }
        ]}
      />
    </View>
  )
}