// withHooks
// noPage

import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';

import moment from 'esoftplay/moment';
import React from 'react';
import { ScrollView, Text, View } from 'react-native';


export interface MarketStore_detailArgs {

}
export interface MarketStore_detailProps {
  merchant: any
  vouchers?: any
}
export default function m(props: MarketStore_detailProps): any {
  const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
  return (
    <View style={{ flex: 1, marginHorizontal: 17 }} >
      <ScrollView>
        <ScrollView horizontal>
          <View style={{ flexDirection: 'row', marginTop: 10, marginBottom: 10 }}>
            {
              props.vouchers?.length > 0 && props.vouchers?.map?.((item: any, i: number) => {
                return (
                  <View key={i + 1 + (1 + i)} style={{ width: LibStyle.width - 120, backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.1), borderRadius: 3, padding: 10, marginRight: 10,/*  borderColor: MarketStyle.colorPrimaryMarket, borderWidth: 1 */ }}>
                    <Text allowFontScaling={false} style={{ color: MarketStyle.colorPrimaryMarket, flexWrap: 'wrap', flex: 1, fontSize: 14, fontWeight: 'bold' }}>{item.amount_type == "1" ? esp.lang("market/store_detail", "disc_amount", LibUtils.money(item.amount)) : esp.lang("market/store_detail", "disc_percent", item.amount)} {esp.lang("market/store_detail", "min_order")} {LibUtils.money(item.order_min)}</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }}>
                      <View style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: '#fff', marginLeft: -20 }} />
                      <View style={{ flex: 1 }} />
                      <View style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: '#fff', marginRight: -20 }} />
                    </View>
                    <View style={{ marginTop: 3, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
                      <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: 'normal', color: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.5) }}>Berakhir {Math.round(Math.abs((Number(moment().toMiliseconds()) - Number(moment(item.expired_date).toMiliseconds())) / oneDay))} hari lagi</Text>
                    </View>
                  </View>
                )
              })
            }
          </View>
        </ScrollView>
        <MarketSection_menu size="line" />

        <View style={{ marginTop: 10, marginBottom: 10 }} >
          <Text>{esp.lang("market/store_detail", "description")}</Text>
          <Text>{props?.merchant?.description}</Text>
        </View>
        <MarketSection_menu size="line" />
        <View style={{ marginTop: 10, marginBottom: 10 }} >
          <Text>{esp.lang("market/store_detail", "email")}</Text>
          <Text>{props?.merchant?.email}</Text>
        </View>
        <MarketSection_menu size="line" />
      </ScrollView>
    </View>
  )
}