// withHooks

import { applyStyle } from 'esoftplay';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventInput_rectangle } from 'esoftplay/cache/event/input_rectangle/import';
import { EventLabel_input } from 'esoftplay/cache/event/label_input/import';
import { EventTms_check_ticket } from 'esoftplay/cache/event/tms_check_ticket/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 { LibProgress } from 'esoftplay/cache/lib/progress/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 esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';


export interface EventTms_check_codeArgs {

}
export interface EventTms_check_codeProps {

}
export default function m(props: EventTms_check_codeProps): any {
  let inputAccessCode = React.useRef<EventInput_rectangle>(null)
  const { event_id, gate } = LibNavigation.getArgsAll(props)
  const [result, setResult] = useSafeState<any>()

  const [tab, setTab] = useSafeState<any>({
    id: 1,
    title: esp.lang("event/tms_check_code", "title")
  })

  function doSubmit(reSubmit?: boolean): void {
    inputAccessCode.current?.blur()
    if (inputAccessCode.current?.getText() == '') {
      LibToastProperty.show(esp.lang("event/visitor_index", "alert_error_not_empty_code"))
      inputAccessCode.current?.focus()
      return
    }
    var post = {
      code: inputAccessCode.current?.getText().toUpperCase(),
      event_id: event_id,
      gate_id: gate?.id
    }

    if (reSubmit) {
      delete post.event_id
    }

    LibProgress.show(esp.lang("event/visitor_index", "waiting_msg"))
    new LibCurl('code_check', post, (res, msg) => {
      setResult(res)
      LibProgress.hide();
    }, (err) => {
      setResult(undefined)
      LibProgress.hide();
      LibDialog.warningConfirm(esp.lang("event/tms_check_code", "error"), err?.message, "Ok", () => {

      }, "Cari lebih lanjut", () => {
        doSubmit(true)
      })
    }, 1)
  }

  let tabs = [
    {
      id: 1,
      title: esp.lang("event/tms_check_code", "ticket")
    },
    {
      id: 2,
      title: esp.lang("event/tms_check_code", "code")
    }
  ]

  function renderTabs(item: any, i: number) {
    let tabsLength = 2
    return (
      <TouchableOpacity key={i} onPress={() => {
        setTab(item)
      }}>
        <View style={applyStyle({ height: 43, width: LibStyle.width / tabsLength, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' })}>
          <Text allowFontScaling={false} style={{
            width: LibStyle.width / tabsLength, fontFamily: "Arial", fontSize: tab?.id == item?.id ? 16 : 14,
            fontWeight: tab?.id == item?.id ? "bold" : "normal",
            fontStyle: "normal", letterSpacing: 0, textAlign: "center",
            color: tab?.id == item.id ? "#51b596" : "#c5c5c5"
          }}>{item.title}</Text>
          <View style={{ marginTop: 2, width: 5, height: 5, borderRadius: 2.5, alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorRed, opacity: item?.total > 0 ? 1 : 0 }} />
          <View style={{ width: (LibStyle.width / tabsLength) - 20, height: 3, backgroundColor: tab?.id == item?.id ? "#51b596" : "#fff", position: 'absolute', bottom: 0 }} />
        </View>
      </TouchableOpacity>
    )
  }

  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title={tab?.title} />
      <View style={{ flexDirection: 'row' }}>
        {
          tabs?.map(renderTabs)
        }
      </View>
      {
        tab?.id == 1 ?
          <EventTms_check_ticket event_id={event_id} gate={gate} />
          :
          <ScrollView>
            <View style={[{ margin: 15, backgroundColor: 'white', padding: 15, paddingTop: 8, borderRadius: 5 }, LibStyle.elevation(2)]}>
              <EventLabel_input label={esp.lang("event/visitor_index", "label_input_code")} mandatory />
              <EventInput_rectangle
                ref={inputAccessCode}
                onSubmitEditing={() => doSubmit()}
                blurOnSubmit
                returnKeyType="done"
                autoCapitalize='characters'
                // autoFocus
                style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8, borderRadius: 5 }}
                placeholder={esp.lang("event/visitor_index", "placeholder_input_code")}
              />
              <TouchableOpacity onPress={() => { doSubmit() }}>
                <View style={{ 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>
            {
              result &&
              <View style={[{ marginTop: 0, margin: 15, backgroundColor: 'white', padding: 15, paddingTop: 8, borderRadius: 5 }, LibStyle.elevation(2)]}>
                <Text allowFontScaling={false} style={{ fontSize: 18, letterSpacing: 1.5, fontWeight: 'bold' }}>{esp.lang("event/tms_check_code", "input_code", String(inputAccessCode?.current?.getText?.()))}</Text>
                {/* <LibTextstyle text={esp.lang("event/tms_check_code", "input_code", String(inputAccessCode?.current?.getText?.()))} textStyle="headline" style={{ fontWeight: 'bold' }} /> */}
                {
                  result?.data?.hasOwnProperty("price_name") && result?.data?.price_name != "" &&
                  <Text allowFontScaling={false} style={{ fontSize: 16, letterSpacing: 1, marginTop: 4 }}>{result?.data?.price_name}</Text>
                }
                {
                  result?.data?.hasOwnProperty("title") && result?.data?.title != "" &&
                  <Text allowFontScaling={false} style={{ fontSize: 16, letterSpacing: 1, marginTop: 4 }}>{result?.data?.title}</Text>
                }
                {
                  result?.data?.hasOwnProperty("event_name") && result?.data?.event_name != "" &&
                  <LibTextstyle text={result?.data?.event_name} textStyle="m_overline" style={{ marginVertical: 5, fontSize: 12 }} />
                }
                {
                  result?.data?.hasOwnProperty("exhibitor_name") && result?.data?.exhibitor_name != "" &&
                  <LibTextstyle text={result?.data?.exhibitor_name} textStyle="headline" style={{ fontWeight: 'bold' }} />
                }
                <LibTextstyle text={result?.info} textStyle="m_body1" style={{ lineHeight: 20, marginTop: 10 }} />
              </View>
            }
          </ScrollView>
      }
    </View>
  )
}