//@ts-nocheck
import React from 'react';
import { Dimensions, Modal, StyleSheet, View } from 'react-native';
import { LoadingCimb, LoadingTima } from '../assets/icons';
import { commonStyles } from '../screens/CommonStyles';
import { MText } from './MText';
import Lottie from 'lottie-react-native';
import LinearGradient from 'react-native-linear-gradient';

interface IProps {
  isLoading: boolean;
}
export default function CIMBLoading({ isLoading }: IProps) {
  return (
    <Modal transparent={true} animationType={'none'} visible={isLoading}>
      <View style={styles.modalBackground}>
        <View style={styles.activityIndicatorWrapper}>
          <LinearGradient
            colors={['#FDFDFD', '#FDFDFD']}
            style={{
              width: Dimensions.get('window').width - 50,
              borderRadius: 6,
              paddingVertical: 24,
              alignItems: 'center',
            }}
          >
            <View
              style={{
                width: '50%',
                flexDirection: 'row',
                marginBottom: 24,
                justifyContent: 'space-between',
              }}
            >
              <View>
                <LoadingTima />
              </View>
              <Lottie source={require('./loading.json')} autoPlay loop />
              <LoadingCimb />
            </View>
            <MText
              style={[commonStyles.textNormalBold, { textAlign: 'center' }]}
            >
              Đang chuyển tới{'\n'}nền tảng ngân hàng CIMB
            </MText>
          </LinearGradient>
        </View>
      </View>
    </Modal>
  );
}
const styles = StyleSheet.create({
  modalBackground: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'space-around',
    backgroundColor: '#00000040',
  },
  activityIndicatorWrapper: {
    // backgroundColor: "#FFFFFF",
    // height: 50,
    // width: 50,
    // borderRadius: 10,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
});
