// withHooks
import { applyStyle } from 'esoftplay';

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketWishlist_item } from 'esoftplay/cache/market/wishlist_item/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

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


export interface MarketWishlistArgs {

}
export interface MarketWishlistProps {

}

export function set(product_id: string, isWish: 0 | 1, callback: (isWish: 0 | 1) => void): void {
  new LibCurl('shop/product_list_detail_wishlist/' + product_id, { wishlist: isWish },
    (res, msg) => {
      callback(isWish)
      LibToastProperty.show(isWish ? esp.lang("market/wishlist", "success_add") : esp.lang("market/wishlist", "success_delete"))
    }, (msg) => {
      // esp.log(msg);
      LibToastProperty.show(msg?.message)
    }, 1
  )
}

export default function m(props: MarketWishlistProps): any {
  let query = useRef<string>('').current
  let inputText = useRef<TextInput>(null)
  const [querySubmitted, setQuerySumitted] = useSafeState('')
  const [upData, setUpData] = useSafeState<any>()
  const imgDim = (LibStyle.width - 100) / 3

  function renderItems(item: any, index: number) {
    return (
      <MarketWishlist_item {...item} key={index} onChangeWish={(wish) => {
        setUpData((t) => LibObject.splice(t, index, 1)())
      }} />
    )
  }


  return (
    <View style={{ flex: 1 }} >
      <View style={applyStyle({ marginBottom: 10, marginHorizontal: 17, flexDirection: 'row', alignItems: 'center', height: 31, borderRadius: 16, backgroundColor: "#f5f5f5" })} >
        <LibPicture style={applyStyle({ height: 15, width: 15, marginLeft: 6, marginRight: 6 })} source={esp.assets('market/ic_search.png')} />
        <TextInput
          ref={inputText}
          style={{ fontFamily: "ArialBold", fontSize: 12, color: "#9e9e9e", flex: 1 }}
          placeholder={esp.lang("market/wishlist", "search")}
          onChangeText={(t) => { query = t }}
          returnKeyType={'search'}
          returnKeyLabel={'Search'}
          placeholderTextColor={'#e5e5e5'}
          onSubmitEditing={() => {
            Keyboard.dismiss()
            setQuerySumitted(query)
          }}
        />
        {
          querySubmitted != '' &&
          <TouchableOpacity activeOpacity={1} onPress={() => { setQuerySumitted(''); inputText.current!.setNativeProps({ text: '' }) }} style={{ marginRight: 10 }} >
            <LibIcon name="close" color="#e6e6e6" />
          </TouchableOpacity>
        }
      </View>
      <LibInfinite
        key={querySubmitted}
        style={{ marginHorizontal: 12 }}
        // numColumns={dimension}
        url={"shop/product_wishlist?keyword=" + querySubmitted}
        onDataChange={(data: any, page: number) => { setUpData(data) }}
        injectData={upData}
        keyExtractor={(item, i) => i.toString()}
        errorView={(e: string) => (<MarketEmpty msg={e} />)}
        LoadingView={
          <LibSkeleton backgroundStyle={{ height: LibStyle.height }}>
            {
              [1, 1, 1, 1].map((t: any, i: number) => (
                <View key={i} style={{ margin: 5, borderRadius: 5, padding: 10, flexDirection: 'row', borderWidth: 1 }}>
                  <View style={{ flexDirection: "row", flex: 1 }} >
                    <View style={{ width: imgDim, height: imgDim, backgroundColor: 'white', borderRadius: 5 }} />
                    <View style={{ paddingHorizontal: 10, flex: 1, justifyContent: 'space-between' }} >
                      <View style={{ height: 18, width: '80%', backgroundColor: 'white', borderRadius: 10 }} />
                      <View style={{ height: 18, width: '40%', backgroundColor: 'white', borderRadius: 10, marginTop: 5 }} />
                      <View style={{ height: 20, width: '40%', backgroundColor: 'white', borderRadius: 10, marginTop: 5 }} />
                      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 5 }} >
                        <View style={{ width: 20, height: 20, marginRight: 8, backgroundColor: 'white' }} />
                        <View style={{ height: 20, width: '40%', backgroundColor: 'white', borderRadius: 10 }} />
                      </View>
                    </View>
                  </View>
                  <View>
                    <View style={{ alignItems: "center", padding: 4, borderRadius: 5, borderWidth: 0.5 }}>
                      <LibIcon name="delete" color={'#f1f1f1'} size={16} />
                    </View>
                  </View>
                </View>
              ))
            }
          </LibSkeleton>
        }
        renderItem={renderItems}
      />
    </View>

  )
}