// withHooks

import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventQc_idcardProperty } from 'esoftplay/cache/event/qc_idcard/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStatusbar } from 'esoftplay/cache/lib/statusbar/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import esp from 'esoftplay/esp';
import { LinearGradient } from 'expo-linear-gradient';
import React from 'react';
import { Text, View } from 'react-native';


export interface EventQc_idcard_successArgs {

}
export interface EventQc_idcard_successProps {

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

  return (
    <View style={{ flex: 1 }}>
      <LibStatusbar style='dark' />
      <LibPicture source={data?.image == "" ? esp.assets('white_idcard.png') : { uri: data?.image }} style={{ width: LibStyle.width, height: LibStyle.height - (LibStyle.height / 4) }} resizeMode={"contain"} />
      <LinearGradient
        // Background Linear Gradient
        style={{
          height: LibStyle.height - (LibStyle.height / 2),
          width: LibStyle.width,
          position: 'absolute',
          left: 0,
          right: 0,
          bottom: 0,
        }}
        colors={['rgba(255,255,255,0)', 'rgba(0,0,0,0.55)', 'rgba(0,0,0,1)', 'rgba(0,0,0,1)']}>
        <View style={{ flex: 1, padding: 15, justifyContent: 'flex-end', paddingBottom: 50, alignContent: 'center', alignItems: 'center' }}>
          <View style={{ backgroundColor: '#fff', padding: 10, marginTop: 5 }} >
            {/* view nama */}
            <View style={{ flexDirection: 'row' }} >
              <Text allowFontScaling={false} style={{ fontSize: 18, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 2 }} >{esp.lang("event/tms_idcard", "name")}</Text>
              <Text allowFontScaling={false} style={{ fontSize: 18, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} > : </Text>
              <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={"tail"} style={{ fontSize: 18, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 5 }} >{data?.name}</Text>
            </View>
            {/* view company */}
            <View style={{ flexDirection: 'row' }} >
              <Text allowFontScaling={false} style={{ fontSize: 18, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 2 }} >{esp.lang("event/tms_idcard", "company")}</Text>
              <Text allowFontScaling={false} style={{ fontSize: 18, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} > : </Text>
              <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={"tail"} style={{ fontSize: 18, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 5 }} >{data?.exhibitor_name}</Text>
            </View>

            <View style={{ marginTop: 10, width: LibStyle.width - 20, alignSelf: 'center', backgroundColor: '#4a4a4a', height: 4, marginVertical: 4 }} />
            <Text allowFontScaling={false} style={{ marginTop: -5, fontSize: 22, fontWeight: "bold", fontStyle: "normal", lineHeight: 32, textAlign: 'center', letterSpacing: 0, color: "#4a4a4a" }} >{data?.department_name}</Text>
          </View>
        </View>
        <EventButton label={esp.lang("event/qc_idcard_success", "scan_again")} onPress={() => {
          LibNavigation.back()
          EventQc_idcardProperty.openScanner(event_id)
        }}
          backgroundColor={LibStyle.colorGreen} style={{ margin: 10 }}
        />

      </LinearGradient>
    </View>
  )
}