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


import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/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_underline } from 'esoftplay/cache/market/input_underline/import';
import { MarketProduct_discuss_topicProperty } from 'esoftplay/cache/market/product_discuss_topic/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketProduct_discuss_inputArgs {

}
export interface MarketProduct_discuss_inputProps {
  image: string
  title: string
}
export default function m(props: MarketProduct_discuss_inputProps): any {
  const topicDiscuss = MarketProduct_discuss_topicProperty.state().get()
  const { dataProduct } = LibNavigation.getArgsAll<any>(props)
  const [selectedTopic, setSelectedTopic, getSelectedTopic] = useSafeState<any>()
  const [inputQuestion, setInputQuestion, getInputQuestion] = useSafeState<any>()

  function sendDiscuss() {
    if (!selectedTopic) {
      LibToastProperty.show(esp.lang("market/product_discuss_input", "topic_empty"))
      return null
    }
    if (!inputQuestion) {
      LibToastProperty.show(esp.lang("market/product_discuss_input", "question_empty"))
      return null
    }

    let post = {
      product_id: dataProduct?.id,
      // par_id: "",
      message: getInputQuestion(),
      topic_id: getSelectedTopic()?.id,
    }

    LibProgress.show(esp.lang("market/product_discuss_input", "ait"))
    new LibCurl('shop/product_list_detail_discussion_post', post, (res, msg) => {
      esp.log(res, msg, "res, msg");
      LibProgress.hide();
      LibNavigation.back()
    }, (error) => {
      LibProgress.hide();
      LibDialog.warning(esp.lang("market/product_discuss_input", "er"), error?.message);
      esp.log(error);
    }, 1)
  }

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <MarketHeader onlyBack title={esp.lang("market/product_discuss_input", "header_title")} />
      <ScrollView>
        <LibKeyboard_avoid>
          <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>
          <Text allowFontScaling={false} style={{ marginTop: 0, margin: 15, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", lineHeight: 16, letterSpacing: 0, textAlign: "left", color: "#03192a" }}>{esp.lang("market/product_discuss_input", "select_topic")}</Text>
          <View style={{ padding: 15, paddingTop: 0, flexDirection: 'row', flexWrap: 'wrap' }}>
            {
              topicDiscuss && topicDiscuss?.length > 0 && topicDiscuss?.map?.((item: any, i: number) => {
                return (
                  <TouchableOpacity
                    key={i}
                    onPress={() => {
                      setSelectedTopic(item)
                    }}
                    style={{ height: 32, marginRight: 8, marginBottom: 8, borderRadius: 20, backgroundColor: item.id == selectedTopic?.id ? MarketStyle.colorPrimaryMarket : 'transparent', borderColor: item.id == selectedTopic?.id ? 'transparent' : '#ccc', borderWidth: 1, paddingHorizontal: 17, justifyContent: 'center' }} >
                    <LibTextstyle textStyle='footnote' text={item.name} style={{ color: item.id == selectedTopic?.id ? "white" : "#4E4E4E" }} />
                  </TouchableOpacity>
                )
              })
            }
          </View>

          <MarketInput_underline
            onChangeText={(t) => {
              LibUtils.debounce(() => {
                setInputQuestion(t)
              }, 300)
            }}
            placeholder={esp.lang("market/product_discuss_input", "placeholder_input")}
          />
          <LibTextstyle textStyle="callout" text={"0/200"} style={{ paddingHorizontal: 17, alignSelf: 'flex-end', fontSize: 12, color: "#aaa" }} />
        </LibKeyboard_avoid>
      </ScrollView>
      <View style={{ margin: 15 }}>
        <View style={{ margin: 8, }}>
          <Text allowFontScaling={false} style={{ fontSize: 10, color: "#c5c5c5" }}>{esp.lang("market/product_discuss_input", "sk")}</Text>
        </View>
        <MarketButton onPress={sendDiscuss} text={esp.lang("market/product_discuss_input", "btn_send")} />
      </View>
    </View>
  )
}