import React, { FunctionComponent } from 'react';
import { Button, Portal } from 'react-native-paper';

import {
  ActivityIndicator,
  StyleSheet,
  Text,
  TextStyle,
  View,
  ViewStyle,
} from 'react-native';
import { Strings } from '../../resources/localization/Strings';
import { IStyledProps } from './types';
interface IProps extends IStyledProps<IPannerStyleProps> {
  title?: string;
  message?: string;
  cancel?: () => void;
  showDialog?: boolean;
}

export interface IPannerStyleProps {
  container?: ViewStyle;
  messageText?: TextStyle;
  titleText?: TextStyle;
}

export const InProgressDialog: FunctionComponent<IProps> = ({
  title,
  message,
  cancel,
  style,
  showDialog,
}) => {
  const mergedStyle = { ...defaultStyles, ...style };
  const cancelButton = (
    <Button mode="contained" style={mergedStyle.cancelButton} onPress={cancel}>
      {Strings.cancel}
    </Button>
  );

  return showDialog ? (
    <Portal>
      <View style={mergedStyle.container}>
        <View style={mergedStyle.dialog}>
          <Text style={mergedStyle.titleText}>{title}</Text>

          <Text style={mergedStyle.messageText}>{message}</Text>
          <ActivityIndicator color="#0086CF" />
          {cancel ? cancelButton : null}
        </View>
      </View>
    </Portal>
  ) : null;
};

const defaultStyles = StyleSheet.create({
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
    alignSelf: 'center',
  },
  messageText: {
    marginTop: 5,
    alignSelf: 'auto',
    fontSize: 20,
    color: 'gray',
  },
  cancelButton: {
    marginTop: 3,
    alignSelf: 'center',
    backgroundColor: '#0086CF',
  },
  dialog: {
    backgroundColor: 'white',
    margin: 10,
    marginStart: 20,
    marginEnd: 20,
    padding: 10,
    alignContent: 'center',
    borderRadius: 5,
  },
  outside: {
    flex: 1,
    width: '100%',
  },
  container: {
    zIndex: 5,
    position: 'absolute',
    flex: 1,
    alignSelf: 'center',
    justifyContent: 'center',
    backgroundColor: '#000000AA',
    width: '100%',
    height: '100%',
  },
});