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


import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';

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


export interface MarketProduct_specsProps {

}
export interface MarketProduct_specsData {
  spec_id: string | number,
  spec_name: string,
  spec_member_id: string | number,
  spec_member_name: string,
  spec_data_id: string | number,
  spec_data_name: string,
  spec_data_member_id: string | number,
  spec_data_member_name: string,
}

export function build(specs: MarketProduct_specsData): MarketProduct_specsData {
  return specs
}

export default function m(props: MarketProduct_specsProps): any {

  const args = LibNavigation.getArgsAll<any>(props)
  const [query, setQuery] = useSafeState('')
  const [specs, setSpecs] = useSafeState([])

  useEffect(() => {
    new LibCurl('shop/product_spec_member?cat_id=' + args.cat_id, null,
      (res, msg) => {
        esp.log(res);
        setSpecs(res)
      },
      (msg) => {
        esp.log(msg);
      }, 1
    )

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

  const filteredSpecs = specs.filter((item: any) => item.name.toLowerCase().includes(query.toLowerCase()))

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        leftIcon={{ name: "close", onPress: () => { LibNavigation.back() } }}
        title={esp.lang("market/product_specs_add", "header_title")}
      />
      <MarketInput_square
        placeholder={"Cari"}
        autoFocus
        autoCapitalize="none"
        onChangeText={(r) => LibUtils.debounce(() => setQuery(r), 500)} />
      {
        filteredSpecs.length == 0 && query != '' &&
        <View style={{ padding: 17 }} >
          <LibTextstyle
            textStyle="footnote"
            text={esp.lang("market/product_specs_add", "specs_info")}
            style={{ padding: 10, marginBottom: 20, textAlign: 'center' }} />
          <MarketButton text={esp.lang("market/product_specs_add", "add", query)} onPress={() => {
            LibNavigation.sendBackResult({
              cat_id: args.cat_id,
              id: '',
              name: query,
              url_data: ''
            }, LibNavigation.getResultKey(props))
          }} />
        </View>
      }
      <ScrollView showsVerticalScrollIndicator={false} >
        {
          filteredSpecs.map((item: any) => (
            <TouchableOpacity
              key={item.id + 'spec'}
              onPress={() => {
                LibNavigation.sendBackResult(item, LibNavigation.getResultKey(props))
              }}
              style={{ padding: 17, paddingVertical: 17 }} >
              <LibTextstyle textStyle="body" text={item.name} />
            </TouchableOpacity>
          ))
        }
      </ScrollView>
    </View>
  )
}