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


import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInput } from 'esoftplay/cache/lib/input/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTheme } from 'esoftplay/cache/lib/theme/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketAds_card_detail } from 'esoftplay/cache/market/ads_card_detail/import';
import { MarketAds_grup_editArgs } from 'esoftplay/cache/market/ads_grup_edit/import';
import { MarketAds_store_editArgs } from 'esoftplay/cache/market/ads_store_edit/import';
import { MarketToggle } from 'esoftplay/cache/market/toggle/import';

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


export interface MarketAds_grup_detail_keywordArgs {

}
export interface MarketAds_grup_detail_keywordProps {
  data: any,
  ads_id: string,
  url: string
  ads_type: string
}

interface MarketAds_grup_detail_keyword {
  id: string,
  keyword_id: string,
  keyword_title: string,
  price: string,
  clicked: string,
  displayed: string,
  total_income: string,
  total_ads: string,
  total_sold: string,
  clicked_pr: string,
  active: number,
  price_view: string,
  price_view_each: string
}
export default function m(props: MarketAds_grup_detail_keywordProps): any {
  const [data, setData, getData] = useSafeState<any>(props?.data || [])
  const [query, setQuery] = useSafeState('')

  let filteredData = data.filter((item: any) => item?.keyword_title?.toLowerCase().includes(query?.toLowerCase()))


  function changeActiveKeyword(active: number, index: number) {
    const keyword = LibObject.set(getData(), active)(index, 'active')

    const keywords = keyword.map((item: any) => ({
      keyword_id: item.keyword_id,
      active: item.active,
      price: item.price,
      price_view: item?.price_view || '',
      price_view_each: item?.price_view || ''
    }))

    let post = {
      keywords: JSON.stringify(keywords)
    }

    new LibCurl('advert/ads_list_edit/' + props.ads_id, post,
      (res, msg) => {
        setData((x: any) => LibObject.set(x, active)(index, 'active'))
      }, (msg) => {
        LibToastProperty.show(msg?.message)
      }, 1
    )
  }

  function renderKeyword(item: MarketAds_grup_detail_keyword, i: number) {
    return (
      <TouchableOpacity key={i} activeOpacity={1} onPress={() => { }} style={styleId_Z2baUIP} >
        <View style={styleId_1fmvBo} >
          <View style={styleId_ZyfQmp}>
            <Text allowFontScaling={false} style={styleId_XuSOc} >{item?.keyword_title}</Text>
          </View>
          <MarketToggle onChangeValue={() => { changeActiveKeyword(item?.active == 1 ? 0 : 1, i) }} type={'success'} value={item?.active == 1} />
        </View>
        {
          props.ads_type == '1' ?
            <View style={styleId_Z2ezz9t} >
              <Text allowFontScaling={false} style={styleId_NOtmt} >{LibUtils.money(item?.price)}</Text>
              <Text allowFontScaling={false} style={styleId_2su2qN} >{esp.lang("market/ads_grup_detail_keyword", "clicks")}</Text>
            </View>
            :
            <View style={styleId_Z2ezz9t} >
              <Text allowFontScaling={false} style={styleId_NOtmt} >{LibUtils.money(item?.price_view)}</Text>
              <Text allowFontScaling={false} style={styleId_2su2qN} >{esp.lang("market/ads_grup_detail_keyword", "ads_view", LibUtils.number(item?.price_view_each))}</Text>
            </View>
        }
        <MarketAds_card_detail clicked={item?.clicked} displayed={item?.displayed} total_ads={item?.total_ads} total_income={item?.total_income} total_sold={item?.total_sold} clicked_pr={item?.clicked_pr} />

      </TouchableOpacity>
    )
  }

  return (
    <View style={styleId_ZcMJmd} >
      <View style={styleId_ZXBG46} >
        <View style={styleId_Z1L9PAd}>
          <View style={styleId_Z2jlu7x} >
            <LibIcon name="magnify" color={LibTheme._colorTextTertiary()} style={styleId_1hcIwd} />
            <LibInput
              placeholder={esp.lang("market/ads_grup_detail_keyword", "search_group")}
              base={true}
              onChangeText={(t) => { LibUtils.debounce(() => setQuery(t), 500) }}
              style={styleId_12Uvsc} />
          </View>
          <TouchableOpacity onPress={() => { }}>
            <LibIcon name="filter" color="#c5c5c5" />
          </TouchableOpacity>
          <View style={styleId_1cxcUJ} />
          <TouchableOpacity onPress={() => {
            props.ads_type == '1' ?
              LibNavigation.navigate<MarketAds_grup_editArgs>('market/ads_grup_edit', { url: props.url })
              :
              LibNavigation.navigate<MarketAds_store_editArgs>('market/ads_store_edit', { url: props.url })
          }}>
            <LibIcon name="plus" color="#c5c5c5" />
          </TouchableOpacity>
        </View>
      </View>
      {
        LibUtils.checkUndefined(filteredData, '0') && filteredData?.map(renderKeyword)
      }
    </View>
  )
}
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_ZXBG46: any = { paddingHorizontal: 17, marginTop: 10, marginBottom: 8 }
const styleId_Z1L9PAd: any = { flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }
const styleId_Z2jlu7x: any = { width: LibStyle.width - 120, flexDirection: "row", alignItems: "center", borderWidth: 1, borderRadius: 20, borderColor: "#ddd", backgroundColor: "#F9F9F9", paddingHorizontal: 10 }
const styleId_1hcIwd: any = { marginRight: 10 }
const styleId_12Uvsc: any = { paddingVertical: Platform.OS == 'ios' ? 10 : 4, fontSize: 14 }
const styleId_1cxcUJ: any = { height: 20, width: 2, backgroundColor: '#c5c5c5' }
const styleId_Z2baUIP: any = { marginBottom: 10, marginHorizontal: 17, 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_XuSOc: any = { fontFamily: 'Arial', fontSize: 12, fontWeight: 'bold' }
const styleId_Z2ezz9t: any = { flexDirection: 'row', alignItems: 'flex-end' }
const styleId_NOtmt: any = { fontFamily: 'Arial', fontSize: 14, fontWeight: 'bold' }
const styleId_2su2qN: any = { fontFamily: 'Arial', fontSize: 10, fontWeight: 'normal' }