// withHooks

import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketPromotion_product_item } from 'esoftplay/cache/market/promotion_product_item/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';

import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
moment().locale('id')

export interface MarketPromotion_product_approvedArgs {
  tab?: number
}
export interface MarketPromotion_product_approvedProps {

}
export default function m(props: MarketPromotion_product_approvedProps): any {
  const { tab } = LibNavigation.getArgsAll<any>(props)
  const [tabs, setTabs] = useSafeState(tab || 0)
  const date = new Date()
  const curDate = moment(date).localeFormat('YYYY-MM-DD HH:mm:s')
  let same = ''

  let _tabs = [
    {
      id: 1,
      title: esp.lang("market/promotion_product_approved", "requested"),
      url: 'shop/merchant_promo_product_req'
    },
    {
      id: 2,
      title: esp.lang("market/promotion_product_approved", "approved"),
      url: 'shop/merchant_promo_product'
    },
  ]

  return (
    <View style={{ flex: 1 }}>
      <MarketHeader title={esp.lang("market/promotion_product_approved", "header_title")} subtitle={esp.lang("market/promotion_product_approved", "header_sub")} onlyBack />
      <View style={{ height: 38, marginBottom: 2, flexDirection: 'row', backgroundColor: '#fff', ...LibStyle.elevation(2) }} >
        {
          _tabs && _tabs.map((item: any, i: number) => {
            return (
              <TouchableOpacity key={i} onPress={() => {
                setTabs(i)
              }}>
                <View style={{ height: 38, width: LibStyle.width / _tabs.length, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' }}>
                  <Text allowFontScaling={false} style={{
                    width: LibStyle.width / _tabs.length, fontFamily: "Arial", fontSize: tabs == i ? 13 : 12,
                    fontWeight: tabs == i ? "bold" : "normal",
                    fontStyle: "normal", letterSpacing: 0, textAlign: "center",
                    color: tabs == i ? MarketStyle.colorPrimaryMarket : "#c5c5c5"
                  }}>{item.title}</Text>
                  <View style={{ width: (LibStyle.width / _tabs.length) - 20, height: 3, backgroundColor: tabs == i ? MarketStyle.colorPrimaryMarket : "#fff", position: 'absolute', bottom: 0 }} />
                </View>
              </TouchableOpacity>
            )
          })
        }
      </View>
      <LibInfinite
        key={tabs + 'key'}
        url={_tabs[tabs].url}
        errorView={(error: any) => (<MarketEmpty msg={error} />)}
        renderItem={(item: any, i: number) => {
          const show = item?.promo?.promo_list_name != same
          same = item?.promo?.promo_list_name

          return (
            <View key={i}>
              {
                show && tabs == 1 && i != 0 &&
                <View style={{ borderBottomWidth: 1, borderLeftWidth: 1, borderRightWidth: 1, height: 20, marginHorizontal: 15, borderBottomLeftRadius: 10, borderBottomRightRadius: 10, backgroundColor: "white", borderColor: '#e6e6e6' }} />
              }
              <View style={{ borderTopWidth: (show && tabs == 1) ? 1 : 0, borderLeftWidth: tabs == 1 ? 1 : 0, borderRightWidth: tabs == 1 ? 1 : 0, marginHorizontal: tabs == 1 ? 15 : 0, borderTopLeftRadius: show ? 10 : 0, borderTopRightRadius: show ? 10 : 0, marginTop: show ? 10 : 0, backgroundColor: 'white', borderColor: '#e6e6e6', paddingTop: 5 }} >
                {
                  show && item?.promo?.promo_list_start && item?.promo?.promo_list_end &&
                  <View style={{ paddingHorizontal: 15, paddingVertical: 5 }} >
                    <Text style={{ fontFamily: 'ArialBold', fontSize: 14 }}>{item?.promo?.promo_list_name}</Text>
                    {
                      item.promo.promo_list_start > curDate ?
                        <View style={{ flexDirection: 'row', alignItems: 'center' }} >
                          <Text style={{ fontFamily: 'Arial', fontSize: 12, flex: 1 }}>{esp.lang("market/promotion_product_approved", "promo_start")}</Text>
                          <Text style={{ fontFamily: 'Arial', fontSize: 12, }}>{moment(item?.promo?.promo_list_start).localeFormat('DD MMMM YYYY HH:mm')}</Text>
                        </View>
                        :
                        item.promo.promo_list_end > curDate ?
                          <View style={{ flexDirection: 'row', alignItems: 'center' }} >
                            <Text style={{ fontFamily: 'Arial', fontSize: 12, flex: 1 }}>{esp.lang("market/promotion_product_approved", "promo_end_date")}</Text>
                            <Text style={{ fontFamily: 'Arial', fontSize: 12, }}>{moment(item?.promo?.promo_list_end).localeFormat('DD MMMM YYYY HH:mm')}</Text>
                          </View>
                          :
                          <Text style={{ fontFamily: 'Arial', fontSize: 12 }}>{esp.lang("market/promotion_product_approved", "promo_end")}</Text>
                    }
                  </View>
                }
                <MarketPromotion_product_item  {...item} />
              </View>
            </View>
          )
        }}
      />
    </View>
  )
}