import React from 'react';
import incomingCall from '../../resources/images/incomingCall.png';
import missedIncomingCall from '../../resources/images/missedIncomingCall.png';
import missedOutgoingCall from '../../resources/images/missedOutgoingCall.png';
import outgoingCall from '../../resources/images/outgoingCall.png';
import { CallLogState } from '../../store/callLogs/types';
import { ImageButton } from '../common/ImageButton';
import { IImageButtonStyleProps } from '../common/types';

interface IProps {
  callState: CallLogState;
  style?: IImageButtonStyleProps;
}

export const CallStateImageView: React.FunctionComponent<IProps> = ({
  callState,
  style,
}) => {
  const imageSourceMap = {
    'Missed Incoming': missedIncomingCall,
    'Missed Outgoing': missedOutgoingCall,
    'Answered Incoming': incomingCall,
    'Answered Outgoing': outgoingCall,
  };

  const imageSource = imageSourceMap[callState];
  const iconStyle = {
    ...defaultStyle.image,
    ...style,
  } as IImageButtonStyleProps;
  return <ImageButton style={iconStyle} imageSource={imageSource} />;
};
const defaultStyle: IImageButtonStyleProps = {
  image: {
    width: 22,
    height: 22,
  },
};