// withHooks
// noPage

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/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 { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

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


export interface MarketProduct_detail_shippingProps {
  shipping: any[],
  product_id: string,
  location: any,
  onPress: () => void
}

function shipping(shipping: any) {
  let min = 0
  shipping.forEach((item: any) => {
    if (item.shipping_cost < min)
      min = item.shipping_cost
  });
  return String(min)
}

export default function m(props: MarketProduct_detail_shippingProps): any {
  const [data, setData] = useSafeState<any[]>()
  const [minPrice, setMinPrice] = useSafeState(0)
  const [location, setLocation] = useSafeState(props.location)
  const shortName = location?.name?.split?.(',')[0] + ',' + location?.name?.split?.(',')[1]

  function getAllPrices(res: any): number[] {
    let prices: number[] = []
    res.forEach((item: any) => {
      item.list.forEach((item: any) => {
        prices.push(item.shipping_cost)
      })
    })
    return prices
  }

  useEffect(() => {
    new LibCurl("shop/product_shipping", {
      id: props.product_id,
      destination_id: location.id
    }, (res: any, msg) => {
      MarketSlidingupProperty.hide()
      LibProgress.hide()
      setMinPrice(Math.min(...getAllPrices(res)))
      setData(res)
    }, msg => {
      LibToastProperty.show(msg?.message)
    }, 1)
  }, [location])

  useEffect(() => {
    MarketSlidingupProperty.add(
      <View style={{ backgroundColor: "white", paddingVertical: 10 }} >
        <LibTextstyle textStyle="headline" text={esp.lang("market/product_detail_shipping1", "shipping_info")} style={{ textAlign: 'center', paddingBottom: 10 }} />
        <MarketSection_menu size="line" />
        <TouchableOpacity
          onPress={() => {
            MarketSlidingupProperty.hide()
            LibNavigation.navigateForResult('market/location').then((v) => {
              setLocation({ id: v.id, name: v.detail })
              LibProgress.show(esp.lang("market/product_detail_shipping1", "wait"))
            })
          }}
          style={{ paddingHorizontal: 17, paddingVertical: 10, flexDirection: "row", alignItems: 'center' }} >
          <LibTextstyle textStyle="footnote" text={esp.lang("market/product_detail_shipping1", "send_to")} style={{ color: "#888" }} />
          <View style={{ flex: 1 }} />
          <LibTextstyle textStyle="footnote" text={shortName} style={{ marginRight: 10 }} />
          <LibIcon.SimpleLineIcons name={'arrow-right'} size={12} color={MarketStyle.colorPrimaryMarket} />
        </TouchableOpacity>
        <MarketSection_menu size="small" />
        <ScrollView showsVerticalScrollIndicator={false} style={{ maxHeight: LibStyle.height * 0.6 }}>

          {
            data && data.map((item: any, index: number) => (
              <View key={index} style={{ borderBottomWidth: 1, borderBottomColor: "#ececec", paddingHorizontal: 17, paddingVertical: 10 }} >
                <LibTextstyle textStyle='footnote' text={item.code.toUpperCase()} style={{ alignSelf: 'flex-start', fontWeight: 'bold' }} />
                {
                  item.list.map((item: any, idx: number) => (
                    <View key={item.service} style={{ flexDirection: "row", marginVertical: 10 }} >
                      <LibTextstyle textStyle="caption1" text={item.service} style={{ flex: 1, color: '#888' }} />
                      <LibTextstyle textStyle="caption1" text={item.estimate_day} style={{ color: '#888' }} />
                      <LibTextstyle textStyle="caption1" text={LibUtils.money(item.shipping_cost)} style={{ minWidth: 100, textAlign: 'right' }} />
                    </View>
                  ))
                }
              </View>
            ))
          }
        </ScrollView>
      </View>
    )
  }, [])



  return (
    <View style={{ paddingHorizontal: 17, marginTop: 10 }} >
      <LibTextstyle textStyle="footnote" text={esp.lang("market/product_detail_shipping1", "info")} style={{ color: "#888" }} />
      <TouchableOpacity onPress={() => MarketSlidingupProperty.show()} style={{ flexDirection: "row", paddingVertical: 10, alignItems: 'center' }} >
        <LibTextstyle textStyle="callout" ellipsizeMode="middle" numberOfLines={1} text={shortName} style={{ flex: 1, marginRight: 17 }} />
        <LibTextstyle textStyle="callout" text={LibUtils.money(minPrice)} />
        <LibIcon.SimpleLineIcons name="arrow-down" size={14} style={{ marginLeft: 5 }} />
      </TouchableOpacity>
    </View>
  )
}