// withHooks

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 { MarketHeader } from 'esoftplay/cache/market/header/import';
import useSafeState from 'esoftplay/state';

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


export interface MarketProduct_searchProps {

}
export interface MarketProduct_searchArgs {
  keyword?: string,
  placeholder?: string
}
export default function m(props: MarketProduct_searchProps): any {
  const { keyword, placeholder } = LibNavigation.getArgsAll<any>(props, { placeholder: 'Cari Produk' })

  const [query, setQuery] = useSafeState('')
  const refInput = useRef<LibInput>(null)

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

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        onlyBack
        centerView={() => (
          <View style={{ flex: 1, backgroundColor: "#f1f2f3", borderRadius: 10, height: 36, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center' }} >
            <LibInput
              ref={refInput}
              base
              placeholder={placeholder}
              autoFocus
              defaultValue={keyword || ''}
              style={{ flex: 1 }}
              onChangeText={setQuery}
              onSubmitEditing={() => {
                LibNavigation.sendBackResult(query, LibNavigation.getResultKey(props))
              }} />
            {
              query.length > 0 &&
              <TouchableOpacity onPress={() => {
                setQuery("")
                refInput.current!.setText('')
              }} >
                <LibIcon name="close-circle" size={16} color={'#aaa'} />
              </TouchableOpacity>
            }
          </View>
        )}
        rightView={() => (
          <TouchableOpacity
            onPress={() => { LibNavigation.sendBackResult(query, LibNavigation.getResultKey(props)) }}
            style={{ width: 50, alignItems: 'center' }} >
            <LibIcon name={"magnify"} />
          </TouchableOpacity>
        )} />
    </View>
  )
}