import React, { useState } from 'react';
import {
  ImageSourcePropType
} from 'react-native';
import { IContact, Presence } from '../../store/contacts/types';
import { CallDialog } from '../callDialog';
import {
  IWebRtcCallActionProps,
} from '../callDialog/CallDialogContainer';
import { ImageButton } from './ImageButton';
import { IImageButtonStyleProps, IStyledProps } from './types';

export interface ICallButtonProps extends IStyledProps<IImageButtonStyleProps> {
  imageSource: ImageSourcePropType;
  contact: IContact;
  webRtcActions: IWebRtcCallActionProps[];
  openDialog?: () => void;
  showDialog?: boolean;
  pbxEnabled?: boolean;
  webrtcEnabled: boolean;
}
export const CallButton: React.FunctionComponent<ICallButtonProps> = ({
  style,
  imageSource,
  webRtcActions,
  contact,
  pbxEnabled,
  webrtcEnabled,
}) => {
  const [showDialog, setShowDialog] = useState<boolean>(false);
  const presence = contact.presence as keyof typeof Presence;
  const openDialog = () => {
    setShowDialog(!showDialog);
  };
  const canShowCallBtn = Presence[presence] === Presence.online || Presence[presence] === Presence.away || Presence[presence] === Presence.mobile_online;
  if (canShowCallBtn) {
    return (
      <>
        <ImageButton imageSource={imageSource} style={style } onPress={openDialog} />
        <CallDialog
          contact={contact}
          webRtcActions={webRtcActions}
          showDialog={showDialog}
          openDialog={openDialog}
          pbxEnabled={pbxEnabled}
          webrtcEnabled={webrtcEnabled}
        />
      </>
    )
  }
  else {
    return null;
  }
};