// withHooks

import { LibCurl } from 'esoftplay/cache/lib/curl/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, { useEffect } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface EventPopupArgs {

}
export interface EventPopupProps {
  email: string,
  qrcode?: string,
  redirect: () => void,
  cancel: () => void,
  view?: any
}
export default function m(props: EventPopupProps): any {
  const [data, setData] = useSafeState<any>()
  const [error, setError] = useSafeState('')

  useEffect(() => {
    let post: any = {
      email: props.email?.trim?.(),
    }
    if (props.qrcode)
      post.qr = props.qrcode?.trim?.()
    new LibCurl('user_search', post,
      (res, msg) => {
        setData(res)
      },
      (msg) => {
        setError(msg?.message)
      }
    )
  }, [])


  return (
    <View style={{ backgroundColor: 'white', borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: 30 }} >
      {
        error != '' ?
          <View style={{ padding: 20, alignItems: 'center' }} >
            <Text style={{ textAlign: 'center', fontFamily: "Arial", fontSize: 14, fontWeight: "bold", color: LibStyle.colorRed }} >{error}</Text>
          </View>
          :
          data ?
            <View style={{ alignItems: 'center' }} >
              <LibPicture
                source={{ uri: data.image }}
                style={{ width: 80, height: 80, borderRadius: 40 }}
              />
              <Text style={{ textAlign: 'center', marginTop: 20, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", color: "#4a4a4a" }} >{data.name}</Text>
              <Text style={{ textAlign: 'center', fontFamily: "Arial", fontSize: 10, fontWeight: "bold", lineHeight: 22, color: "#b7b7b7" }} >{data.email}</Text>

              {
                props?.view && props.view
              }

              <View style={{ flexDirection: 'row', marginTop: 20 }} >
                <TouchableOpacity onPress={props.cancel} style={{ flex: 1, marginHorizontal: 5 }} >
                  <View style={{ height: 40, borderRadius: 5, justifyContent: 'center', alignItems: 'center' }} >
                    <Text style={{ fontFamily: "Arial", fontSize: 15, fontWeight: "normal", lineHeight: 22, color: LibStyle.colorRed }} >{esp.lang("event/popup", "cancel")}</Text>
                  </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={props.redirect} style={{ flex: 1, marginHorizontal: 5 }} >
                  <View style={{ height: 40, borderRadius: 5, backgroundColor: LibStyle.colorGreen, justifyContent: 'center', alignItems: 'center' }} >
                    <Text style={{ fontFamily: "Arial", fontSize: 15, fontWeight: "normal", lineHeight: 22, color: "white" }} >{esp.lang("event/popup", "confirm")}</Text>
                  </View>
                </TouchableOpacity>
              </View>
            </View>
            :
            null
      }
    </View>
  )
}