// withHooks
// noPage
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
import { MarketProduct_item } from 'esoftplay/cache/market/product_item/import';
import moment from 'esoftplay/moment';

import React, { useRef } from 'react';
import { Animated, ImageBackground, StyleSheet, View } from 'react-native';


export interface MarketFlashArgs {

}
export interface MarketFlashProps {
  data: any[],
  image_background: string,
  image_icon: string,
  start_datetime: string,
  end_datetime: string
}
export default function m(props: MarketFlashProps): any {
  let animated = useRef(new Animated.Value(0)).current

  const opacityBackground = animated.interpolate({
    inputRange: [0, 150],
    outputRange: [1, 0],
    extrapolate: 'clamp'
  })

  return (
    <ImageBackground source={{ uri: props.image_background }} style={{ height: 240, backgroundColor: 'orange', justifyContent: 'center', marginTop: 10 }} >
      <Animated.Image
        style={{ height: 100, width: 100, opacity: opacityBackground, resizeMode: 'contain', marginHorizontal: 20 }}
        source={{ uri: props.image_icon }} />
      <Animated.ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        scrollEventThrottle={16}
        onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: animated } } }], { useNativeDriver: true },)} style={StyleSheet.absoluteFill} >
        <View style={{ width: 120, marginTop: 20, marginHorizontal: 15 }} >
          {
            props.end_datetime != '' &&
            <MarketCountdown expired={moment(props.end_datetime).localeFormat('YYYY-MM-DD HH:mm:ss')} style={{ height: 25, borderRadius: 3, backgroundColor: "#03192a", fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 16, letterSpacing: 0, textAlign: "center", color: "#fff" }} />
          }
        </View>
        {
          props.data && props.data.map((item: any) => {
            return (
              <MarketProduct_item {...item} width={LibStyle.width * 0.5 - 40} />
            )
          })
        }
      </Animated.ScrollView>
    </ImageBackground>
  )
}