// withHooks

import { applyStyle } from 'esoftplay';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import React, { useEffect } from 'react';
import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface EventExchange_reward_resultArgs {

}
export interface EventExchange_reward_resultProps {

}
export default function m(props: EventExchange_reward_resultProps): any {
  const { qr, event_id, event_title }: any = LibNavigation.getArgsAll(props)

  const [result, setResult] = useSafeState<any>()

  function loadData() {
    let post = {
      event_id: event_id,
      qr: qr
    }
    new LibCurl('event_tms_order_review', post, (res, msg) => {
      setResult(res)
    }, (err) => {
      LibDialog.warning(esp.lang("event/exchange_reward_result", "oops"), err?.message)
      LibNavigation.back()
    })
  }

  function submitSign() {
    let post = {
      booking_id: result?.booking?.id,
      event_id: event_id,
    }
    LibProgress.show("Mohon Tunggu")
    new LibCurl('event_tms_order_review_sign', post, (res, msg) => {
      LibProgress.hide()
      LibToastProperty.show(msg)
      LibNavigation.back()
      LibNavigation.navigate('component/scanner', { event_title: event_title, event_id: event_id, fromPage: "event/exchange_reward" })

    }, (err) => {
      LibProgress.hide()
      LibDialog.warning(esp.lang("event/exchange_reward_result", "oops"), err?.message)
    }, 1)
  }

  useEffect(() => {
    loadData()
  }, [])

  if (!result) {
    return <LibLoading />
  }

  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title={esp.lang("event/exchange_reward_result", "header_title")} subtitle={event_title} />
      <ScrollView>
        <Pressable onPress={() => { }} style={{ backgroundColor: '#fff', borderRadius: 5, overflow: 'hidden', width: LibStyle.width - 30, margin: 15, marginBottom: 0 }}>
          <View style={{ alignContent: 'center', borderBottomWidth: 1, borderBottomColor: "#c9c9c9", alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorPrimary, padding: 10 }}>
            <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode="tail" style={{ color: "#fff", alignSelf: 'center', textAlign: 'center', fontSize: 16, fontWeight: 'bold' }}> {result?.booking?.price_name}</Text>
          </View>
          <View style={{ padding: 10, backgroundColor: '#fff', flex: 1 }}>
            <Text allowFontScaling={false} style={applyStyle({ marginHorizontal: 15, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{result?.booking?.event_name}</Text>

            <View style={applyStyle({ marginHorizontal: 15, borderBottomWidth: 1, marginTop: 15, borderBottomColor: '#9b9b9b' })}>
              <View style={{ flexDirection: 'row', marginBottom: 10 }}>
                <View style={applyStyle({ width: 60, height: 60, borderRadius: 5, backgroundColor: LibStyle.colorBgGrey, ...LibStyle.elevation(2) })}>
                  <LibPicture style={applyStyle({ width: 60, height: 60, resizeMode: 'cover', borderRadius: 5, })} source={{ uri: result?.event?.image }} />
                </View>
                <View style={applyStyle({ flexDirection: 'row', justifyContent: 'space-between', marginLeft: 14, flex: 1 })}>
                  <View style={{ flex: 2, marginRight: 5, }}>
                    <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 4 }}>
                      <LibIcon name='ticket' size={20} color="#9b9b9b" />
                      <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 16, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{LibUtils.number(result?.booking?.qty)} Tiket</Text>
                    </View>
                    <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 4 }}>
                      <LibIcon name='cash' size={20} color="#9b9b9b" />
                      <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{LibUtils.money(result?.booking?.total)}</Text>
                    </View>

                    {
                      result?.booking?.ondate == "0000-00-00" &&
                      <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 4 }}>
                        <LibIcon name='calendar' size={18} color="#9b9b9b" />
                        <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{LibUtils.getDateRange(result?.booking?.start_date, result?.booking?.end_date)}</Text>
                      </View>
                    }
                  </View>
                  {
                    result?.booking?.ondate != "0000-00-00" &&
                    <View style={{ flex: 1, marginLeft: 15, alignContent: 'flex-end', alignItems: 'flex-end' }}>
                      <Text allowFontScaling={false} style={{ fontSize: 30, fontWeight: 'bold' }}>{LibUtils.moment(result?.booking?.ondate).localeFormat("DD")}</Text>
                      <Text allowFontScaling={false} style={{ fontSize: 20, fontWeight: 'bold', marginTop: -5, }}>{LibUtils.moment(result?.booking?.ondate).localeFormat("MMM")}</Text>
                    </View>
                  }
                </View>
              </View>

            </View>
            <Text allowFontScaling={false} style={applyStyle({ padding: 10, paddingBottom: 0, textAlign: 'center', textAlignVertical: 'center', fontFamily: "ArialBold", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 4, color: '#70472b' })}>{result?.booking?.booking_code}</Text>
            <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 })}>
              <View style={applyStyle({ width: 25, height: 25, borderRadius: 12.5, backgroundColor: LibStyle.colorBgGrey, marginLeft: -12.5 })} />
              <View style={applyStyle({ flex: 1 })} />
              <View style={applyStyle({ width: 25, height: 25, borderRadius: 12.5, backgroundColor: LibStyle.colorBgGrey, marginRight: -12.5 })} />
            </View>
          </View>
        </Pressable>
      </ScrollView>

      <TouchableOpacity onPress={() => {
        submitSign()
      }}>
        <View style={{ margin: 15, marginTop: 20, height: 35, borderRadius: 5, backgroundColor: LibStyle.colorRed, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 }} >
          <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", textAlign: "center", textAlignVertical: 'center', color: 'white', marginRight: 13, marginLeft: 10 }} >{esp.lang("event/exchange_reward_result", "submit")}</Text>
        </View>
      </TouchableOpacity>
    </View>
  )
}