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

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/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 from 'react';
import { ScrollView, Text, View } from 'react-native';


export interface MarketOrder_status_detailArgs {
  status_detail: any[]
  status: string,
  data: any
}
export interface MarketOrder_status_detailProps {

}
export default function m(props: MarketOrder_status_detailProps): any {
  const { status_detail, status, data } = LibNavigation.getArgsAll<any>(props)
  const width = (LibStyle.width - 170) / 3
  const stat = [3, 4, 5, 7]

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        title={esp.lang("market/order_status_detail", "header_title")}
        leftIcon={{ name: "close", onPress: () => LibNavigation.back() }}
      />
      <ScrollView showsVerticalScrollIndicator={false} >

        <View style={{ flexDirection: "row", justifyContent: "space-around", marginTop: 20, marginBottom: 15, marginHorizontal: 20 }} >
          <View style={{ flexDirection: "row" }} >
            <View style={{ alignItems: "center" }} >
              <LibPicture source={esp.assets('market/ic_notification_payed.png')} style={{ width: 40, height: 40, marginBottom: 5 }} resizeMode="contain" />
              <LibIcon name={status >= 3 ? "check-circle" : "checkbox-blank-circle-outline"} size={20} color={MarketStyle.colorPrimaryMarket} />
            </View>
            <View style={{ width: width, height: 1, backgroundColor: status >= 3 ? MarketStyle.colorPrimaryMarket : LibStyle.colorGrey, position: "absolute", bottom: 10, left: 28 }} />
          </View>
          <View>
            <View style={{ alignItems: "center" }} >
              <LibPicture source={esp.assets('market/ic_notification_packed.png')} style={{ width: 40, height: 40, marginBottom: 5 }} resizeMode="contain" />
              <LibIcon name={status >= 4 ? "check-circle" : "checkbox-blank-circle-outline"} size={20} color={MarketStyle.colorPrimaryMarket} />
            </View>
            <View style={{ width: width, height: 1, backgroundColor: status >= 4 ? MarketStyle.colorPrimaryMarket : LibStyle.colorGrey, position: "absolute", bottom: 10, left: 28 }} />
          </View>
          <View style={{ flexDirection: "row" }} >
            <View style={{ alignItems: "center" }} >
              <LibPicture source={esp.assets('market/ic_notification_sent.png')} style={{ width: 40, height: 40, marginBottom: 5 }} resizeMode="contain" />
              <LibIcon name={status >= 5 ? "check-circle" : "checkbox-blank-circle-outline"} size={20} color={MarketStyle.colorPrimaryMarket} />
            </View>
            <View style={{ width: width, height: 1, backgroundColor: status >= 5 ? MarketStyle.colorPrimaryMarket : LibStyle.colorGrey, position: "absolute", bottom: 10, left: 28 }} />
          </View>
          <View style={{ alignItems: "center" }} >
            <LibPicture source={esp.assets('market/ic_notification_finish.png')} style={{ width: 40, height: 40, marginBottom: 5 }} resizeMode="contain" />
            <LibIcon name={status >= 7 ? "check-circle" : "checkbox-blank-circle-outline"} size={20} color={MarketStyle.colorPrimaryMarket} />
          </View>
        </View>

        <View style={{ marginBottom: 10 }} >
          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, textAlign: "center", fontWeight: "700", color: MarketStyle.colorPrimaryMarket }} >{data?.status_title}</Text>
        </View>

        <MarketSection_menu title={esp.lang("market/order_status_detail", "status")} />
        <View style={{ overflow: "hidden" }} >
          {
            LibUtils.checkUndefined(status_detail, "0") && status_detail.map((item: any, i: number) => {
              return (
                <View key={i} style={{ paddingHorizontal: 17, flexDirection: 'row', alignItems: "center", paddingVertical: 10 }} >
                  <View style={{ height: 10, width: 10, borderRadius: 5, backgroundColor: MarketStyle.colorPrimaryMarket, marginRight: 10 }} />
                  <View style={{ flex: 1 }}  >
                    {/* <LibTextstyle textStyle="footnote" text="12 Januari 2004 08:00" style={{ color: "#BBB" }} /> */}
                    <LibTextstyle textStyle="footnote" text={item.created} style={{ color: "#BBB", fontSize: 12 }} />
                    <LibTextstyle textStyle="callout" text={item.title} style={{ fontSize: 14 }} />
                  </View>
                </View>
              )
            })
          }
          <View style={{ height: '100%', width: 1, backgroundColor: MarketStyle.colorPrimaryMarket, position: "absolute", bottom: 0, left: 21.5, top: 35, zIndex: -1 }} />
        </View>

        <MarketSection_menu />
      </ScrollView>
    </View>
  )
}