// withHooks
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { MarketComplaint_orderArgs } from 'esoftplay/cache/market/complaint_order/import';
import { MarketComplaint_step1Args } from 'esoftplay/cache/market/complaint_step1/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketSheet } from 'esoftplay/cache/market/sheet/import';
import esp from 'esoftplay/esp';

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


export interface MarketComplaint_formArgs {
  data: any,
  order_id: number
}
export interface MarketComplaint_formProps {

}
export default function m(props: MarketComplaint_formProps): any {
  const { data, order_id } = LibNavigation.getArgsAll<any>(props)
  const sheetRef = useRef<LibSlidingup>(null)

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        onlyBack
        title={esp.lang("market/complaint_form", "header_title")}
        rightIcon={{ name: "dots-vertical", onPress: () => { sheetRef.current!.show() } }} />
      <ScrollView>
        <MarketSection_menu smooth title={esp.lang("market/complaint_form", "order_receive")} />

        <TouchableOpacity onPress={() => {
          LibNavigation.navigate<MarketComplaint_step1Args>('market/complaint_step1', { data: data, order_id: order_id })
        }} activeOpacity={1} style={[styleId_Hzik9]} >
          <View style={styleId_1szId7}>
            <LibIcon name="map-marker" color={LibStyle.colorPrimaryMarket} />
            <View style={styleId_ZEBDaG} >
              <Text allowFontScaling={false} style={styleId_ZA24W1} >{esp.lang("market/complaint_form", "order_half_receive")}</Text>
            </View>
            <LibIcon name="chevron-right" />
          </View>
          <View style={styleId_29sEzu}>
            <LibIcon name="map-marker" color={"transparent"} />
            <View style={styleId_ZEBDaG} >
              <Text allowFontScaling={false} style={styleId_Z11zAnH} >{esp.lang("market/complaint_form", "order_half_broken")}</Text>
            </View>
            <LibIcon name="map-marker" color={"transparent"} />
          </View>
        </TouchableOpacity>

        <TouchableOpacity onPress={() => {
          LibNavigation.navigate<MarketComplaint_orderArgs>('market/complaint_order', { data: data, order_id: order_id })
        }} activeOpacity={1} style={[styleId_Hzik9]} >
          <View style={styleId_1szId7}>
            <LibIcon name="truck" color={LibStyle.colorPrimaryMarket} />
            <View style={styleId_ZEBDaG} >
              <Text allowFontScaling={false} style={styleId_ZA24W1} >{esp.lang("market/complaint_form", "order_not_receive")}</Text>
            </View>
            <LibIcon name="chevron-right" />
          </View>
          <View style={styleId_29sEzu}>
            <LibIcon name="map-marker" color={"transparent"} />
            <View style={styleId_ZEBDaG} >
              <Text allowFontScaling={false} style={styleId_Z11zAnH} >{esp.lang("market/complaint_form", "order_not_receive1")}</Text>
            </View>
            <LibIcon name="map-marker" color={"transparent"} />
          </View>
        </TouchableOpacity>

      </ScrollView>

      <MarketSheet
        _ref={sheetRef}
        options={[
          {
            text: esp.lang("market/complaint_form", "home"),
            onPress: () => {
              LibNavigation.backToRoot()
            }
          },
          {
            text: esp.lang("market/complaint_form", "help"),
            onPress: () => {
              LibNavigation.navigate('user/help')
            }
          }
        ]}
      />
    </View>
  )
}
const styleId_1szId7: any = { flexDirection: "row", alignItems: "center" }
const styleId_ZEBDaG: any = { marginHorizontal: 15, flex: 1 }
const styleId_ZA24W1: any = { fontSize: 14, fontFamily: "Arial" }
const styleId_29sEzu: any = { flexDirection: "row", alignItems: "center", marginTop: 10 }
const styleId_Z11zAnH: any = { fontSize: 12, fontFamily: "Arial", color: '#bbb' }
const styleId_Hzik9: any = { marginHorizontal: 17, backgroundColor: "white", marginBottom: 15, padding: 15, borderRadius: 5, ...LibStyle.elevation(2) }