// withHooks
// noPage
import esp from 'esoftplay/esp';

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketAds_card_detail } from 'esoftplay/cache/market/ads_card_detail/import';
import { MarketAds_grup_detailArgs } from 'esoftplay/cache/market/ads_grup_detail/import';
import { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketAds_product_grup_itemArgs {

}
export interface MarketAds_product_grup_itemProps {
  id: string,
  type: string,
  title: string,
  price: string,
  price_limit: string,
  price_keyword_min: string,
  price_keyword_max: string,
  start_date: string,
  end_date: string,
  clicked: string,
  displayed: string,
  total_income: string,
  total_ads: string,
  active: number,
  price_daily: string,
  total_sold: string,
  url_detail: string,
  clicked_pr: string,
  onChangeActive: () => void,
  onDelete: () => void,
  onEdit: () => void
}
export default function m(props: MarketAds_product_grup_itemProps): any {

  const opt = [
    {
      id: 1,
      text: props.active == 1 ? esp.lang("market/ads_product_grup_item", "nonactive") : esp.lang("market/ads_product_grup_item", "activate"),
      action: 'change',
      icon: 'circle'
    },
    {
      id: 2,
      text: esp.lang("market/ads_product_grup_item", "edit"),
      action: 'edit',
      icon: 'pencil'
    },
    {
      id: 3,
      text: esp.lang("market/ads_product_grup_item", "delte"),
      action: 'delete',
      icon: 'delete'
    }
  ]


  function showOption() {
    MarketSlidingupProperty.add(
      <View style={styleId_4Hrce} >
        <View style={styleId_Z1a59jN} >
          <TouchableOpacity onPress={() => MarketSlidingupProperty.hide()} style={styleId_1hcIwd} >
            <LibIcon name="close" size={26} />
          </TouchableOpacity>
          <Text allowFontScaling={false} style={styleId_Z26yQmp}>{props?.title}</Text>
        </View>
        {
          opt.map((item: any, i: number) => (
            <TouchableOpacity key={i} onPress={() => {
              if (item.action == 'change') {
                props.onChangeActive()
                MarketSlidingupProperty.hide()
              } else if (item.action == 'edit') {
                props.onEdit()
                MarketSlidingupProperty.hide()
              } else if (item.action == 'delete') {
                props.onDelete()
                MarketSlidingupProperty.hide()
              }
            }} style={styleId_Z6t1CU}>
              <LibIcon color={'#c5c5c5'} size={18} name={item?.icon} style={styleId_1hcIwd} />
              <Text allowFontScaling={false} style={styleId_Z1LVzQt} >{item?.text}</Text>
            </TouchableOpacity>
          ))
        }
      </View>
    )
  }

  function renderPrice(max: string, min: string) {
    let price = ''

    if (max == min) {
      price = LibUtils.money(max)
    } else {
      price = LibUtils.money(min) + " - " + LibUtils.money(max)
    }

    return price
  }

  const styleId_Z1A1Hyi: any = { marginRight: 10, backgroundColor: props.active == 1 ? MarketStyle.colorPrimaryMarket : '#ddd', padding: 3, borderRadius: 3 }
  const styleId_1HY0lF: any = { fontFamily: 'Arial', fontSize: 12, fontWeight: 'bold', color: props?.active == 1 ? 'white' : '#f5f5f5' }

  return (
    <TouchableOpacity activeOpacity={1} onPress={() => {
      LibNavigation.navigate<MarketAds_grup_detailArgs>('market/ads_grup_detail', { url: props?.url_detail })
    }} style={styleId_2chrtr} >
      <View style={styleId_1fmvBo} >
        <View style={styleId_ZyfQmp}>
          <LibIcon name='folder' color={'#7AB2EC'} style={styleId_wxwT1} size={18} />
          <Text allowFontScaling={false} style={styleId_XuSOc} >{props?.title}</Text>
        </View>
        <View style={styleId_1fmvBo}>
          <View style={styleId_Z1A1Hyi} >
            <Text allowFontScaling={false} style={styleId_1HY0lF} >{props?.active == 1 ? esp.lang("market/ads_product_grup_item", "actove") : esp.lang("market/ads_product_grup_item", "not_active")}</Text>
          </View>
          <TouchableOpacity hitSlop={styleId_2fy3Va} onPress={() => {
            showOption()
            MarketSlidingupProperty.show()
          }} >
            <LibIcon name="dots-vertical" color='#000' size={28} />
          </TouchableOpacity>
        </View>
      </View>

      <View>
        <Text allowFontScaling={false} style={styleId_2wXmgE} >{esp.lang("market/ads_product_grup_item", "keyword_cost", renderPrice(props.price_keyword_max, props.price_keyword_min))}</Text>
      </View>

      <MarketAds_card_detail clicked={props?.clicked} displayed={props?.displayed} total_ads={props?.total_ads} total_income={props?.total_income} total_sold={props?.total_sold} clicked_pr={props?.clicked_pr} />
    </TouchableOpacity>
  )
}
const styleId_4Hrce: any = { backgroundColor: "white", paddingHorizontal: 17, borderTopLeftRadius: 15, borderTopRightRadius: 15, paddingBottom: 20 }
const styleId_Z1a59jN: any = { flexDirection: "row", alignItems: "center", marginVertical: 10 }
const styleId_1hcIwd: any = { marginRight: 10 }
const styleId_Z26yQmp: any = { fontWeight: 'bold', fontSize: 16 }
const styleId_Z6t1CU: any = { paddingLeft: 0, padding: 10, borderBottomWidth: 1, borderBottomColor: '#f5f5f5', flexDirection: 'row', alignItems: 'center' }
const styleId_Z1LVzQt: any = { fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 }
const styleId_2chrtr: any = { marginHorizontal: 17, marginBottom: 10, backgroundColor: 'white', padding: 15, borderRadius: 8, ...LibStyle.elevation(3) }
const styleId_1fmvBo: any = { flexDirection: 'row', alignItems: 'center' }
const styleId_ZyfQmp: any = { flex: 1, flexDirection: 'row', alignItems: 'center' }
const styleId_wxwT1: any = { marginRight: 5 }
const styleId_XuSOc: any = { fontFamily: 'Arial', fontSize: 12, fontWeight: 'bold' }
const styleId_2fy3Va: any = { top: 5, bottom: 5, left: 5, right: 5 }
const styleId_2wXmgE: any = { fontFamily: 'Arial', fontSize: 12, fontWeight: 'normal' }