// withHooks
import { EventMessage } from 'esoftplay/cache/event/message/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface EventOrder_detail_addons_bookedArgs {

}
export interface EventOrder_detail_addons_bookedProps {
  addonsBooked: any
  errorAddonsBooked: any
  onPress: () => void
}
export default function m(props: EventOrder_detail_addons_bookedProps): any {
  return (
    <View style={{ padding: 10, paddingLeft: 15, paddingBottom: 0 }}>
      {
        props?.addonsBooked?.length > 0 && props?.addonsBooked?.map((x: any, i: number) => {
          return (
            <View key={i} style={{ flexDirection: 'row', marginBottom: 10 }}>
              <LibIcon name='check-decagram' size={20} color={LibStyle.colorGreen} />
              <View style={{ marginLeft: 10 }}>
                <Text allowFontScaling={false} style={{ color: '#484848', fontSize: 14, fontWeight: 'bold', fontFamily: "Arial" }}>
                  {x.price_name}
                  {x?.list?.length == 1 && x?.list?.[0]?.ondate == "0000-00-00" ? " (" + Number(x?.list?.[0]?.qty) + " Tiket)" : ""}
                </Text>
                {
                  x?.list?.length > 0 && x?.list?.map((z: any, i: number) => {
                    if (z?.ondate != "0000-00-00") {
                      return (
                        <Text key={i} allowFontScaling={false}>{LibUtils.moment(z.ondate).localeFormat('DD MMM YYYY') + " (" + Number(z.qty) + " Tiket)"}</Text>
                      )
                    } else {
                      return null
                    }
                  })
                }
              </View>
            </View>
          )
        })
      }
      {
        props?.errorAddonsBooked &&
        <EventMessage
          message={props?.errorAddonsBooked?.message}
          children={
            <TouchableOpacity onPress={() => { props.onPress() }} style={{ marginTop: -10 }}>
              <LibIcon name='refresh-circle' size={40} color={LibStyle.colorBrown} />
            </TouchableOpacity>
          }
        />
      }
    </View>
  )
}