// withHooks
import { applyStyle } from 'esoftplay';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventMessage } from 'esoftplay/cache/event/message/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/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 moment from 'esoftplay/moment';

import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
import esp from 'esoftplay/esp';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface EventOrder_historyArgs {

}
export interface EventOrder_historyProps {

}
export default function m(props: EventOrder_historyProps): any {

  function renderItem(item: any) {
    let diffDay = LibUtils.moment(item.ondate).fromNow()


    return (
      <TouchableOpacity onPress={() => { LibNavigation.navigate('event/order_detail', { url: item.url }) }}>
        <View style={applyStyle({ width: LibStyle.width - 30, marginTop: 15, marginLeft: 15, marginRight: 15, borderRadius: 5, backgroundColor: '#fff', ...LibStyle.elevation(2) })}>
          <Text allowFontScaling={false} style={applyStyle({ paddingLeft: 15, paddingTop: 10, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, })}>{item.event_name}</Text>
          <View style={applyStyle({ paddingHorizontal: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' })}>
            <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, marginTop: 4 })}>{item.ondate != "0000-00-00" ? LibUtils.moment(item.ondate).localeFormat('DD MMMM YYYY') : esp.lang("event/order", "ticket") + item.type_name}</Text>
            {
              item?.status == 1 &&
              <Text allowFontScaling={false} style={applyStyle({ marginLeft: 14, fontFamily: "ArialBold", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed })}>{
                item.ondate == LibUtils.moment().localeFormat("YYYY-MM-DD") ? esp.lang("event/order", "now_show") : item?.ondate != "0000-00-00" ? (diffDay) : ''
              }</Text>
            }
          </View>

          <View style={{ marginLeft: 15, marginTop: 4, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
            <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{item?.qty}</Text>
            <Text allowFontScaling={false} style={{ marginLeft: 4, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{esp.lang("event/order_history", "ticket_qty")}</Text>
          </View>

          {/* garis atas */}
          <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' })}>
            <View style={applyStyle({ width: 25, height: 25, borderRadius: 12.5, backgroundColor: '#f6f6f6', marginLeft: -12.5 })} />
            <View style={applyStyle({ borderBottomWidth: 1, borderBottomColor: '#9b9b9b', flex: 1 })} />
            <View style={applyStyle({ width: 25, height: 25, borderRadius: 12.5, backgroundColor: '#f6f6f6', marginRight: -12.5 })} />
          </View>

          <View style={applyStyle({ flexDirection: 'row', borderBottomWidth: 1, paddingBottom: 10, borderBottomColor: '#9b9b9b' })}>
            <LibPicture style={applyStyle({ width: 60, height: 60, resizeMode: 'cover', borderRadius: 5, marginLeft: 15 })} source={{ uri: item.image }} />
            <View style={applyStyle({ flex: 1 })}>
              <Text allowFontScaling={false} style={applyStyle({ marginLeft: 14, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#00b894" })}>{item.type_name}</Text>
              {
                item.total != "0" &&
                <Text allowFontScaling={false} style={applyStyle({ marginLeft: 14, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 4 })}>{LibUtils.money(item.total)}</Text>
              }
              <Text allowFontScaling={false} style={applyStyle({ marginLeft: 14, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#00b894", marginTop: 7 })}>{esp.lang("event/order", "event_period")}</Text>
              <Text allowFontScaling={false} style={applyStyle({ marginLeft: 14, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 4 })}>{LibUtils.getDateRange(item.start_date, item.end_date)}</Text>
            </View>
          </View>
          {
            item.status == 0 ?
              <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', alignContent: 'center', paddingHorizontal: 15 })}>
                <EventCountdown_base expired={moment(item.exp_payment).serverFormat('YYYY-MM-DD HH:mm:ss')} timezone={item?.timezone} style={applyStyle({ flex: 1, fontSize: 12, color: LibStyle.colorRed, fontFamily: "ArialBold", fontWeight: "normal", fontStyle: "normal" })} />
                <Text allowFontScaling={false} style={applyStyle({ flex: 1, flexWrap: 'wrap', padding: 10, paddingHorizontal: 0, textAlign: 'right', fontFamily: "ArialBold", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed })}>{item.booking_code}</Text>
              </View>
              :
              item.status == 1 ?
                <Text allowFontScaling={false} style={applyStyle({ padding: 10, textAlign: 'center', textAlignVertical: 'center', fontFamily: "ArialBold", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 4, color: '#70472b' })}>{item.booking_code}</Text>
                :
                <Text allowFontScaling={false} style={applyStyle({ padding: 10, textAlign: 'center', textAlignVertical: 'center', fontFamily: "ArialBold", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 4, color: LibStyle.colorRed })}>{item.booking_code}</Text>
          }
        </View>
      </TouchableOpacity>
    )
  }

  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title={esp.lang("event/order_history", "header")} />
      <View style={{ flex: 1, backgroundColor: '#fff' }}>
        <LibInfinite
          url={'event_order_history'}

          // key={status + counter + selectedDate}
          errorView={(err: any) => (
            <EventMessage message={err} />
          )}
          renderItem={renderItem}
        />
      </View>
    </View>
  )
}