// withHooks

import { LibFocus } from 'esoftplay/cache/lib/focus/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketProduct_detail_container } from 'esoftplay/cache/market/product_detail_container/import';
import { MarketProduct_discuss_item } from 'esoftplay/cache/market/product_discuss_item/import';
import { MarketProduct_discuss_topicProperty } from 'esoftplay/cache/market/product_discuss_topic/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

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


export interface MarketProduct_detail_discuss_allArgs {

}
export interface MarketProduct_detail_discuss_allProps {

}
export default function m(props: MarketProduct_detail_discuss_allProps): any {
  const { url, dataProduct } = LibNavigation.getArgsAll<any>(props)
  const topicDiscuss = MarketProduct_discuss_topicProperty.state().get()
  const [counter, setCounter] = useSafeState<any>(1)
  const [topic, setTopic] = useSafeState<any>()
  let [_url, set_url] = useSafeState<string>(url)

  useEffect(() => {
    const a = topicDiscuss?.length > 0 && topicDiscuss?.map?.((item: any, i: number) => {
      return ({
        ...item,
        checked: 0
      })
    })
    setTopic(a)
  }, [])

  useEffect(() => {
    let topicIds = topic?.filter?.((item: any) => item.checked == 1)?.map?.((it: any) => it.id)
    let a = _url + '&topic_id=' + topicIds?.join(',')
    // esp.log(a, "a nich");
    set_url(a)
  }, [counter])


  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <LibFocus onFocus={() => {
        setCounter(counter + 1)
      }} />
      <MarketHeader onlyBack title={esp.lang("market/product_detail_discuss_all", "header")} rightView={() => (
        <TouchableOpacity onPress={() => {
          LibNavigation.navigate('market/product_discuss_input', { dataProduct: dataProduct })
        }} style={{ height: 50, justifyContent: 'center', paddingRight: 17 }} >
          <LibIcon name="plus-circle" color={MarketStyle.colorPrimaryMarket} size={30} />
        </TouchableOpacity>
      )} />
      <ScrollView>
        <View style={{ padding: 15, flexDirection: 'row' }}>
          <LibPicture source={{ uri: dataProduct?.image }} style={{ height: 50, width: 50, borderRadius: 10 }} />
          <Text allowFontScaling={false} style={{ flex: 1, flexWrap: 'wrap', marginLeft: 10, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", lineHeight: 16, letterSpacing: 0, textAlign: "left", color: "#03192a" }}>{dataProduct?.title}</Text>
        </View>
        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
          <View style={{ padding: 15, paddingTop: 0, flexDirection: 'row', }}>
            {
              topic?.map?.((item: any, i: number) => {
                return (
                  <TouchableOpacity
                    key={i}
                    onPress={() => {
                      setTopic(LibObject.set(topic, item.checked == 0 ? 1 : 0)(i, "checked"))
                      setCounter(counter + 1)
                    }}
                    style={{ height: 32, marginRight: 8, marginBottom: 8, borderRadius: 20, backgroundColor: item.checked == 1 ? MarketStyle.colorPrimaryMarket : 'transparent', borderColor: item.checked == 1 ? 'transparent' : '#ccc', borderWidth: 1, paddingHorizontal: 17, justifyContent: 'center' }} >
                    <LibTextstyle textStyle='footnote' text={item.name} style={{ color: item.checked == 1 ? "white" : "#4E4E4E" }} />
                  </TouchableOpacity>
                )
              })
            }
          </View>
        </ScrollView>
        <MarketProduct_detail_container>
          <LibInfinite
            url={_url}
            key={counter}
            // isDebug={1}
            renderItem={(item: any) => {
              return (
                <MarketProduct_discuss_item data={item} />
              )
            }}
          />
        </MarketProduct_detail_container>
      </ScrollView>
    </View>
  )
}