// withHooks

import { EventInput_rectangle } from 'esoftplay/cache/event/input_rectangle/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import esp from 'esoftplay/esp';
import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventTms_check_ticketArgs {

}
export interface EventTms_check_ticketProps {
  event_id: string,
  gate?: any
}
export default function m(props: EventTms_check_ticketProps): any {
  let inputAccessCode = React.useRef<EventInput_rectangle>(null)

  function doSubmit() {

    inputAccessCode.current?.blur()
    if (inputAccessCode.current?.getText() == '') {
      LibToastProperty.show(esp.lang("event/visitor_index", "alert_error_not_empty_code"))
      inputAccessCode.current?.focus()
      return
    }
    LibNavigation.navigate('event/tms_check_ticket_result', { selectGate: props?.gate, event_id: props?.event_id, qr: inputAccessCode.current?.getText().toUpperCase() })

  }

  return (
    <LibKeyboard_avoid style={{ flex: 1 }}>
      <View style={{ flex: 1, margin: 15, backgroundColor: '#fff', borderRadius: 10, ...LibStyle.elevation(2) }}>
        <ScrollView style={{ flex: 1 }}>
          <TouchableOpacity onPress={() => {
            LibNavigation.navigate('component/scanner', { selectGate: props?.gate, event_id: props?.event_id, fromPage: "event/tms_check_ticket" })
          }}>
            <View style={{ width: LibStyle.width - 30, overflow: 'hidden', borderTopLeftRadius: 10, borderTopRightRadius: 10, height: LibStyle.height * 0.5, backgroundColor: '#b8b7bf', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
              <LibPicture source={esp.assets('icons/ic_barcode_white.png')} style={{ height: 250, width: 250 }} />
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 10, color: '#fff' }}>{esp.lang("transfer/index", "klik_here")}</Text>
            </View>
          </TouchableOpacity>
          <Text allowFontScaling={false} style={{ opacity: 0.7, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 20 }}>{esp.lang("event/tms_check_ticket", "scan_qr_ticket")}</Text>
          <Text allowFontScaling={false} style={{ opacity: 0.6, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 17 }}>{esp.lang("transfer/index", "or")}</Text>

          <EventInput_rectangle
            ref={inputAccessCode}
            onSubmitEditing={() => doSubmit()}
            blurOnSubmit
            returnKeyType="done"
            autoCapitalize='characters'
            // autoFocus
            style={{ borderColor: '#c4c4c4', height: 35, margin: 15, borderRadius: 5 }}
            placeholder={esp.lang("event/tms_check_ticket", "input_code")}
          />

        </ScrollView>

        <TouchableOpacity onPress={() => { doSubmit() }}>
          <View style={{ margin: 15, marginTop: 20, height: 35, borderRadius: 5, backgroundColor: "#6c432c", justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 }} >
            <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'white', marginRight: 13, marginLeft: 10 }} >{esp.lang("event/visitor_index", "submit")}</Text>
          </View>
        </TouchableOpacity>
      </View >
    </LibKeyboard_avoid>
  )
}