import React, { FunctionComponent } from 'react';
import { joinConference } from '../../../../../store/conference/conferenceSlice';
import { AnswerConfCallButtonView } from './AnswerConfCallButtonView';
import { IConference } from '../../../../../store/conference/types';
import { IImageButtonStyleProps, IStyledProps } from '../../../../common/types';
import { ImageSourcePropType } from 'react-native';
import { ImageButton } from '../../../../common/ImageButton';
import { useAppDispatch } from '../../../../../store/hooks';
export interface IAnswerConfBtnProps extends IStyledProps<IImageButtonStyleProps> {
    call: IConference
    imageSource?: ImageSourcePropType;
    renderOnPress?: (call: IConference) => void;
}

export const AnswerConfCallButton: FunctionComponent<IAnswerConfBtnProps> = ({ call, imageSource, renderOnPress, style }) => {
    const dispatch = useAppDispatch();
    const answerIncomingConfCall = () => {
        if (renderOnPress)
            renderOnPress(call);
        else
            dispatch(joinConference(call.callPeer.id));
    };

    if (imageSource)
        return <ImageButton imageSource={imageSource} onPress={answerIncomingConfCall} style={style} />;
    else {
        return <AnswerConfCallButtonView onPress={answerIncomingConfCall} style={style} />;
    }
};