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


import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketAds_date_selection } from 'esoftplay/cache/market/ads_date_selection/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

import moment from 'esoftplay/moment';
import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
moment().locale('id')


export interface MarketAds_performArgs {

}
export interface MarketAds_performProps {
  title: string,
  data: any,
  index: (i: number) => void,
  date_range: (date_start: string, date_end: string) => void
}
export default function m(props: MarketAds_performProps): any {
  const [tabPerform, setTabPerform] = useSafeState<any>(0)
  const options = Object.keys(props.data)
  const optionsIdn = [esp.lang("market/ads_perform", "text_view"), esp.lang("market/ads_perform", "text_click"), esp.lang("market/ads_perform", "total_ads"), esp.lang("market/ads_perform", "total_income"), esp.lang("market/ads_perform", "percentage"), esp.lang("market/ads_perform", "sold"), esp.lang("market/ads_perform", "average"), esp.lang("market/ads_perform", "sold_total")]

  function getTotal(index: number) {
    let total = ''
    let total_fix = ''
    total = Object.values<any>(props.data)[index].reduce((a: any, b: any) => ({ total: a.total + b.total })).total

    total_fix = (index == 2 || index == 3) ? LibUtils.money(total) : index == 4 ? total + '%' : index == 6 ? LibUtils.money(total) : LibUtils.number(total)

    return total_fix
  }

  function renderOptions(item: any, i: number) {
    return (
      <TouchableOpacity onPress={() => { setTabPerform(i); props.index(i) }} key={i} style={[styleId_1fof3C, { backgroundColor: tabPerform == i ? MarketStyle.colorPrimaryMarket : '#fff' }]}>
        <Text allowFontScaling={false} style={[styleId_Z2mAJMF, { fontWeight: tabPerform == i ? "bold" : "normal", color: tabPerform == i ? "#fff" : '#707070' }]} >{LibUtils.ucwords(optionsIdn?.[i])}</Text>
        <Text allowFontScaling={false} style={[styleId_2tAibo, { color: tabPerform == i ? "#fff" : "#000" }]} >{getTotal(i)}</Text>
      </TouchableOpacity>
    )
  }

  return (
    <View>
      <View style={styleId_Z1IS0fI}>
        <View style={styleId_ZcMJmd}>
          <Text allowFontScaling={false} style={styleId_g3yJj} >{esp.lang("market/ads_perform", "ads_perform")}</Text>
          <Text allowFontScaling={false} style={styleId_1SdHAp} >{props?.title}</Text>
        </View>
        <MarketAds_date_selection date_range={props.date_range} />
      </View>
      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
        <View style={styleId_Z1Rybqr}>
          {
            LibUtils.checkUndefined(options, '0') && options?.map(renderOptions)
          }
        </View>
      </ScrollView>
    </View>
  )
}
const styleId_1fof3C: any = { marginRight: 10, borderWidth: 1, borderColor: '#f5f5f5', borderRadius: 7, padding: 10, paddingHorizontal: 20 }
const styleId_Z2mAJMF: any = { fontSize: 14, fontStyle: "normal", letterSpacing: 0 }
const styleId_2tAibo: any = { marginTop: 5, fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }
const styleId_Z1IS0fI: any = { flexDirection: 'row' }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_g3yJj: any = { fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }
const styleId_1SdHAp: any = { marginTop: 5, fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#707070" }
const styleId_Z1Rybqr: any = { marginTop: 10, flex: 1, flexDirection: 'row' }