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

interface IProps {
  isLoading: boolean;
}
export default function Loading({ isLoading }: IProps) {
  return (
    <Modal transparent={true} animationType={'none'} visible={isLoading}>
      <View style={styles.modalBackground}>
        <View style={styles.activityIndicatorWrapper}>
          <View
            style={{
              backgroundColor: '#FDFDFD',
              borderRadius: 6,
              paddingVertical: 16,
              alignItems: 'center',
              paddingHorizontal: 24,
            }}
          >
            {/* <Lottie
              style={{ marginBottom: 10 }}
              source={require('./loading2.json')}
              autoPlay
              loop
            /> */}
            <ActivityIndicator size={'large'} color={color.primary} />
            <View>
              <MText
                style={[
                  commonStyles.textNormalBold,
                  { textAlign: 'center', marginTop: 10 },
                ]}
              >
                Đang xử lý dữ liệu ...
              </MText>
            </View>
          </View>
        </View>
      </View>
    </Modal>
  );
}
const styles = StyleSheet.create({
  modalBackground: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'space-around',
    backgroundColor: '#00000040',
  },
  activityIndicatorWrapper: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
});
