import React from 'react';
import {
  Image,
  ImageStyle,
  Text,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import voicemail from '../../resources/images/voicemail.png';
import { Strings } from '../../resources/localization/Strings';
import { IStyledProps } from '../common/types';
import { Portal } from 'react-native-paper';

interface IVoiceMailsViewProps extends IStyledProps<IVoiceMailsViewStyleProps> {
  voiceMailNumber: string;
  voiceMailCounter: number;
  callVoiceMail: () => void;
}
interface IVoiceMailsViewStyleProps {
  iconContainer?: ViewStyle;
  icon?: ImageStyle;
  container?: ViewStyle;
}
export const VoiceMailsView: React.FunctionComponent<IVoiceMailsViewProps> = ({
  style,
  voiceMailCounter,
  voiceMailNumber,
  callVoiceMail,
}) => {
  const mergedStyle = { ...defaultStyle, ...style };
  const onCallVoiceMail = () => {
    callVoiceMail();
  };
  const displayVoiceMailInfo = () => {
    if (voiceMailNumber === null || voiceMailNumber === '') {
      return <Text>{Strings.noVoicemailAccount}</Text>;
    } else if (voiceMailCounter === 0) {
      return <Text>{Strings.noVoicemails}</Text>;
    } else {
      return (
        <Text>
          {Strings.formatString(
            Strings.voicemailNumberSeverals,
            voiceMailCounter
          )}
        </Text>
      );
    }
  };
  return (
    <View style={defaultStyle.container}>
    <Portal>
      <View style={{ alignItems: 'center' }}>
        {displayVoiceMailInfo()}
      </View>
    </Portal>
    {voiceMailNumber !== null && (
      <TouchableOpacity
        style={mergedStyle.iconContainer}
        onPress={onCallVoiceMail}
      >
        <Image source={voicemail} style={mergedStyle.icon} />
      </TouchableOpacity>
    )}
  </View>
  );
};

const defaultStyle: IVoiceMailsViewStyleProps = {
  container: {
    justifyContent: 'center',
    display: 'flex',
    flex: 1,
    paddingStart: 20
  },
  iconContainer: {
    position: 'absolute',
    bottom: 120,
    end: 20,
    width: 65,
    height: 65,
    backgroundColor: '#0086CF',
    borderRadius: 40,
    paddingTop: 10,
    alignSelf: 'flex-end',
  },
  icon: {
    width: 40,
    height: 40,
    alignSelf: 'center',
  },
};