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


import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { MarketAds_button_keyword_add } from 'esoftplay/cache/market/ads_button_keyword_add/import';
import { MarketAds_homeProperty } from 'esoftplay/cache/market/ads_home/import';
import { MarketAds_store_keyword_item } from 'esoftplay/cache/market/ads_store_keyword_item/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketEmpty_product } from 'esoftplay/cache/market/empty_product/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { UseForm } from 'esoftplay/cache/use/form/import';

import React from 'react';
import { Text, View } from 'react-native';
import { MarketAds_product_form } from './ads_product_group';


export interface MarketAds_store_keywordArgs {
  cat_ids: string,
}
export interface MarketAds_store_keywordProps {

}
export default function m(props: MarketAds_store_keywordProps): any {
  const { cat_ids } = LibNavigation.getArgsAll<any>(props)
  const [form, setForm] = UseForm<MarketAds_product_form>('market/ads_register')
  const [reload, setReload, getReload] = useSafeState(false)
  const advertConfig = MarketAds_homeProperty.state().get()

  const url = 'advert/ads_product_keyword?cat_ids=' + cat_ids

  const [selectedKeyword, setSelectedKeyword] = useSafeState<any>(form?.keywords || [])
  const [updata, setUpdata,getUpdata] = useSafeState<any>()

  function selectKeyword(item: any, id: string) {
    let _item = [...selectedKeyword]
    let index = _item.map((x: any) => x.id).indexOf(id)

    if (_item.some((x: any) => x.id == id)) {
      _item = LibObject.splice(_item, index, 1)()
    } else {
      _item = LibObject.push(_item, item)()
    }
    setSelectedKeyword([..._item])
    setForm('keywords')([..._item])
  }

  function changePrice(price: string, id: string, index: number) {
    let _item = selectedKeyword
    let _updata = getUpdata()
    let _index = _item.map((x: any) => x.id).indexOf(id)

    if (_item.some((x: any) => x.id == id)) {
      _item = LibObject.set(_item, price)(_index, 'price_total')
      _updata = LibObject.set(getUpdata(), price)(index, 'price_total')
    } else {
      _updata = LibObject.set(getUpdata(), price)(index, 'price_total')
    }

    setSelectedKeyword(_item)
    setForm('keywords')(_item)
    setUpdata(_updata)

  }

  function renderError(err: string) {
    return (
      <MarketEmpty_product message={err} />
    )
  }

  function renderItems(item: any, i: number) {
    return (
      <MarketAds_store_keyword_item key={i} {...item}
        price_view_each={advertConfig?.ads_merchant?.price_view_each}
        price_view_min={advertConfig?.ads_merchant?.price_view_min}
        price_view_suggest={advertConfig?.ads_merchant?.price_view_suggest}
        selected={selectedKeyword.some((x: any) => x.id == item.id)}
        onChangePrice={(p) => changePrice(p, item.id, i)}
        onSelect={() => selectKeyword(item, item.id)}
      />
    )
  }

  return (
    <View style={styleId_qpkod}>
      <MarketHeader title={esp.lang("market/ads_store_keyword", "header_title")} onlyBack />

      <LibInfinite
        key={1 + '-' + reload}
        url={url}
        refreshEnabled={false}
        ListHeaderComponent={
          <>
            <View style={styleId_dt7dA} >
              <Text allowFontScaling={false} style={styleId_ZlmAAB} >{esp.lang("market/ads_store_keyword", "ads_msg")}</Text>
              <MarketAds_button_keyword_add cat_ids={cat_ids} onSuccess={() => { setReload(!getReload()) }} style={styleId_Z1mvwEd} />
            </View>
            <View style={styleId_LapyN} />
            <Text allowFontScaling={false} style={styleId_14XGAy} >{esp.lang("market/ads_store_keyword", "keyword_recomendation")}</Text>
          </>
        }
        onDataChange={(data: any, page: number) => {
          setUpdata(data?.map((item: any) => ({ ...item, price_total: '12000' })))
        }}
        injectData={updata}
        errorView={renderError}
        renderItem={renderItems}
      />

      <View pointerEvents={selectedKeyword.length > 0 ? 'auto' : 'none'} style={styleId_Z1xBC1A}>
        <Text allowFontScaling={false} style={styleId_Ze5ku0} >{esp.lang("market/ads_store_keyword", "selected", selectedKeyword?.length)}</Text>
        <MarketButton colorBackground={selectedKeyword.length > 0 ? undefined : '#aaa'} onPress={() => {
          LibNavigation.navigate('market/ads_store_cost')
        }} text={esp.lang("market/ads_store_keyword", "btn_next")} />
      </View>


    </View>
  )
}
const styleId_qpkod: any = { flex: 1, backgroundColor: '#fff' }
const styleId_dt7dA: any = { margin: 15 }
const styleId_ZlmAAB: any = { textAlign: 'left', fontSize: 13, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: '#aaa' }
const styleId_Z1mvwEd: any = { paddingHorizontal: 0 }
const styleId_LapyN: any = { backgroundColor: '#F3F4F6', height: 10 }
const styleId_14XGAy: any = { marginTop: 15, marginHorizontal: 15, textAlign: 'left', fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#707070' }
const styleId_Z1xBC1A: any = { padding: 20, paddingVertical: 10, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }
const styleId_Ze5ku0: any = { fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }