// withHooks
// noPage
import { applyStyle } from 'esoftplay';
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 EventVisitor_history_itemProps {
  item: any,
  doAction: () => void
}

export default function m(props: EventVisitor_history_itemProps): any {
  const { item } = props
  let isInvitationDate = item?.ondate == "0000-00-00" && item?.detail?.detail_ticket?.flag?.use_code == 1

  return (
    <Pressable onPress={props.doAction} style={{ backgroundColor: '#fff', flex: 1, borderRadius: 5, overflow: 'hidden', width: LibStyle.width - 30, /* height: itemHeight, */ margin: 15, marginBottom: 0 }}>
      <View style={{ borderLeftWidth: 20, borderLeftColor: item?.type == 1 ? item?.color : item.type == 2 ? '#d0021b' : '#1abc9c' }}>
        <View style={{ marginLeft: -5, padding: 10, paddingBottom: 0, flex: 1 }}>
          <Text allowFontScaling={false} style={applyStyle({ marginHorizontal: 10, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{item.event_name}</Text>
          <View style={applyStyle({ marginHorizontal: 10, flexDirection: 'row', /* borderBottomWidth: 1,borderBottomColor: '#9b9b9b', */ paddingBottom: 15, marginTop: 15 })}>
            <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({ marginLeft: 14, flex: 1 })}>
              <EventHtmltext allowFontScaling={false} numberOfLines={3} ellipsizeMode="tail" style={applyStyle({ marginBottom: 5, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1, color: '#000' })}>{item.type == 1 ? item?.price_type?.name : item?.type_name}</EventHtmltext>
              {
                item.hasOwnProperty('exhibitor_name') &&
                <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode="tail" style={applyStyle({ marginBottom: 5, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1, color: '#000' })}>{item.exhibitor_name}</Text>
              }
              {
                item.type == 1 &&
                <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 4 }}>
                  <LibIcon name='ticket' size={18} color={"#9b9b9b"} />
                  <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
                    <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1, color: "#000" })}> {esp.lang("event/visitor_history_item", "qty", item?.qty)} </Text>
                    {
                      item.show_ticket_status == 1 &&
                      <Text allowFontScaling={false} style={applyStyle({ fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1, color: "#000" })}>
                        {
                          item?.qty_used == 0 ? esp.lang("event/visitor_history_item", "not_used")
                            :
                            (item.kind == "4" || item.kind == "204") ?
                              esp.lang("event/visitor_history_item", "used_today", item?.qty_used_today)
                              :
                              esp.lang("event/visitor_history_item", "used", item?.qty_used)
                        }
                      </Text>
                    }
                  </View>
                </View>
              }
              <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 4 }}>
                <LibIcon name='calendar' size={18} color="#9b9b9b" />
                {
                  item.type == 1 ?
                    <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>
                      {item.ondate == "0000-00-00" ? (isInvitationDate ? esp.lang("event/visitor_history_item", "use_once") : LibUtils.getDateRange(item.start_date, item.end_date)) : LibUtils.moment(item.ondate).localeFormat("DD MMMM YYYY")}
                    </Text>
                    :
                    <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}> {LibUtils.getDateRange(item.start_date, item.end_date)} </Text>

                }
              </View>
            </View>
          </View>

        </View>

        {
          item.type == 1 &&
          <View style={applyStyle({ marginTop: -10, marginBottom: -10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' })}>
            <View style={applyStyle({ width: 25, height: 25, borderRadius: 12.5, backgroundColor: LibStyle.colorBgGrey, marginLeft: -35 })} />
            <View style={applyStyle({ borderWidth: 2, borderColor: LibStyle.colorBgGrey, height: 1, borderStyle: 'dashed', borderRadius: 1, flex: 1 })} />
            <View style={applyStyle({ width: 25, height: 25, borderRadius: 12.5, backgroundColor: LibStyle.colorBgGrey, marginRight: -12.5 })} />
          </View>
        }

        {
          item.type == 1 &&
          <View style={{ padding: 10 }}>
            <Text allowFontScaling={false} style={applyStyle({ textAlign: 'center', textAlignVertical: 'center', fontFamily: "ArialBold", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 4, color: LibStyle.colorRed })}>{item.code}</Text>
          </View>
        }
      </View>
    </Pressable>
  )
}