import React, { FunctionComponent } from 'react';
import {
  ActivityIndicator,
  SafeAreaView,
  StyleSheet,
  Text,
} from 'react-native';
import { ISpinnerStyleProps, IStyledProps } from './types';

export interface ISpinnerProps extends IStyledProps<ISpinnerStyleProps> {
  msgText?: string;
  spinnerSize: number;
}

export const Spinner: FunctionComponent<ISpinnerProps> = ({
  msgText,
  spinnerSize,
  style,
}) => {
  const mergedStyle = { ...defaultStyle, ...style };

  return (
    <SafeAreaView>
      <Text style={mergedStyle.msg}>{msgText}</Text>
      <ActivityIndicator size={spinnerSize} style={mergedStyle.spinner} />
    </SafeAreaView>
  );
};

const defaultStyle = StyleSheet.create({
  msg: {
    marginTop: 15,
    margin: 15,
    color: '#C6C6C6',
    fontSize: 20,
    alignSelf: 'center',
  },
  spinner: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 15,
  },
});