// 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 { LibIcon } from 'esoftplay/cache/lib/icon/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 { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStyle } from 'esoftplay/cache/lib/style/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 { MarketComplaint_solutionArgs } from 'esoftplay/cache/market/complaint_solution/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketImage_picker } from 'esoftplay/cache/market/image_picker/import';
import { MarketInput_container } from 'esoftplay/cache/market/input_container/import';
import { MarketInput_select } from 'esoftplay/cache/market/input_select/import';
import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';
import { MarketOrderArgs } from 'esoftplay/cache/market/order/import';
import { MarketOrder_detailArgs } from 'esoftplay/cache/market/order_detail/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketComplaint_step3Args {
  productChecked: any,
  conditions: string,
  order_id: number
}
export interface MarketComplaint_step3Props {

}
export default function m(props: MarketComplaint_step3Props): any {
  const { productChecked, conditions, order_id } = LibNavigation.getArgsAll<MarketComplaint_step3Args>(props)
  const width = (LibStyle.width - 64) / 3
  const imagePicker = useRef<LibSlidingup>(null)
  const inputReason = useRef<MarketInput_square>(null)
  const [images, setImages] = useSafeState<any>([])
  const [solution, setSolution] = useSafeState<any>({})

  function doComplaint() {
    if (!solution.id) {
      LibToastProperty.show(esp.lang("market/complaint_step3", "empty_solution"))
      return
    }

    const products = productChecked.map((item: any) => {
      return {
        id: parseInt(item.product_id),
        qty: parseInt(item.qty_error)
      }
    })

    let post = {
      sale_id: order_id, /*  id_sale_order, */
      products: JSON.stringify(products),
      received: 1, /* 0_atau_1, */
      conditions: parseInt(conditions), /* 1_rusak_2_kurang_3_tidak_sesuai, */
      solution_buyer: solution.id, /* 1_pengembalian_barang_2_refund, 3 tukar barang */
      images: JSON.stringify(images) || '', /*  images, */
      notes: inputReason.current?.getText() || '', /*  keluhannya_atau_alasan_komplain, */
    }
    // console.log(post)

    LibProgress.show(esp.lang("market/complaint_step3", "complaint_wait"))
    new LibCurl('shop/order_complaint', post,
      (res, msg) => {
        LibProgress.hide()
        LibDialog.info(esp.lang("market/complaint_step3", "complaint_ok"), msg)
        LibNavigation.reset()
        LibNavigation.navigate<MarketOrderArgs>('market/order', { status: 6 })
        LibNavigation.navigate<MarketOrder_detailArgs>('market/order_detail', { url: res.url })
      }, (msg) => {
        LibProgress.hide()
        LibDialog.warning(esp.lang("market/complaint_step3", "complaint_failed"), msg?.message)
      }, 1
    )
  }

  function deleteImage(url: string) {
    LibDialog.warningConfirm(
      esp.lang("market/complaint_step3", "delete_title"),
      esp.lang("market/complaint_step3", "delete_msg"),
      esp.lang("market/complaint_step3", "delete_confirm"), () => {
        setImages(images.filter((x: any) => x != url) || [])
      }, esp.lang("market/complaint_step3", "delete_cancel"), () => { })
  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader title={esp.lang("market/complaint_step3", "header_title")} subtitle={esp.lang("market/complaint_step3", "header_sub")} onlyBack />
      <View style={{ width: LibStyle.width, height: 4, backgroundColor: "#f1f1f1" }} >
        <View style={{ backgroundColor: MarketStyle.colorPrimaryMarket, height: 4, width: LibStyle.width }} />
      </View>
      <ScrollView>
        <MarketInput_container>
          <View style={{ marginTop: 15, marginHorizontal: 17, marginBottom: -15 }} >
            <Text allowFontScaling={false} style={{ marginBottom: 5, fontFamily: "Arial", fontSize: 16, fontWeight: "500", color: '#444' }} >{esp.lang("market/complaint_step3", "reason")}</Text>
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#444" }} >{esp.lang("market/complaint_step3", "product_problem")}</Text>
          </View>
          <MarketInput_square
            ref={inputReason}
            label=" "
            multiline
            style={{ textAlignVertical: "top", height: 80 }}
            onChangeText={(t) => { }}
          />

          <View style={{ marginTop: 15, marginHorizontal: 17 }} >
            <Text allowFontScaling={false} style={{ marginBottom: 5, fontFamily: "Arial", fontSize: 16, fontWeight: "500", color: '#444' }} >{esp.lang("market/complaint_step3", "select_colution")}</Text>
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#444" }} >{esp.lang("market/complaint_step3", "give_solution")}</Text>
          </View>
          <MarketInput_select
            placeholder={solution?.title}
            onPress={() => {
              LibNavigation.navigateForResult<MarketComplaint_solutionArgs>('market/complaint_solution', { item: solution, exclude_id: '4' }).then((x) => {
                setSolution(x)
              })
            }}
          />

          <View style={{ marginHorizontal: 17, marginTop: 15 }} >
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#444" }} >{esp.lang("market/complaint_step3", "upload_image")}</Text>
            {/* <TouchableOpacity onPress={() => { }} style={{ flexDirection: "row", alignItems: "center", borderWidth: 1, borderColor: "#ddd", padding: 10, paddingHorizontal: 15, marginTop: 15, borderRadius: 6 }} >
              <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 14, color: MarketStyle.colorPrimaryMarket }} >{"Unggah Bukti"}</Text>
              <LibIcon name="plus-circle-outline" color={MarketStyle.colorPrimaryMarket} />
            </TouchableOpacity> */}
          </View>

          <View style={{ flexDirection: "row", flexWrap: "wrap", marginTop: 15, marginLeft: 17 }} >
            <TouchableOpacity onPress={() => imagePicker.current?.show()} style={{ alignItems: "center", justifyContent: "center", width, height: width, marginRight: 15, marginBottom: 10, borderRadius: 5, backgroundColor: LibStyle.colorGrey }}>
              <LibIcon name="plus-circle-outline" color={MarketStyle.colorPrimaryMarket} size={25} />
            </TouchableOpacity>
            {
              LibUtils.checkUndefined(images, '0') && images.map((image: any, i: number) => (
                <View key={i} style={{ width, height: width, marginRight: 15, marginBottom: 10, borderRadius: 5, backgroundColor: LibStyle.colorGrey }}>
                  <LibPicture source={{ uri: image }} style={{ width, height: width, borderRadius: 5 }} resizeMode="cover" />
                  <TouchableOpacity onPress={() => deleteImage(image)} style={{ position: "absolute", top: 5, right: 5, alignItems: "center", justifyContent: 'center', backgroundColor: LibStyle.colorRed, width: 25, height: 25, borderRadius: 12.5 }} >
                    <LibIcon name="trash-can-outline" color="white" size={16} />
                  </TouchableOpacity>
                </View>
              ))
            }
          </View>

        </MarketInput_container>

      </ScrollView>
      <MarketButton
        onPress={() => {
          doComplaint()
        }}
        text={esp.lang("market/complaint_step3", "btn_save")}
        colorBackground={solution.id ? MarketStyle.colorPrimaryMarket : LibStyle.colorGrey}
        buttonStyle={{ marginHorizontal: 15, marginVertical: 10 }}
      />

      <MarketImage_picker
        _ref={imagePicker}
        onFinish={(x) => {
          setImages([...images, x])
        }}
      />
    </View>
  )
}