// withHooks

import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
import { LibGradient } from 'esoftplay/cache/lib/gradient/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface EventButton_order_detailArgs {

}
export interface EventButton_order_detailProps {
  onPress: () => void
  title: string
  subtitle?: string
  info?: string
  color: any,
  icon: any,
  disable?: boolean
  status_message?: string
}
export default function m(props: EventButton_order_detailProps): any {
  return (
    <TouchableOpacity onPress={props.onPress} activeOpacity={props.disable == true ? 1 : 0}>
      <View style={{ borderWidth: 1, borderColor: '#ccc', margin: 15, borderRadius: 7, marginBottom: 0, overflow: 'hidden', flexDirection: 'row' }}>
        <LibGradient
          colors={props.disable ? [LibStyle.colorBgGrey, LibStyle.colorBgGrey, "#f1f2f3"] : [props.color, props.color, "#f1f2f3",]}
          direction='left-to-right'
          style={{ margin: 3, borderRadius: 5, padding: 7, flex: 4, alignContent: 'center', justifyContent: 'center' }}
        >
          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ color: props?.disable ? "#adb5bd" : EventOrder_itemProperty.textColor(props?.color), fontSize: 16, fontWeight: 'bold' }}>{props.title}</Text>
          {
            props.subtitle && props.subtitle != "" &&
            < Text allowFontScaling={false} style={{ fontSize: 11, color: props?.disable ? "#adb5bd" : EventOrder_itemProperty.textColor(props?.color), fontWeight: 'bold', textTransform: 'uppercase', letterSpacing: 1.5, }}>{props.subtitle}</Text>
          }

          {
            props.info != "" &&
            <Text allowFontScaling={false} ellipsizeMode='tail' style={{ color: props?.disable ? "#adb5bd" : EventOrder_itemProperty.textColor(props?.color), fontSize: 12, fontWeight: 'normal' }}>{props?.info}</Text>
          }
          {
            props.status_message && props.status_message != "" &&
            <Text allowFontScaling={false} ellipsizeMode='tail' style={{ color: LibStyle.colorRed, fontSize: 12, fontWeight: 'normal' }}>{props?.status_message}</Text>
          }
        </LibGradient>
        <View style={{ flex: 1, margin: 3, borderRadius: 5, ...LibStyle.elevation(2), backgroundColor: props.disable ? LibStyle.colorBgGrey : props.color, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
          {/* <LibIcon name={"dice-multiple"} size={40} color={EventOrder_itemProperty.textColor(props.color)} style={{ opacity: 1 }} /> */}
          <LibIcon name={props.icon} size={35} color={props?.disable ? "#adb5bd" : EventOrder_itemProperty.textColor(props?.color)} style={{ opacity: 1 }} />
        </View>
      </View>
    </TouchableOpacity >
  )
}