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

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { MarketComplaint_conditions } from 'esoftplay/cache/market/complaint_conditions/import';
import { MarketComplaint_step2Args } from 'esoftplay/cache/market/complaint_step2/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_step1Args {
  data: any,
  order_id: any
}
export interface MarketComplaint_step1Props {

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

  const menu = MarketComplaint_conditions()

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader title={esp.lang("market/complaint_step1", "header_title")} subtitle={esp.lang("market/complaint_step1", "header_subtitle")} onlyBack />
      <View style={{ width: LibStyle.width, height: 4, backgroundColor: "#f1f1f1" }} >
        <View style={{ backgroundColor: MarketStyle.colorPrimaryMarket, height: 4, width: LibStyle.width / 3 }} />
      </View>

      <ScrollView>

        <View style={{ marginHorizontal: 15, marginTop: 20, marginBottom: 15 }} >
          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "500", color: '#444' }} >{esp.lang("market/complaint_step1", "problem")}</Text>
        </View>

        {
          menu.map((item: any, i: number) => (
            <View key={i}>
              <TouchableOpacity onPress={() => LibNavigation.navigate<MarketComplaint_step2Args>('market/complaint_step2', { order_id: order_id, data: data, conditions: item.conditions })} style={{ flexDirection: "row", alignItems: "center", padding: 15 }} >
                <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 14, fontWeight: "500", color: '#444' }} >{item.detail}</Text>
                <LibIcon name="chevron-right" color="#444" />
              </TouchableOpacity>
              <MarketSection_menu size="line" />
            </View>
          ))
        }

        {/* <TouchableOpacity onPress={() => LibNavigation.navigate<MarketComplaint_step2Args>('market/complaint_step2', { order_id: order_id, data: data, conditions: '1' })} style={{ flexDirection: "row", alignItems: "center", padding: 15 }} >
          <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 14, fontWeight: "500", color: '#444' }} >{'Produk rusak'}</Text>
          <LibIcon name="chevron-right" color="#444" />
        </TouchableOpacity>
        <MarketSection_menu size="line" />
        <TouchableOpacity onPress={() => LibNavigation.navigate<MarketComplaint_step2Args>('market/complaint_step2', { order_id: order_id, data: data, conditions: '3' })} style={{ flexDirection: "row", alignItems: "center", padding: 15 }} >
          <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 14, fontWeight: "500", color: '#444' }} >{'Produk tidak sesuai deskripsi'}</Text>
          <LibIcon name="chevron-right" color="#444" />
        </TouchableOpacity>
        <MarketSection_menu size="line" /> */}

      </ScrollView>
    </View>
  )
}