// withHooks
import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibAutoreload } from 'esoftplay/cache/lib/autoreload/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';

import React, { useEffect } from 'react';
import { Text, View } from 'react-native';


export interface EventTurnstile_settings_otpArgs {

}
export interface EventTurnstile_settings_otpProps {

}
export default function m(props: EventTurnstile_settings_otpProps): any {
  const { data, serial_number } = LibNavigation.getArgsAll(props)

  useEffect(() => {
    loadData()
    LibAutoreload.set(() => {
      loadData()
    }, 6000)
    return () => LibAutoreload.clear()
  }, [])

  function loadData() {
    let post = {
      serial_number: serial_number
    }
    new LibCurl('gate_turnstile_setted', post, (res, msg) => {
      LibAutoreload.clear()
      LibNavigation.back()
      LibNavigation.navigate('event/turnstile_settings_status', { msg: msg })
    }, (error) => {
    }, 1)
  }

  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title={esp.lang("event/turnstile_settings_otp", "header")} />

      <View style={{ backgroundColor: '#fff', borderRadius: 10, margin: 10 }}>
        <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontSize: 12, alignSelf: 'center', margin: 10, marginBottom: 0 }}>{esp.lang("event/turnstile_settings", "verification_code")}</Text>
        <Text allowFontScaling={false} style={{ fontFamily: 'DecoNumbers', fontSize: 60, fontWeight: 'bold', alignSelf: 'center', margin: 10, marginTop: 0 }}>{data?.otp_code}</Text>
        <View style={{ borderTopWidth: 1, borderTopColor: LibStyle.colorBgGrey, padding: 10 }}>
          <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontSize: 12, color: LibStyle.colorRed }}>{esp.lang("event/turnstile_settings_otp", "insert_code")}</Text>
          <EventCountdown_base expired={moment(data?.otp_expire_time).serverFormat('YYYY-MM-DD HH:mm:ss')} style={{ fontSize: 14, color: LibStyle.colorRed, fontFamily: "ArialBold", fontWeight: "normal", fontStyle: "normal" }} />
        </View>
      </View>
    </View>
  )
}