import { StyleSheet, View } from "react-native";
import LabeledIconButton from "./ui/LabeledIconButton";

interface VoiceChatControlPanelProps {
    isMuted: boolean,
    isPossiblyConnecting: boolean,
    isConnected: boolean,
    toggleMute: () => void,
    startCall: () => void,
    endCall: () => void,
}

/**
 * Web Voice Chat Control Panel Component
 */
export default function VoiceChatControlPanel({ 
    isMuted, 
    isPossiblyConnecting = false,
    isConnected = false,
    toggleMute, 
    startCall, 
    endCall, 
}: VoiceChatControlPanelProps) {
    return (
        <View style={styles.controlsContainer}>
            <LabeledIconButton 
                label="Mute"
                icon={isMuted ? 'mic-off' : 'mic'}
                iconColor={isMuted ? 'tomato' : 'white'}
                backgroundColor={isMuted ? '#372327' : '#37373B'}
                onPress={toggleMute}
            />

            <LabeledIconButton 
                label="Start"
                icon="videocam"
                iconColor="white"
                backgroundColor='limegreen'
                onPress={startCall}
                disabled={!isPossiblyConnecting || isConnected}
            />

            <LabeledIconButton 
                label="End"
                icon="call"
                iconColor="white"
                backgroundColor="orangered"
                onPress={endCall}
                disabled={!isConnected}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    controlsContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 20,
        paddingVertical: 30,
        gap: 20,
    },
});