// withHooks

import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventSecure_page } from 'esoftplay/cache/event/secure_page/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 { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import React from 'react';
import { ScrollView, Text, View } from 'react-native';
import QRCode from 'react-native-qrcode-svg';


export interface VoucherCoupon_detailArgs {
  qr: string
  code: string
  amount: string
  image: string
  info: string
  title: string
  status_text: string
}
export interface VoucherCoupon_detailProps {

}
export default function m(props: VoucherCoupon_detailProps): any {
  EventSecure_page()
  const { qr, code, amount, image, info, title, status, event_name, merchant_name } = LibNavigation.getArgsAll(props)

  return (
    <View style={{ flex: 1, backgroundColor: "#e6e6e6" }}>
      <EventHeader title={esp.lang("event/coupon_detail", "header")} notif />
      <ScrollView>
        <View style={{ backgroundColor: "white", margin: 20, borderRadius: 20 }}>
          <View style={{ alignSelf: "center", marginHorizontal: 20, marginTop: 20 }}>
            <QRCode ecl="H" size={200} value={qr} color='#333333' />
            {
              status != 0 &&
              <View style={{ position: "absolute", left: 0, right: 0, top: 15, bottom: 4, alignItems: "center", justifyContent: "center" }}>
                <View style={{ paddingHorizontal: 20, paddingVertical: 10, borderWidth: 4, borderColor: LibStyle.colorRed, backgroundColor: "white", transform: [{ rotate: '-20deg' }] }}>
                  <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 16, letterSpacing: 0, color: LibStyle.colorRed }}>{esp.lang("event/coupon", "voucher_used")}</Text>
                </View>
              </View>
            }
          </View>
          <Text allowFontScaling={false} numberOfLines={2} style={{ marginTop: 10, fontFamily: "ArialBold", fontSize: 18, fontWeight: "bold", letterSpacing: 3.5, color: "#aeacb2", textAlign: 'center' }}>{code}</Text>

          <View style={{ padding: 15, paddingBottom: 20, marginTop: 40 }}>
            {
              image &&
              <LibPicture source={{ uri: image }} resizeMode="cover" style={{ height: (LibStyle.width - 220) * 0.43, width: LibStyle.width - 220, borderRadius: 5, alignSelf: "center", marginBottom: 15 }} />
            }

            <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{esp.lang("event/coupon_detail", "event_name")}</Text>
            <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 18, letterSpacing: 0, color: "#333333" }}>{event_name}</Text>


            {
              title && title != "" &&
              <>
                <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{esp.lang("event/coupon_detail", "coupon_name")}</Text>
                <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 18, letterSpacing: 0, color: "#333333" }}>{title}</Text>
              </>
            }
            {
              amount && amount != "" && amount != 0 &&
              <>
                <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{esp.lang("event/coupon_detail", "amount")}</Text>
                <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 18, letterSpacing: 0, color: "#333333" }}>{LibUtils.money(amount)}</Text>
              </>
            }
            {
              merchant_name && merchant_name != "" &&
              <>
                <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{esp.lang("event/coupon_detail", "merchant_redeem")}</Text>
                <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 18, letterSpacing: 0, color: "#333333" }}>{merchant_name}</Text>
              </>
            }

            {
              info && info != "" &&
              <>
                <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: "SFProText", fontSize: 12, letterSpacing: 1, color: "#555555" }}>{esp.lang("event/coupon_detail", "info")}</Text>
                <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 16, letterSpacing: 1, lineHeight: 24, color: "#333333", textAlign: "justify" }}>{info}</Text>
              </>
            }
          </View>
        </View>

        <View style={{ backgroundColor: "#e6e6e6", width: 30, height: 30, borderRadius: 15, position: "absolute", left: 8, top: 290 }} />
        <View style={{ backgroundColor: "#e6e6e6", width: 30, height: 30, borderRadius: 15, position: "absolute", right: 8, top: 290 }} />
        <View style={{ borderTopWidth: 1, borderColor: "#908d94", borderStyle: "dashed", height: 0, position: "absolute", top: 305, left: 37, right: 37 }} />

      </ScrollView>
    </View>
  )
}