import React from 'react';
import {Pressable, Text, TextStyle, View, ViewStyle } from 'react-native';
import { Dialog, Portal, Button } from 'react-native-paper';
import Icon from 'react-native-vector-icons/Ionicons';
import { Strings } from '../../resources/localization/Strings';
import {
  IContact,
  IPhoneNumber,
  PhoneType,
  Presence,
} from '../../store/contacts/types';
import { Logger } from '../../utils/Log';
import { IStyledProps } from '../common/types';
import { IWebRtcCallActionProps } from './CallDialogContainer';

const logger = new Logger('CallDialogView');

interface IProps extends IStyledProps<ICallDialogStyleProps> {
  contact: IContact;
  webRtcActions: IWebRtcCallActionProps[];
  openDialog: () => void;
  showDialog: boolean;
  callPBX: (phoneNumber: string) => void;
  startWebRtcCall: (contactId: string, video: boolean, subject: string) => void;
  pbxEnabled: boolean;
  webrtcEnabled: boolean;
}
interface ICallDialogStyleProps {
  dialogContent?: ViewStyle;
  callIcon?: any;
  infoContainer?: ViewStyle;
  text?: TextStyle;
  grayText?: TextStyle;
  blueText?: TextStyle;
  dialogTitle?: TextStyle;
  dialogInnerContent?: ViewStyle;
  actionRow?: ViewStyle;
  closeButton?: any;
}
export const CallDialogView: React.FunctionComponent<IProps> = ({
  contact,
  style,
  openDialog,
  showDialog,
  webRtcActions,
  callPBX,
  startWebRtcCall,
  pbxEnabled,
  webrtcEnabled,
}) => {
  const mergedStyle = { ...defaultStyle, ...style };
  const presence = contact.presence as keyof typeof Presence;
  const renderPhonesList = (item: IPhoneNumber) => {
    if (!item.value) {
      return null;
    }
    return (
      <Button
        mode="text"
        onPress={startPbxCall(item.value)}
        key={item.value}
        style={mergedStyle.infoContainer}
      >
        <Icon name="call" style={mergedStyle.callIcon} />
        <View style={{ marginLeft: 8 }}>
          <Text style={mergedStyle.blueText}>
            {Strings.phoneStrings[item.type as keyof typeof PhoneType]}
          </Text>
          <Text style={mergedStyle.grayText}>{item.value}</Text>
        </View>
      </Button>
    );
  };

  const startCall = (callType: string) => () => {
    openDialog();
    startWebRtcCall(contact.jId, callType === 'video', '');
  };

  const startPbxCall = (phoneNumber: string) => () => {
    openDialog();
    callPBX(phoneNumber);
  };

  const isWebRTCCallAllowed = () => {
    if (!contact) {
      logger.info('WebRTC Call is not Allowed');
      return false;
    }
    if (
      contact.isRoster &&
      [
        Presence.offline,
        Presence.DoNotDisturb,
        Presence.DND_presentation,
        Presence.busy_audio,
        Presence.busy_video,
        Presence.busy_phone,
      ].includes(Presence[presence])
    ) {
      logger.info('WebRTC Call is not Allowed');
      return false;
    }
    if (!contact.isRainbowUser) {
      logger.info('WebRTC Call is not Allowed');
      return false;
    }
    logger.info('WebRTC Call is Allowed');
    return true;
  };

  return (
     <Portal>
    <Dialog
      visible={showDialog}
      onDismiss={openDialog}
      style={mergedStyle.dialogContent}
    >
      <Dialog.Title style={mergedStyle.dialogTitle}>{contact.name}</Dialog.Title>
      <Dialog.Content >
        {webrtcEnabled && isWebRTCCallAllowed() && webRtcActions.map((action: IWebRtcCallActionProps) => {
          const actionName = action.actionName as 'video' | 'audio';
          return (
            <Pressable key={actionName} style={mergedStyle.actionRow} onPress={startCall(action.callType)}>
              <Icon name={action.iconName} style={mergedStyle.callIcon} onPress={startCall(action.callType)} />
              <Text style={mergedStyle.grayText}>{Strings[actionName]}</Text>
            </Pressable>
          );
        })}
        {pbxEnabled && contact.phoneNumbers.map(renderPhonesList)}
      </Dialog.Content>
      <Button onPress={openDialog} mode="text" style={mergedStyle.closeButton}>
        {Strings.close}
      </Button>
    </Dialog>
  </Portal>
);
};

const defaultStyle: ICallDialogStyleProps = {
  actionRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: '70%',
    marginVertical: 10,
  },
  callIcon: {
    fontSize: 30,
    color: '#0086CF',
    marginRight: 10,
  },
  dialogTitle: {
    textAlign: 'center',
    fontSize: 18,
    fontWeight: 'bold',
  },
  grayText: {
    color: 'gray',
    fontSize: 16,
  },
  closeButton: {
    color: '#0086CF',
    marginTop: 20,
    textAlign: 'center',
    fontSize: 18,
    fontWeight: 'bold',
  },
  infoContainer: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginVertical: 8,
  },
  text: {
    color: '#0086CF',
    marginTop: 20,
    fontSize: 18,
    fontWeight: 'bold',
  },

  blueText: {
    color: '#0086CF',
  },
};