// withHooks

import { EventHeader } from 'esoftplay/cache/event/header/import';
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 esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventTms_addArgs {

}
export interface EventTms_addProps {

}
export default function m(props: EventTms_addProps): any {
  let inputEmail = React.useRef<EventInput_rectangle>(null)
  const { dataEvent } = LibNavigation.getArgsAll(props)
  const [email, setEmail] = useSafeState('')
  const [qrcode, setQrcode] = useSafeState('')

  // function addTMS() {
  //   let post = {
  //     email: email.trim(),
  //     event_id: dataEvent?.id,
  //     qr: qrcode.trim(),
  //     resetable: allowReset
  //   }

  //   new LibCurl('event_tms_add', post,
  //     (res, msg) => {
  //       EventTmsProperty.subscribe().trigger()
  //       dialogUser.current?.hide()
  //       LibToastProperty.show(msg)
  //       LibNavigation.back()
  //     }, (msg) => {
  //       LibDialog.warning(esp.lang("cashier/list", "text_failed_add"), msg?.message)
  //     }, 1
  //   )
  // }

  return (
    <LibKeyboard_avoid style={{ flex: 1 }}>
      <EventHeader title={esp.lang("event/tms_add", "header")} />
      <View style={{ flex: 1, margin: 15, backgroundColor: '#fff', borderRadius: 10, ...LibStyle.elevation(2) }}>
        <ScrollView style={{ flex: 1 }}>
          <TouchableOpacity onPress={() => {
            LibNavigation.navigateForResult('component/scanner', { fromPage: "event/tms_add" }).then((value: any) => {
              LibNavigation.navigate('event/tms_add_result', { dataEvent: dataEvent, email: email.trim(), is_add: true, qr_code: value.trim() })
              // setQrcode(value)
            })
          }}>
            <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_add", "scan_qr")}</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={inputEmail}
            onSubmitEditing={() => {
              LibNavigation.navigate('event/tms_add_result', { dataEvent: dataEvent, email: email.trim(), is_add: true, qr_code: qrcode.trim() })
            }}
            onChangeText={(t) => setEmail(t)}
            blurOnSubmit
            returnKeyType="done"
            autoCapitalize='none'
            // autoFocus
            style={{ borderColor: '#c4c4c4', height: 35, margin: 15, borderRadius: 5 }}
            placeholder={esp.lang("event/tms_add", "placeholder_email")}
          />

        </ScrollView>

        <TouchableOpacity onPress={() => {
          LibNavigation.navigate('event/tms_add_result', { dataEvent: dataEvent, email: email.trim(), is_add: true, qr_code: qrcode.trim() })
        }}>
          <View style={{ margin: 15, marginTop: 20, height: 35, 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>
  )
}