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


import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/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 { LibStatusbar } from 'esoftplay/cache/lib/statusbar/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketPromotion_termArgs } from 'esoftplay/cache/market/promotion_term/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketPromotion_programArgs {

}
export interface MarketPromotion_programProps {

}

interface PromoItem {
  image: string,
  title: string,
  onPress: () => void
}

function Item(params: PromoItem) {
  return (
    <TouchableOpacity activeOpacity={1} onPress={params.onPress} style={{ marginRight: 10, marginBottom: 15 }} >
      <View style={[{ width: itemWidth, backgroundColor: 'white', alignItems: "center", padding: 15, borderRadius: 8 }, LibStyle.elevation(2)]} >
        <LibPicture source={esp.assets(params.image)} style={{ width: 40, height: 40 }} resizeMode="contain" />
      </View>
      <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", textAlign: "center", fontSize: 10 }} >{params.title}</Text>
    </TouchableOpacity>
  )
}

const itemWidth = (LibStyle.width - 60) / 4
export default function m(props: MarketPromotion_programProps): any {
  const bannerWidth = LibStyle.width - 80
  const bannerHeight = bannerWidth

  const backgroundWidth = LibStyle.width
  const backgroundHeight = backgroundWidth * (181 / 375)

  const imgWidth = (LibStyle.width - 60) * 0.5
  const imgHeight = imgWidth * (100 / 157)

  const [data, setData] = useSafeState<any>()

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

  function getData() {
    new LibCurl('shop/merchant_promo', null,
      (res, msg) => {
        esp.log(res);
        setData(res)
      }, (err) => {
        LibDialog.warning(esp.lang("market/promotion_program", "get_failed"), err?.message)
      }, 1
    )
  }


  return (
    <View style={{ flex: 1 }} >
      <LibScroll onRefresh={getData} >
        <View>
          <View style={{ alignItems: 'center', justifyContent: 'center' }} >
            <View style={{ backgroundColor: MarketStyle.colorPrimaryMarket, width: backgroundWidth, height: backgroundHeight }} />
            <LibPicture source={esp.assets('market/banner_flash_sale.png')} style={{ width: bannerWidth, height: bannerHeight, marginTop: -(backgroundHeight + 2) }} resizeMode='contain' />
          </View>
          <View style={{ position: 'absolute', top: 0, left: 0, right: 0 }} >
            <LibStatusbar style="dark" />
            <View style={{ flexDirection: 'row', alignItems: 'center', paddingTop: LibStyle.STATUSBAR_HEIGHT }} >
              <TouchableOpacity onPress={() => LibNavigation.back()} style={{ alignItems: "center", justifyContent: "center", height: 50, width: 50 }}  >
                <LibIcon name='arrow-left' />
              </TouchableOpacity>
              <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14, fontWeight: 'bold', }} >{esp.lang("market/promotion_program", "promo_program")}</Text>
            </View>
          </View>
        </View>

        {
          !data ? <LibLoading /> :
            <View style={{ marginTop: -30 }}>
              <TouchableOpacity onPress={() => { LibNavigation.navigate('market/promotion_product_approved') }} style={{ marginVertical: 10, padding: 10, marginHorizontal: 20, borderRadius: 5, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', ...LibStyle.elevation(3) }} >
                <Text style={{ flex: 1, color: '#707070' }}>{esp.lang("market/promotion_program", "show_product")}</Text>
                <LibIcon name="chevron-right" size={18} color={'#707070'} />
              </TouchableOpacity>
              <View style={{ marginLeft: 20, flexDirection: "row", flexWrap: "wrap" }} >
                {
                  LibUtils.checkUndefined(data, '0') && data.map((item: any, i: number) => {
                    return (
                      <TouchableOpacity key={i} activeOpacity={1} onPress={() => { LibNavigation.navigate<MarketPromotion_termArgs>('market/promotion_term', { ...item }) }} style={{ backgroundColor: MarketStyle.colorPrimaryMarket, borderRadius: 5, width: imgWidth, height: imgHeight, alignItems: 'center', justifyContent: 'center', marginRight: 20, marginBottom: 20, padding: 15 }} >
                        <LibPicture source={{ uri: item.image }} style={{ width: 90, height: 60 }} resizeMode='contain' />
                        <Text allowFontScaling={false} style={{ color: '#f2f2f2', fontFamily: 'Arial', fontSize: 13, marginTop: 3 }} >{item?.title}</Text>
                      </TouchableOpacity>
                    )
                  })
                }
              </View>
            </View>
        }

      </LibScroll>

    </View>
  )
}