// withHooks
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { useEffect } from 'react';

import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';


export interface EventPoint_redemptionArgs {

}
export interface EventPoint_redemptionProps {

}
export default function m(props: EventPoint_redemptionProps): any {
  const opacity = useSharedValue(1)

  useEffect(() => {
    opacity.value = withRepeat(
      withTiming(0.7, {
        duration: 1000,
      }),
      -1, // infinite
      true // reverse
    )
  }, [])
  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }))

  let mainColor = /* exchange */"#059669" /* redem #002045 */

  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title='Point Redemption' subtitle='NAMA EVENT NIH' />
      <ScrollView>
        <TouchableOpacity onPress={() => {
          LibNavigation.navigateForResult('component/scanner').then((value) => {
            LibNavigation.navigate('event/point_redemption_input', { qr: value })
          })
        }} style={{ margin: 10, backgroundColor: '#fff', borderRadius: 10, overflow: 'hidden', ...LibStyle.elevation(2) }}>
          <View style={{ backgroundColor: '#002045', padding: 30 }}>
            <Animated.View style={[
              {
                width: 50,
                height: 50,
                borderRadius: 25,
                backgroundColor: '#4A607A',
                justifyContent: 'center', alignContent: 'center', alignItems: 'center', alignSelf: 'center'
              },
              animatedStyle,
            ]}>
              <LibIcon name='qrcode-scan' color='#fff' size={30} />
            </Animated.View>
          </View>
          <View style={{ padding: 10 }}>
            <View style={{ flexDirection: 'row' }}>
              <View style={{ flex: 1, marginRight: 10 }}>
                <Text allowFontScaling={false} style={{ fontSize: 17, fontWeight: 'bold' }}>Penukaran Point</Text>
                <Text allowFontScaling={false} style={{}}>Pindai QR member untuk menambahkan poin dari struk belanja{/*  atau memproses penukaran poin. */}</Text>
              </View>
              <View>
                <View style={{ padding: 5, borderRadius: 5, backgroundColor: '#FFEFD7' }}>
                  <LibIcon name='shield-key-outline' />
                </View>
              </View>
            </View>
          </View>
          <EventButton style={{ margin: 10 }} label='Scan QR Member' backgroundColor='#001B3C' onPress={() => {
            LibNavigation.navigateForResult('component/scanner').then((value) => {
              LibNavigation.navigate('event/point_redemption_input', { qr: value })
              // LibNavigation.navigate('event/point_redemption_exchange', { qr: value })
            })
          }} />
        </TouchableOpacity>

        <Text allowFontScaling={false} style={{ margin: 10, marginBottom: 0, letterSpacing: 1.5, fontWeight: 'bold' }}>RIWAYAT PENUKARAN</Text>

        <View style={{ margin: 10, marginBottom: 0, borderWidth: 1, borderColor: '#C5C7C8', borderRadius: 10, padding: 10, flexDirection: 'row' }}>
          <View>
            <View style={{ padding: 5, borderRadius: 5, backgroundColor: '#B2C8E6' }}>
              <LibIcon name={'file-document'} color='#fff' />
            </View>
          </View>
          <View style={{ flex: 1, marginLeft: 10, alignContent: 'center', justifyContent: 'center' }}>
            <Text allowFontScaling={false} style={{ fontSize: 16 }}>{"Redeem struk belanja"}</Text>
          </View>
          <View style={{ alignContent: 'center', justifyContent: 'center' }}>
            <Text allowFontScaling={false} style={{ fontSize: 22, fontWeight: 'bold', color: LibStyle.colorGreen }}>{"+ 400"}</Text>
          </View>
        </View>

      </ScrollView>
    </View>
  )
}