// withHooks
// noPage

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';

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


export interface MarketProduct_sectionArgs {

}
export interface MarketProduct_sectionProps {
  block: any,
  data: any,
  renderItem: (data: any, i: number) => void
}
export default function m(props: MarketProduct_sectionProps): any {
  let animated = useRef(new Animated.Value(0)).current
  let currentTime = useRef(moment().localeFormat("YYYY-MM-DD H:m:s")).current
  const { block, data } = props
  const opacityBackground = animated.interpolate({
    inputRange: [0, 150],
    outputRange: [1, 0],
    extrapolate: 'clamp'
  })

  const height = 1 * 255
  const width = 6 * 255

  return (
    <View style={{ height: height, width: LibStyle.width, justifyContent: 'center', marginTop: 10, paddingTop: 5, overflow: 'hidden' }}>
      <LibPicture source={{ uri: block?.image_background }} style={{ height: height, width: width }} />
      <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
        {
          props.block.start_datetime && props.block.end_datetime && (currentTime >= props.block.start_datetime) &&
          <Animated.View style={{ width: 125, marginHorizontal: 20, opacity: opacityBackground }}>
            <Animated.View style={{ position: 'absolute', top: 15, left: 0, right: 0, opacity: opacityBackground, alignItems: 'center' }} >
              <Text allowFontScaling={false} style={{ fontFamily: 'ArialBold', fontSize: 12, }} >{esp.lang("market/product_section", "end_date")}</Text>
              <MarketCountdown expired={moment(props?.block?.end_datetime).localeFormat('YYYY-MM-DD HH:mm:ss')}
                onlyDay
                style={{ color: 'white', fontSize: 14, fontWeight: 'bold' }}
                containerStyle={{ backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.9), paddingHorizontal: 15, borderRadius: 20, marginTop: 7 }} />
            </Animated.View>
          </Animated.View>
        }
        <Animated.Image
          style={{ height: 250, width: 125, resizeMode: 'cover', opacity: opacityBackground, marginHorizontal: 20 }}
          source={{ uri: block.image_icon != "" ? block.image_icon : null }} />
        <Animated.ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          scrollEventThrottle={16}
          onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: animated } } }], { useNativeDriver: true },)} style={[StyleSheet.absoluteFill, { top: 5 }]} >
          {
            (block.image_icon != "" || (props.block.start_datetime && props.block.end_datetime)) &&
            <View style={{ width: 115, marginHorizontal: 17 }} />
          }
          <View style={{ width: 10 }} />
          {LibUtils.checkUndefined(data, 'list.0') && data?.list?.map(props.renderItem)}
          {block?.params?.more_url != '' &&
            <TouchableOpacity activeOpacity={1} onPress={() => LibNavigation.navigate(block?.params?.more_module, { url: block?.params?.more_url, title: block.title })} style={{ width: 140, alignItems: 'center', justifyContent: 'center', margin: 5, marginTop: 0, borderRadius: 4, backgroundColor: 'white', borderWidth: 1, flexGrow: 1, borderColor: '#f1f2f3' }} >
              <LibIcon name='chevron-right-circle' color={'#888'} />
              <Text allowFontScaling={false} style={{ color: '#888', textAlign: 'center', fontFamily: 'Arial', fontSize: 14 }} >{esp.lang("market/product_section", "other")}</Text>
            </TouchableOpacity>
          }
          <View style={{ width: 10 }} />
        </Animated.ScrollView>
      </View>
    </View>
  )
}