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


import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/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 { MarketAds_button_keyword_add } from 'esoftplay/cache/market/ads_button_keyword_add/import';
import { MarketAds_cost_keywordArgs } from 'esoftplay/cache/market/ads_cost_keyword/import';
import { MarketAds_keyword_header } from 'esoftplay/cache/market/ads_keyword_header/import';
import { MarketAds_keyword_item } from 'esoftplay/cache/market/ads_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 { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UseForm } from 'esoftplay/cache/use/form/import';

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


export interface MarketAds_keywordArgs {
  cat_ids: string,
  from?: string
}
export interface MarketAds_keywordProps {

}
export default function m(props: MarketAds_keywordProps): any {
  const { cat_ids, from } = LibNavigation.getArgsAll<any>(props)
  const [form, setForm] = UseForm<MarketAds_product_form>('market/ads_register')

  let keyword = useRef<string>('').current
  const inputRef = useRef<LibInput>(null)
  const [query, setQuery, getQuery] = useSafeState('')
  const [sort, setSort, getSort] = useSafeState('latest')
  const url = 'advert/ads_product_keyword?cat_ids=' + cat_ids

  const [selectedKeyword, setSelectedKeyword] = useSafeState<any>(form?.keywords || [])
  const [reload, setReload, getReload] = useSafeState(false)

  let sorts = [
    {
      id: 1,
      title: esp.lang("market/ads_keyword", "new"),
      code: 'latest'
    },
    {
      id: 2,
      title: esp.lang("market/ads_keyword", "popular"),
      code: 'popular'
    }
    // {
    //   id: 1,
    //   title: 'Pencarian Terbanyak',
    // },
    // {
    //   id: 2,
    //   title: 'Kompetisi Terendah'
    // }
  ]

  function buildUrl(url: string) {
    if (getSort() != '') {
      url += url.includes('?') ? '&' : '?'
      url += 'sort=' + getSort()
    }
    if (getQuery() != '') {
      url += url.includes('?') ? '&' : '?'
      url += 'keyword=' + getQuery()
    }
    return url
  }

  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 openSort() {
    MarketSlidingupProperty.add(
      <View style={styleId_22MUga} >
        <View style={styleId_12lRXe} >
          <TouchableOpacity onPress={() => MarketSlidingupProperty.hide()} style={styleId_1hcIwd} >
            <LibIcon name="close" size={20} />
          </TouchableOpacity>
          <Text allowFontScaling={false} style={styleId_Z26yQmp}  >{esp.lang("market/ads_keyword", "sort")}</Text>
        </View>
        <ScrollView>
          {
            sorts?.map((item: any, i: number) => {
              return (
                <TouchableOpacity onPress={() => {
                  setSort(item?.code)
                  MarketSlidingupProperty.hide()
                }} key={i} style={styleId_26qOKw}>
                  <Text allowFontScaling={false} style={styleId_g3yJj} >{item.title}</Text>
                  <TouchableOpacity onPress={() => {
                    setSort(item?.code)
                    MarketSlidingupProperty.hide()
                  }}>
                    <LibIcon color={MarketStyle.colorPrimaryMarket} name={item?.code == sort ? "radiobox-marked" : "radiobox-blank"} />
                  </TouchableOpacity>
                </TouchableOpacity>
              )
            })
          }
        </ScrollView>
      </View>
    )
  }

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

  function renderItems(item: any, i: number) {
    return (
      <MarketAds_keyword_item key={i} {...item} onPress={() => { selectKeyword(item, item.id) }} selected={selectedKeyword.some((x: any) => x.id == item.id)} />
    )
  }

  return (
    <View style={styleId_qpkod}>
      <MarketHeader title={esp.lang("market/ads_keyword", "header")} onlyBack rightView={() => (
        <View style={styleId_2nLyCQ}>
          <TouchableOpacity onPress={() => {
            openSort()
            MarketSlidingupProperty.show()
          }}>
            <LibIcon name="sort-variant" color={"#c5c5c5"} />
          </TouchableOpacity>
        </View>
      )} />

      <View style={styleId_gH0oe} >
        <View style={styleId_1O3Ixd} >
          <LibIcon name="magnify" color={LibTheme._colorTextTertiary()} style={styleId_1hcIwd} />
          <LibInput
            ref={inputRef}
            placeholder={esp.lang("market/ads_keyword", "search_keyword")}
            onChangeText={(t) => { keyword = t }}
            onSubmitEditing={() => {
              setQuery(keyword)
            }}
            base={true}
            style={styleId_Z2bQ6be} />
          {
            query != '' &&
            <TouchableOpacity onPress={() => {
              setQuery('')
              inputRef?.current?.setText('')
            }} >
              <LibIcon name="close" color={LibTheme._colorTextTertiary()} />
            </TouchableOpacity>
          }
        </View>
      </View>

      <MarketAds_button_keyword_add cat_ids={cat_ids} onSuccess={() => setReload(!getReload())} />

      <LibInfinite
        key={buildUrl(url) + reload}
        url={buildUrl(url)}
        ListHeaderComponent={
          <MarketAds_keyword_header />
        }
        errorView={renderError}
        renderItem={renderItems}
      />

      <View pointerEvents={selectedKeyword.length > 0 ? 'auto' : 'none'} style={styleId_Z1xBC1A}>
        <Text allowFontScaling={false} style={styleId_Ze5ku0} >{selectedKeyword?.length} kata kunci dipilih</Text>
        <MarketButton colorBackground={selectedKeyword.length > 0 ? undefined : '#aaa'} onPress={() => {
          // LibNavigation.navigate('market/ads_cost')
          if (from == 'market/ads_summary') {
            LibNavigation.redirect()
          } else {
            LibNavigation.navigate<MarketAds_cost_keywordArgs>('market/ads_cost_keyword', { data: selectedKeyword })
          }
        }} text={esp.lang("market/ads_keyword", "btn_next")} />
      </View>


    </View>
  )
}
const styleId_22MUga: any = { maxHeight: LibStyle.height / 2, backgroundColor: "white", paddingVertical: 15, paddingHorizontal: 17, borderTopRightRadius: 15, borderTopLeftRadius: 15 }
const styleId_12lRXe: any = { flexDirection: "row", alignItems: "center", marginBottom: 10 }
const styleId_1hcIwd: any = { marginRight: 10 }
const styleId_Z26yQmp: any = { fontWeight: 'bold', fontSize: 16 }
const styleId_26qOKw: any = { padding: 10, borderBottomWidth: 1, borderBottomColor: '#f5f5f5', flexDirection: 'row', justifyContent: 'space-between' }
const styleId_g3yJj: any = { fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }
const styleId_qpkod: any = { flex: 1, backgroundColor: '#fff' }
const styleId_2nLyCQ: any = { flexDirection: 'row', marginRight: 20 }
const styleId_gH0oe: any = { paddingHorizontal: 17, marginTop: 15, marginBottom: 8 }
const styleId_1O3Ixd: any = { flexDirection: "row", alignItems: "center", borderWidth: 1, borderRadius: 20, borderColor: "#ddd", backgroundColor: "#f1f1f1", paddingHorizontal: 10 }
const styleId_Z2bQ6be: any = { flex: 1, paddingVertical: Platform.OS == 'ios' ? 10 : 4, fontSize: 14 }
const styleId_Z2mCmbA: any = { fontSize: 14 }
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 }