// 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 { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketComplaint_solutionArgs {
  item?: any,
  exclude_id?: string
}
export interface MarketComplaint_solutionProps {

}
export default function m(props: MarketComplaint_solutionProps): any {
  const { item, exclude_id } = LibNavigation.getArgsAll<MarketComplaint_solutionArgs>(props)

  const [data, setData] = useSafeState<any>()
  const [solution, setSolution] = useSafeState<any>(item)

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

  function getData() {
    new LibCurl("shop/order_complaint_config", null,
      (res) => {
        if (exclude_id) {
          let _res = res.complaint_solution.filter((item: any) => item.id != exclude_id)
          setData(_res)
        } else {
          setData(res.complaint_solution)
        }
      }, (err) => {
        LibDialog.warning(esp.lang("market/complaint_solution", "get_data_failed"), err?.message)
      }, 1
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        onlyBack
        title={esp.lang("market/complaint_solution", "header_title")} />
      {
        !data ? <LibLoading /> :
          <ScrollView>
            {
              data.map((item: any, i: number) => (
                <TouchableOpacity key={i} onPress={() => {
                  setSolution(item)
                  LibNavigation.sendBackResult(item, LibNavigation.getResultKey(props))
                }} activeOpacity={1} style={[{ marginHorizontal: 15, borderRadius: 5, padding: 15, marginTop: 15, marginBottom: 2, backgroundColor: 'white' }, LibStyle.elevation(2)]} >
                  <View style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: 'white' }} >
                    <View style={{ flex: 1 }} >
                      <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16 }} >{item.title}</Text>
                      <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, lineHeight: 18, marginTop: 15 }} >{item.detail}</Text>
                    </View>
                    <View style={{ marginLeft: 20, width: 22, height: 22, borderRadius: 11, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', borderColor: MarketStyle.colorPrimaryMarket, borderWidth: 2 }} >
                      <View style={{ width: 14, height: 14, borderRadius: 7, backgroundColor: solution?.id == item?.id ? MarketStyle.colorPrimaryMarket : 'white' }} />
                    </View>
                  </View>
                </TouchableOpacity>
              ))
            }
          </ScrollView>
      }

    </View>
  )
}