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

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibList } from 'esoftplay/cache/lib/list/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/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, { useEffect } from 'react';
import { TouchableOpacity, View } from 'react-native';


export interface MarketCheckout_shippingArgs {
  data: any[],
  selected_id: number
}
export interface MarketCheckout_shippingProps {

}

export default function m(props: MarketCheckout_shippingProps): any {
  const { data, selected_id } = LibNavigation.getArgsAll<MarketCheckout_shippingArgs>(props)

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

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        leftIcon={{ name: "close", onPress: () => LibNavigation.back() }}
        title={esp.lang("market/checkout_shipping", "header_title")}
      />
      <LibList
        data={data}
        renderItem={(item) => (
          <View>
            <TouchableOpacity
              onPress={() => { LibNavigation.sendBackResult(item, LibNavigation.getResultKey(props)) }}
              style={styleId_aj1LG} >
              <LibIcon name={item.id == selected_id ? "checkbox-marked-circle" : "checkbox-blank-circle-outline"} color={item.id == selected_id ? MarketStyle.colorBrown : "#888"} />
              <View style={{ flex: 1, marginLeft: 10 }} >
                <LibTextstyle textStyle="callout" text={item.code.toUpperCase()} />
                <LibTextstyle textStyle="footnote" text={item.service} style={styleId_jBq3B} />
                {
                  item.cod == 1 &&
                  <LibTextstyle textStyle="footnote" text={esp.lang("market/checkout_shipping", "cod_unavailable", LibUtils.money(Number(item.cod_fee)))} style={{ color: MarketStyle.colorPrimaryMarket }} />
                }
              </View>
              <LibTextstyle textStyle="callout" text={LibUtils.money(item.price)} style={{}} />
            </TouchableOpacity>
            <MarketSection_menu size="line" />
          </View>
        )}
      />
    </View>
  )
}
const styleId_aj1LG: any = { paddingVertical: 10, paddingHorizontal: 17, flexDirection: "row" }
const styleId_jBq3B: any = { color: "#888" }