// withHooks

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/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 { useTimeout } from 'esoftplay/timeout';
import LottieView from "lottie-react-native";
import React, { useEffect, useRef } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

moment().locale('id')

export interface MarketPromotion_product_approved1Args {
  url: string
}
export interface MarketPromotion_product_approved1Props {

}
export default function m(props: MarketPromotion_product_approved1Props): any {
  const { url } = LibNavigation.getArgsAll<any>(props)
  const animation = useRef<LottieView>(null)
  const [data, setData] = useSafeState<any>()
  const timeout = useTimeout()

  const alert = [
    esp.lang("market/promotion_product_approved1", "check_product"),
    esp.lang("market/promotion_product_approved1", "check_stok"),
  ]

  useEffect(() => {
    if (data) {
      timeout(() => {
        animation.current?.play()
      }, 300);
    }
  }, [data])

  useEffect(() => {
    getData()
  }, [])

  function getData() {
    new LibCurl('shop/merchant_promo_product?id=20', null,
      (res, msg) => {
        esp.log(res);
        setData(res)
      }, (err) => {
        LibDialog.warning(esp.lang("market/promotion_product_approved1", "get_data_failed"), err?.message)
      }, 1
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader onlyBack title={esp.lang("market/promotion_product_approved1", "header_title")} />
      {
        !data ? <LibLoading /> :
          <LibScroll>
            <View style={{ alignItems: 'center' }} >
              <LottieView
                ref={animation}
                loop={false}
                style={{
                  width: 200,
                  height: 200,
                }}
                source={esp.assets('market/success.json')}
              // OR find more Lottie files @ https://lottiefiles.com/featured
              // Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
              />
            </View>
            <View style={{ marginHorizontal: 17, alignItems: 'center' }} >
              <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 16, textAlign: 'center', lineHeight: 24 }} >{esp.lang("market/promotion_product_approved1", "info_promo", data?.promo_title)}</Text>
            </View>

            <View style={{ marginHorizontal: 17, marginTop: 20 }} >
              <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14, lineHeight: 18 }} >{esp.lang("market/promotion_product_approved1", "product_approved")}</Text>
            </View>

            <View style={{ marginHorizontal: 17, marginBottom: 15 }} >
              {
                LibUtils.checkUndefined(data, 'product_approve.0') && data.product_approve.map((product: any, i: number) => (
                  <TouchableOpacity onPress={() => { LibNavigation.navigate('market/product_detail', { url: product.url }) }} key={i} style={{ flexDirection: 'row', marginTop: 15 }} >
                    <LibPicture source={{ uri: product?.image }} style={{ borderRadius: 5, height: 70, width: 70 }} resizeMode="cover" />
                    <View style={{ flex: 1, marginLeft: 10 }} >
                      <Text allowFontScaling={false} numberOfLines={2} style={{ fontFamily: 'Arial', fontSize: 14, fontWeight: 'bold' }} >{product?.title}</Text>
                      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14, textDecorationStyle: 'solid', textDecorationLine: 'line-through' }} >{LibUtils.money(product.price)}</Text>
                        <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14, fontWeight: 'bold' }} > {LibUtils.money(product.sale)}</Text>
                      </View>
                    </View>
                  </TouchableOpacity>
                ))
              }
            </View>

            <View style={{ marginHorizontal: 17 }} >
              <View style={{ flexDirection: 'row', marginTop: 5 }} >
                <View style={{ width: 14, height: 14, borderRadius: 7, backgroundColor: MarketStyle.colorPrimaryMarket, marginRight: 7 }} />
                <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'Arial', fontSize: 14, lineHeight: 18 }} >{esp.lang("market/promotion_product_approved1", "promo_range", moment(data?.promo_start).localeFormat('DD MMMM YYYY H:m:s'), moment(data?.promo_end).localeFormat('DD MMMM YYYY H:m:s'))}</Text>
              </View>
              {
                alert.map((item: any, i: number) => (
                  <View key={i} style={{ flexDirection: 'row', marginTop: 5 }} >
                    <View style={{ width: 14, height: 14, borderRadius: 7, backgroundColor: MarketStyle.colorPrimaryMarket, marginRight: 7 }} />
                    <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'Arial', fontSize: 14, lineHeight: 18 }} >{item}</Text>
                  </View>
                ))
              }
            </View>
            <MarketButton text={esp.lang("market/promotion_product_approved1", "btn_close")} buttonStyle={{ marginHorizontal: 17, marginVertical: 15 }} textStyle={{ fontSize: 14 }} onPress={() => { LibNavigation.backToRoot() }} />
          </LibScroll>
      }
    </View>
  )
}