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


import { LibIcon } from 'esoftplay/cache/lib/icon/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 { LibStyle } from 'esoftplay/cache/lib/style/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 { MarketComplaint_step3Args } from 'esoftplay/cache/market/complaint_step3/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketComplaint_step2Args {
  data: any,
  conditions: string,
  order_id: number
}
export interface MarketComplaint_step2Props {

}
export default function m(props: MarketComplaint_step2Props): any {
  const { data, conditions, order_id } = LibNavigation.getArgsAll<MarketComplaint_step2Args>(props)

  const product = data.product_list.map((product: any, idx: number) => {
    return ({
      ...product,
      checked: 0,
      qty_error: 0
    })
  })

  const [product_list, setProduct_list] = useSafeState<any>(product)

  esp.log(product_list);

  function setCheck(check: any, index: number) {
    setProduct_list(LibObject.set(product_list, check)(index, 'checked'))
  }

  function addQty(item: any, i: number) {
    if (parseInt(item.product_qty) > item.qty_error) {
      setProduct_list(LibObject.set(product_list, item.qty_error + 1)(i, 'qty_error'))
    }
  }

  function minQty(item: any, i: number) {
    if (parseInt(item.qty_error) > 0) {
      setProduct_list(LibObject.set(product_list, item.qty_error - 1)(i, 'qty_error'))
    }
  }

  const productChecked = product_list.filter((item: any, i: number) => item.checked == 1)

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader title={esp.lang("market/complaint_step2", "header_title")} subtitle={esp.lang("market/complaint_step2", "header_sub")} onlyBack />
      <View style={{ width: LibStyle.width, height: 4, backgroundColor: "#f1f1f1" }} >
        <View style={{ backgroundColor: MarketStyle.colorPrimaryMarket, height: 4, width: (LibStyle.width / 3) * 2 }} />
      </View>
      <ScrollView>
        <View style={{ marginHorizontal: 15, marginTop: 15, marginBottom: 20 }} >
          <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 16, fontWeight: "500", color: '#444' }} >{esp.lang("market/complaint_step2", "select_product")}</Text>
        </View>
        {
          LibUtils.checkUndefined(product_list, "0") && product_list.map((item: any, i: number) => (
            <View key={i} >
              <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 15, marginTop: 10, paddingHorizontal: 15 }} >
                <TouchableOpacity onPress={() => { setCheck(item.checked == 1 ? 0 : 1, i) }} style={{ marginRight: 10 }} >
                  <LibIcon name={item.checked == 1 ? 'checkbox-outline' : 'checkbox-blank-outline'} />
                </TouchableOpacity>
                <View style={{ backgroundColor: LibStyle.colorGrey, width: 50, height: 50 }}>
                  <LibPicture source={{ uri: item.product_image }} style={{ width: 50, height: 50, borderRadius: 5 }} resizeMode="cover" />
                </View>
                <View style={{ flex: 1, marginLeft: 10, marginVertical: 5 }} >
                  <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode="tail" style={{ flex: 1, fontFamily: "Arial", fontSize: 14 }} >{item?.product_name}</Text>
                  {
                    item.option_id_primary_data != '' &&
                    <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginVertical: 2 }} >
                      <LibTextstyle textStyle="caption2" text={item.option_id_primary_data + (item.option_id_secondary_data ? (" : " + item.option_id_secondary_data) : '')} style={{ color: "#999", backgroundColor: '#f1f2f3', paddingHorizontal: 3, paddingVertical: 2, borderRadius: 3 }} />
                    </View>
                  }
                  <Text allowFontScaling={false} style={{}} >{LibUtils.money(item?.price)}</Text>
                </View>
                <View style={{ alignItems: 'center', opacity: item.checked == 1 ? 1 : 0.4 }} >
                  <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 5 }} >
                    <TouchableOpacity disabled={item.checked == 0} onPress={() => minQty(item, i)}>
                      <LibIcon.AntDesign name='minuscircleo' size={20} />
                    </TouchableOpacity>
                    <View style={{ borderWidth: 1, borderColor: '#e6e6e6', paddingVertical: 3, paddingHorizontal: 15, marginHorizontal: 5 }} >
                      <Text allowFontScaling={false} numberOfLines={1} style={{ fontFamily: "Arial", fontSize: 14 }} >{item?.qty_error}</Text>
                    </View>
                    <TouchableOpacity disabled={item.checked == 0} onPress={() => addQty(item, i)}>
                      <LibIcon.AntDesign name='pluscircleo' size={20} />
                    </TouchableOpacity>
                  </View>
                  <Text allowFontScaling={false} numberOfLines={1} style={{ fontFamily: "Arial", fontSize: 12 }} >{item?.qty_error + '/' + item?.product_qty + ' item'}</Text>
                </View>
              </View>
              <MarketSection_menu size="line" />
            </View>
          ))
        }
      </ScrollView>
      <MarketButton
        onPress={() => {
          const qty_error = productChecked.some((item: any) => item.qty_error == 0)
          if (productChecked.length > 0) {
            if (!qty_error) {
              LibNavigation.navigate<MarketComplaint_step3Args>('market/complaint_step3', { productChecked: productChecked, conditions: conditions, order_id: order_id })
            } else {
              LibToastProperty.show(esp.lang("market/complaint_step2", "empty_qty_error"))
            }
          }
        }}
        text={esp.lang("market/complaint_step2", "btn_next")}
        colorBackground={productChecked.length > 0 ? MarketStyle.colorPrimaryMarket : LibStyle.colorGrey}
        buttonStyle={{ marginHorizontal: 15, marginVertical: 10 }}
      />
    </View>
  )
}