import React, { FunctionComponent } from 'react';
import { EndConfCallButtonView } from './EndConfCallButtonView';
import { CallState } from '../../../../../store/webrtc/types';
import { IConference } from '../../../../../store/conference/types';
import { conferenceService } from '../../../../../services/calls/conference';
import { endConference } from '../../../../../store/conference/conferenceSlice';
import { IImageButtonStyleProps, IStyledProps } from '../../../../common/types';
import { ImageSourcePropType, TextStyle, ViewStyle } from 'react-native';
import { ImageButton } from '../../../../common/ImageButton';
import { useAppDispatch } from '../../../../../store/hooks';
export interface IEndConfCallBtnProps extends IStyledProps<IImageButtonStyleProps> {
    call: IConference;
    imageSource?: ImageSourcePropType;
    renderOnPress?: (call: IConference) => void;
}
export interface IIconStyleProps {
    icon?: TextStyle,
    container?: ViewStyle
}

export const EndConferenceCallButton: FunctionComponent<IEndConfCallBtnProps> = ({
    call,
    imageSource,
    style,
    renderOnPress
}) => {
    const { callState, callPeer } = call;
    const dispatch = useAppDispatch();
    const endCall = () => {
        if (renderOnPress) {
            renderOnPress(call);
        } else {
            callState === CallState.RINGING_INCOMING ? conferenceService.declineCall(callPeer.id) : dispatch(endConference(callPeer.id));
        }
    }

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