// withHooks

import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
import { EventQr_bg } from 'esoftplay/cache/event/qr_bg/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/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 { UseCondition } from 'esoftplay/cache/use/condition/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import QRCode from 'react-native-qrcode-svg';


export interface EventOrder_detail_rescheduleArgs {

}
export interface EventOrder_detail_rescheduleProps {
  dataTicket: any
  onPressQr: () => void
}
export default function m(props: EventOrder_detail_rescheduleProps): any {
  let result = props.dataTicket
  const imgWidth = LibStyle.width - 35
  const imgHeight = imgWidth / 1920 * 1080
  moment().locale?.('id')

  const dateRange = LibUtils.getDateRange(result?.start_date, result?.end_date, " - ")
  let isInvitationDate = result?.ondate == "0000-00-00" && result?.kind_detail?.use_code == 1
  let isOnlineWithoutDate = result?.ondate == "0000-00-00" && result?.kind_detail?.everyday_pass == 0

  return (
    <View style={{ flex: 1, backgroundColor: '#f6f6f6' }}>
      <EventHeader title={esp.lang("event/order_detail", "order_detail")} />
      <View style={[{ margin: 18, borderTopLeftRadius: 7, borderTopRightRadius: 7, backgroundColor: '#fff', paddingBottom: 10 }, LibStyle.elevation(3)]}>

        <TouchableOpacity onPress={() => {
          LibNavigation.navigate('lib/gallery', { image: result?.image })
        }}>
          <LibPicture source={{ uri: result?.image }} style={{ borderTopLeftRadius: 7, borderTopRightRadius: 7, height: imgHeight, width: imgWidth }} resizeMode="cover" />
        </TouchableOpacity>
        <View style={{ flexDirection: 'row', margin: 14, marginTop: 4, justifyContent: 'space-between' }}>
          <View style={{ marginTop: 14 }}>
            <EventHtmltext allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{esp.lang("event/order_detail", "ticket")}{result?.price_name}</EventHtmltext>
            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
              <LibIcon name="ticket-outline" size={20} />
              <Text allowFontScaling={false} style={{ marginLeft: 6, fontFamily: "Arial", fontSize: 30, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{result?.qty}</Text>
              <Text allowFontScaling={false} style={{ marginLeft: 4, fontFamily: "Arial", fontSize: 16, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{esp.lang("event/order_detail", "ticket")}</Text>
            </View>
            <UseCondition if={result?.show_ticket_status == 1 && result?.status == 1 || result?.status == 3 || result?.status == 6}>
              <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", flexWrap: 'wrap', letterSpacing: 0, marginBottom: 12, color: "#484848" }}>
                {
                  result?.qty_used == 0 ? esp.lang("event/order", "have_not_been_used")
                    :
                    result.kind_detail?.everyday_pass == 1 ?
                      "(" + result?.qty_used_today + " " + esp.lang("event/order_detail", "used_today") + ")"
                      :
                      "(" + result?.qty_used + " " + esp.lang("event/order_detail", "used") + ")"
                }
              </Text>
            </UseCondition>
            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
              <LibIcon name="calendar-blank-outline" size={20} />
              <Text allowFontScaling={false} style={{ marginLeft: 6, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{result?.ondate != "0000-00-00" ? moment(result?.ondate).localeFormat("DD MMMM YYYY") : ((isInvitationDate || isOnlineWithoutDate) ? esp.lang("event/order_item", "used_once") : dateRange)}</Text>
            </View>
          </View>
          {
            result?.status == "1" &&
            <View style={{ marginTop: 14, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
              {
                result?.qr != "" &&
                <TouchableOpacity onPress={() => {
                  result?.status == "1" && props.onPressQr()
                }}>
                  <EventQr_bg>
                    <QRCode ecl="H" size={80} value={result?.qr} />
                  </EventQr_bg>
                </TouchableOpacity>
              }
            </View>
          }
        </View>

        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }} >
          <View style={{ width: 19, height: 19, borderRadius: 9.5, backgroundColor: "#f6f6f6", marginLeft: -9.5 }} />
          {/* <Text style={{ marginTop: 5, alignSelf: 'center', fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#f39c12" }} ></Text> */}
          <View style={{ width: 19, height: 19, borderRadius: 9.5, backgroundColor: "#f6f6f6", marginRight: -9.5 }} />
        </View>

        <View style={{ margin: 14, flexDirection: 'row' }}>
          <Text style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }} >{result?.reschedule_notes}</Text>
        </View>
        {
          result?.par_id > 0 ?
            null
            :
            <EventButton onPress={() => {
              LibNavigation.navigate('event/order_reschedule', { url: result?.url_reschedule })
            }} label={result?.is_refundable == 1 ? esp.lang("event/order_detail", "refund_rescedule") : esp.lang("event/order_detail", "rescedule")} backgroundColor={LibStyle.colorGreen} style={{ marginLeft: 20, marginRight: 20, marginBottom: 10 }} />
        }
      </View>
    </View>
  )
}