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


import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibList } from 'esoftplay/cache/lib/list/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketPromotion_categoryArgs {
  promo_id: string,
  selected_id: string
}
export interface MarketPromotion_categoryProps {

}
export default function m(props: MarketPromotion_categoryProps): any {
  const { promo_id, selected_id } = LibNavigation.getArgsAll<MarketPromotion_categoryArgs>(props)
  const [category, setCategory] = useSafeState<any>()
  const [query, setQuery] = useSafeState<any>('')
  const [showSearch, setShowSearch] = useSafeState<boolean>(false)
  let inputRef = useRef<TextInput>(null)
  let keyword = useRef('').current

  useEffect(() => {
    getCategory()
    return () => {
      LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
    }
  }, [])

  function getCategory() {
    new LibCurl('shop/merchant_promo_cat?promo_id=' + promo_id, null,
      (res, msg) => {
        setCategory(res)
      }, (err) => {
        LibDialog.warning(esp.lang("market/promotion_category", "get_cat_failed"), err?.message)
      }, 1
    )
  }

  let data = query != '' ? category.filter((item: any) => item.category_name.includes(query)) : category

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader title={esp.lang("market/promotion_category", "header_title")} subtitle={esp.lang("market/promotion_category", "header_sub")} onlyBack
        rightView={() => (
          <TouchableOpacity onPress={() => {
            setShowSearch(!showSearch)
          }} style={{ height: 50, justifyContent: 'center', paddingRight: 17 }} >
            <LibIcon name="magnify" />
          </TouchableOpacity>
        )}
      />
      {
        showSearch &&
        <View style={{ marginTop: 10, marginBottom: 10, marginHorizontal: 17, flexDirection: 'row', alignItems: 'center', height: 35, borderRadius: 18, backgroundColor: "#f5f5f5" }} >
          <LibPicture style={{ height: 15, width: 15, marginLeft: 6, marginRight: 6 }} source={esp.assets('market/ic_search.png')} />
          <TextInput
            ref={inputRef}
            autoFocus={showSearch}
            style={{ fontFamily: "ArialBold", fontSize: 12, color: "#9e9e9e", flex: 1 }}
            placeholder={esp.lang("market/promotion_category", "search")}
            onChangeText={(t) => { keyword = t }}
            returnKeyType={'search'}
            returnKeyLabel={'Search'}
            placeholderTextColor={'#e5e5e5'}
            onSubmitEditing={() => {
              setQuery(keyword)
            }}
          />
          {
            query != '' &&
            <TouchableOpacity activeOpacity={1} onPress={() => { setQuery(''); inputRef.current?.setNativeProps({ text: '' }) }} style={{ marginRight: 10 }} >
              <LibIcon name="close" color="#e6e6e6" />
            </TouchableOpacity>
          }
        </View>
      }
      {
        !category ? <LibLoading /> :
          <LibList
            data={data}
            ListEmptyComponent={
              <View style={{ alignItems: 'center', justifyContent: 'center', marginTop: 50 }} >
                <Text>{esp.lang("market/promotion_category", "cat_not_found")}</Text>
              </View>
            }
            renderItem={(item: any, i: number) => {
              return (
                <View key={i} >
                  <TouchableOpacity onPress={() => {
                    LibNavigation.sendBackResult(item, LibNavigation.getResultKey(props))
                  }} style={{ paddingVertical: 10, paddingHorizontal: 17, flexDirection: "row", alignItems: 'center' }} >
                    <LibIcon name={item.category_id == selected_id ? "checkbox-marked-circle" : "checkbox-blank-circle-outline"} color={item.category_id == selected_id ? MarketStyle.colorPrimaryMarket : "#888"} />
                    <View style={{ flex: 1, marginLeft: 10 }} >
                      <Text>{item.category_name}</Text>
                    </View>
                  </TouchableOpacity>
                  <MarketSection_menu size="line" />
                </View>
              )
            }}
          />
      }
    </View>
  )
}