// 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 argProps = LibNavigation.getArgsAll<any>(props)
  const { url_data, url_data_member } = LibNavigation.getArgsAll<any>(props)
  const [query, setQuery] = useSafeState('')
  const [specs, setSpecs] = useSafeState([])
  const [specsMember, setSpecsMember] = useSafeState([])

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

  function getSpecs() {
    if (url_data)
      new LibCurl(url_data, null,
        (res, msg) => {
          setSpecs(res)
        },
        (msg) => { }, 1
      )
    if (url_data_member)
      getSpecsMember()
  }

  function getSpecsMember() {
    new LibCurl(url_data_member, null,
      (res, msg) => {
        setSpecsMember(res)
      },
      (msg) => { }, 1
    )
  }

  const filteredSpecs = specs.filter((item: any) => item.name.toLowerCase().includes(query.toLowerCase()))
  const filteredSpecsMember = specsMember.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", "header_title", argProps?.name)}
      />
      <MarketInput_square
        placeholder={esp.lang("market/product_specs", "search")}
        autoCapitalize="none"
        autoFocus
        onChangeText={(r) => LibUtils.debounce(() => setQuery(r), 500)} />
      {
        filteredSpecs.length == 0 && filteredSpecsMember.length == 0 && query != '' &&
        <View style={{ padding: 17 }} >
          <LibTextstyle
            textStyle="footnote"
            text={esp.lang("market/product_specs", "specs_info", argProps.name)}
            style={{ padding: 10, marginBottom: 20, textAlign: 'center' }} />
          <MarketButton text={esp.lang("market/product_specs", "use", query)} onPress={() => {
            LibNavigation.sendBackResult(
              argProps.spec_id ?
                build({
                  spec_id: argProps.spec_id,
                  spec_name: argProps.name,
                  spec_data_id: '',
                  spec_data_member_id: '',
                  spec_data_name: '',
                  spec_member_id: '',
                  spec_member_name: '',
                  spec_data_member_name: query,
                })
                :
                build({
                  spec_id: '',
                  spec_name: '',
                  spec_data_id: '',
                  spec_data_member_id: '',
                  spec_data_name: '',
                  spec_member_id: argProps.spec_member_id || '',
                  spec_member_name: argProps.name,
                  spec_data_member_name: query,
                })
              , LibNavigation.getResultKey(props))
          }} />
        </View>
      }
      <ScrollView showsVerticalScrollIndicator={false} >
        {
          filteredSpecs.map((item: any) => (
            <TouchableOpacity
              key={item.id + 'spec'}
              onPress={() => {
                LibNavigation.sendBackResult(build({
                  spec_id: argProps.spec_id,
                  spec_name: argProps.name,
                  spec_data_id: item.id,
                  spec_data_name: item.name,
                  spec_data_member_id: '',
                  spec_data_member_name: '',
                  spec_member_id: '',
                  spec_member_name: ''
                }), LibNavigation.getResultKey(props))
              }}
              style={{ padding: 17, paddingVertical: 17 }} >
              <LibTextstyle textStyle="body" text={item.name} />
            </TouchableOpacity>
          ))
        }
        {
          filteredSpecsMember.map((item: any) => (
            <TouchableOpacity
              key={item.spec_id + 'specMember'}
              onPress={() => {
                LibNavigation.sendBackResult(
                  argProps.spec_id ?
                    build({
                      spec_id: argProps.spec_id,
                      spec_name: argProps.name,
                      spec_data_id: '',
                      spec_data_name: '',
                      spec_member_id: '',
                      spec_member_name: '',
                      spec_data_member_id: item.id,
                      spec_data_member_name: item.name
                    })
                    :
                    build({
                      spec_id: '',
                      spec_name: '',
                      spec_data_id: '',
                      spec_data_name: '',
                      spec_member_id: argProps.spec_member_id || '',
                      spec_member_name: argProps.name,
                      spec_data_member_id: item.id,
                      spec_data_member_name: item.name
                    })
                  , LibNavigation.getResultKey(props))
              }}
              style={{ padding: 17, paddingVertical: 17 }} >
              <LibTextstyle textStyle="body" text={item.name} />
            </TouchableOpacity>
          ))
        }
      </ScrollView>
    </View>
  )
}