import React, { FunctionComponent } from 'react';
import { EndPbxCallButtonView } from './EndCallButtonView';
import { IStyledProps } from '../../../../common/types';
import { TextStyle, ViewStyle } from 'react-native';
import { endCall } from '../../../../../store/pbx/pbxSlice';
import { IPbxCall } from '../../../../../store/pbx/types';
import { useAppDispatch } from '../../../../../store/hooks';

interface IProps extends IStyledProps<{ icon?: TextStyle, container?: ViewStyle }> {
    call: IPbxCall
    iconCallName?: string
}

export const EndPbxCallButton: FunctionComponent<IProps> = ({
    call,
    iconCallName,
    style,
}) => {
    const dispatch = useAppDispatch();
    const onEndCall = () => {
        dispatch(endCall(call.callId));
    }
    return <EndPbxCallButtonView onPress={onEndCall} callIconName={iconCallName} style={style} />;
};