// withHooks

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 moment from 'esoftplay/moment';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface EventList_item2Args {

}
export interface EventList_item2Props {
  address: string,
  end_date: string,
  end_time: string,
  id: string,
  image: string,
  location_id: string,
  location_latlong: string,
  location_name: string,
  title: string,
  price_max: string,
  price_min: string,
  start_date: string,
  start_time: string,
  timezone: string,
  url: string,
  description: string,
  onPress: () => void
}
export default function m(props: EventList_item2Props): any {
  moment().locale('id')
  function renderPrice(min: string, max: string) {
    let price = ''
    if (min == '0') {
      price = esp.lang("event/list_item2", "start_from_free")
    } else if (max == min) {
      price = LibUtils.money(max)
    } else {
      price = esp.lang("event/list_item2", "start_from") + LibUtils.money(min)
    }
    return price
  }

  return (
    <TouchableOpacity onPress={props.onPress} >
      <View style={styleId_ZImj6p} >
        <View style={styleId_Z1O3hty} >
          <LibPicture source={{ uri: props.image }} style={styleId_1Gpj0R} />
        </View>
        <View style={styleId_vhIbx} >
          <Text allowFontScaling={false} style={styleId_ZS5h7I} numberOfLines={2} >{props.title}</Text>
          <View style={styleId_Z2cguyF} >
            <LibIcon name="calendar" color={LibStyle.colorGreen} size={10} />
            <Text allowFontScaling={false} style={styleId_3SnnV} >{moment(props.start_date + ' ' + props.start_time).localeFormat('DD MMMM YYYY')}</Text>
          </View>
          <Text style={styleId_ZvrzT3} >{renderPrice(props.price_min, props.price_max)}</Text>
          <Text
            numberOfLines={5}
            style={styleId_Z1q7idY} >{props.address + ' ' + props.location_name}</Text>
        </View>
      </View>
    </TouchableOpacity>
  )
}
const styleId_ZImj6p: any = { flexDirection: 'row', backgroundColor: 'white', borderRadius: 10, marginVertical: 10, marginHorizontal: 20, ...LibStyle.elevation(2) }
const styleId_Z1O3hty: any = { width: 154, height: 140, borderBottomLeftRadius: 10, borderTopLeftRadius: 10, overflow: 'hidden' }
const styleId_1Gpj0R: any = { height: 140, width: 154, resizeMode: 'cover' }
const styleId_vhIbx: any = { flex: 1, padding: 12 }
const styleId_ZS5h7I: any = { fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#70472b" }
const styleId_Z2cguyF: any = { flexDirection: 'row', alignItems: 'center', marginTop: 6, marginBottom: 5 }
const styleId_3SnnV: any = { fontFamily: "Arial", fontSize: 9, color: LibStyle.colorGreen, marginLeft: 5 }
const styleId_ZvrzT3: any = { fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, color: LibStyle.colorBlue, marginBottom: 8 }
const styleId_Z1q7idY: any = { fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, color: "#909090" }