// withHooks
// noPage
import { applyStyle } from 'esoftplay';
import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/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 { Pressable, Text, View } from 'react-native';


export interface EventOrder_itemProps {
  item: any,
  onPress: () => void
}

export function textColor(colorTag: string) {
  const normalized = Number(`0x${colorTag?.substr(1, 16)}`);
  const r = (normalized >> 16) & 0xFF;
  const g = (normalized >> 8) & 0xFF;
  const b = normalized & 0xFF;
  const luminocity = (0.2106 * r + 0.7171 * g + 0.0721 * b) / 255;

  return luminocity < 0.6 ? '#FFFFFF' : '#000000';
}

export default function m(props: EventOrder_itemProps): any {
  const { item } = props
  let isInvitationDate = item?.ondate == "0000-00-00" && item?.kind_detail?.use_code == 1
  let isOnlineWithoutDate = item?.ondate == "0000-00-00" && item?.kind_detail?.everyday_pass == 0
  return (
    <Pressable onPress={props.onPress} style={{ backgroundColor: '#fff', borderRadius: 5, overflow: 'hidden', width: LibStyle.width - 30, margin: 15, marginBottom: 0 }}>
      <View style={{ alignContent: 'center', borderBottomWidth: 1, borderBottomColor: textColor(item?.color), alignItems: 'center', justifyContent: 'center', backgroundColor: item?.color, padding: 10 }}>
        <EventHtmltext allowFontScaling={false} numberOfLines={2} ellipsizeMode="tail" style={{ color: textColor(item?.color), alignSelf: 'center', textAlign: 'center', fontSize: 16, fontWeight: 'bold' }}> {item?.price_name}</EventHtmltext>
      </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" })}>{item?.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: item?.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" />
                  {
                    Number(item?.qty) == 0 ?
                      <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{esp.lang("event/order_item", "ticket_run_out")}</Text>
                      : <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 16, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{esp.lang("event/order_item", "ticket", String(LibUtils.number(item?.qty)))}</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" })}>{item?.total != "0" ? LibUtils.money(Number(item?.total), item.currency) : esp.lang("event/order_item", "free")}
                    {item.hasOwnProperty("payment_title") && " (" + item.payment_title + ")"}
                  </Text>
                </View>

                {
                  item?.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" })}>{
                      (isInvitationDate || isOnlineWithoutDate) ? // apakah dia tipe undangan dengan tanggal atau online tanpa tanggal
                        esp.lang("event/order_item", "used_once") :
                        (item?.start_date == "0000-00-00" && item?.end_date == "0000-00-00") ? // apakah eventnya sudah di hapus, tau nya dari start_date dan end_datenya 0000-00-00
                          esp.lang("event/order_item", "event_arsip") :
                          LibUtils.getDateRange(item?.start_date, item?.end_date) // contoh 20 - 23 Oktober 2023
                    }</Text>
                  </View>
                }
              </View>
              {
                item?.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(item?.ondate).localeFormat("DD")}</Text>
                  <Text allowFontScaling={false} style={{ fontSize: 20, fontWeight: 'bold', marginTop: -5, }}>{LibUtils.moment(item?.ondate).localeFormat("MMM")}</Text>
                </View>
              }
            </View>
          </View>

          {
            item?.address != "" &&
            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 10 }}>
              <LibIcon name='map-marker' size={18} color="#9b9b9b" />
              <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{item?.address}</Text>
            </View>
          }
        </View>
        {
          item?.status == 0 ?
            <View style={applyStyle({ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', alignContent: 'center', paddingHorizontal: 15 })}>
              <View style={{ flex: 1 }}>
                <EventCountdown_base expired={LibUtils.moment(item?.exp_payment).serverFormat('YYYY-MM-DD HH:mm:ss', item?.timezone)} timezone={item?.timezone} style={applyStyle({ fontSize: 12, color: LibStyle.colorRed, fontFamily: "ArialBold", fontWeight: "normal", fontStyle: "normal" })} />
              </View>
              {
                !!item?.booking_code &&
                <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>
            :
            <Text allowFontScaling={false} style={applyStyle({ padding: 10, paddingBottom: 0, textAlign: 'center', textAlignVertical: 'center', fontFamily: "ArialBold", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 4, color: item?.status == 1 ? '#70472b' : LibStyle.colorRed })}>{item?.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>
  )
}