import React, { FunctionComponent } from 'react';
import {
    StyleSheet,
    TextStyle,
    View,
    ViewStyle,
} from 'react-native';
import { CallState } from '../../../store/webrtc/types';
import { Logger } from '../../../utils/Log';
import { IStyledProps } from '../../common/types';
import { IConference } from '../../../store/conference/types';
import { LoudspeakerButton, MicButton, SwitchCameraButton } from '../CallActionButtons';
import { AnswerConfCallButton, HideConferenceCallViewButton, LockConfButton, AddVideoToConfButton } from './ConfCallActionButtons';
import { EndConferenceCallButton } from './ConfCallActionButtons/EndConfCallButton/EndConfCallButtonContainer';
import { useAppDispatch } from '../../../store/hooks';

const logger = new Logger('ConferenceCallActions');
export interface IConferenceActionsStyleProps {
    textStyle?: TextStyle;
    container?: ViewStyle;
}
interface IProps extends IStyledProps<IConferenceActionsStyleProps> {
    call: IConference;
    renderIncomingConferenceActions?: (conferenceCall: IConference) => React.ReactNode;
    renderOutgoingConferenceActions?: (conferenceCall: IConference) => React.ReactNode;
    renderActiveConferenceActions?: (conferenceCall: IConference) => React.ReactNode;
}

export const ConferenceActionsView: FunctionComponent<IProps> = ({
    call,
    style,
    renderIncomingConferenceActions,
    renderOutgoingConferenceActions,
    renderActiveConferenceActions
}) => {
    const mergedStyle = { ...defaultStyle, ...style };
    const { callState, callPeer, isLocalVideoEnabled } = call;
    const dispatch = useAppDispatch();

    const micButtonView = <MicButton />;
    const loudspeakerButton = <LoudspeakerButton />;
    const answerAudioCallButton = <AnswerConfCallButton call={call} />
    const switchCameraButton = <SwitchCameraButton />
    const lockConferenceButton = callPeer.isMyUserModerator && <LockConfButton call={call} />
    const hideConferenceCallViewButton = <HideConferenceCallViewButton call={call} />
    const addVideoButtonView = <AddVideoToConfButton call={call} />
    const endCallButton = <EndConferenceCallButton call={call} />
    const switchCameraButtonView = isLocalVideoEnabled && switchCameraButton;

    if (!call) {
        logger.error('Null call or null contact received');
        return null;
    }
    const incomingConferenceActions = () => {
        if (callState === CallState.RINGING_INCOMING) {
            if (renderIncomingConferenceActions) {
                return renderIncomingConferenceActions(call);
            }
            else {
                return (
                    <>
                        {answerAudioCallButton}
                        {endCallButton}
                    </>
                );
            }
        }
        else { return null }
    }
    const outgoingConferenceActions = () => {
        if (callState === CallState.RINGING_OUTGOING) {
            if (renderOutgoingConferenceActions) {
                return renderOutgoingConferenceActions(call);
            }
            else {
                return (
                    <>
                        {micButtonView}
                        {loudspeakerButton}
                        {endCallButton}
                    </>
                );
            }
        }
        else { return null }
    }

    const activeConferenceActions = () => {
        if (callState === CallState.ACTIVE) {
            if (renderActiveConferenceActions) {
                return renderActiveConferenceActions(call);
            }
            else {
                return (
                    <>
                        {micButtonView}
                        {switchCameraButtonView}
                        {hideConferenceCallViewButton}
                        {addVideoButtonView}
                        {loudspeakerButton}
                        {lockConferenceButton}
                        {endCallButton}
                    </>
                );
            }
        }
        else { return null }
    }

    return (
        <View style={mergedStyle.container}>
            {incomingConferenceActions()}
            {outgoingConferenceActions()}
            {activeConferenceActions()}
        </View>
    );
};

const defaultStyle: IConferenceActionsStyleProps = StyleSheet.create({
    container: {
        display:'flex',
        flexDirection: 'row',
        alignContent: 'center',
        justifyContent: 'space-between',
        },
    textStyle: {
        position: 'absolute',
        top: 20,
        fontSize: 20,
        color: '#ffffff',
        alignSelf: 'center',
        marginLeft: 50,
    }
});