import React, { FunctionComponent, ReactNode } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { IPbxCall } from '../../../store/pbx/types';
import { CallState } from '../../../store/webrtc/types';
import { IImageHolderStyle, ImageHolder } from '../../common/ImageHolder';
import { DialPad } from '../../dialPad';

interface IProps {
    pbxCall: IPbxCall;
    callActionsComponent?: ReactNode;
    showDialPad: boolean;
    toggleKeyPad: () => void;
}

export const PBXCallView: FunctionComponent<IProps> = (props: IProps) => {

    const { callState } = props.pbxCall;
    const isCallActive = callState === CallState.ACTIVE;
    const profilePictureView = !isCallActive && (
        <ImageHolder url={props.pbxCall.callPeer.imageURL} style={participantImageStyle} name={props.pbxCall.callPeer.name} />
    );
    const callStateView = !isCallActive && (
        <Text style={defaultStyle.textStyle}>{props.pbxCall.callState}</Text>
    );
    const hideDialPad = () => {
        if (props.showDialPad) {
            props.toggleKeyPad();
        }
    };
    return (
        <View >
                <TouchableOpacity onPress={hideDialPad} activeOpacity={1}>
                    {profilePictureView}
                    {callStateView}
                </TouchableOpacity>
             <View style={defaultStyle.callAction}>{props.callActionsComponent}</View>
                {props.showDialPad && (
                    <View style={defaultStyle.dialPad}>
                        <DialPad showCallButton={false} currentCall={props.pbxCall} />
                    </View>
                )}
        </View>

    );
}
const participantImageStyle: IImageHolderStyle = {
    thumbnail: { top: 100, alignSelf: 'center', width: 140, height: 140, borderRadius: 100 },
    thumbnailContainer: { position: 'absolute', top: 100, alignSelf: 'center', width: 140, height: 140, borderWidth: 1, borderColor: 'rgba(0,0,0,0.2)', borderRadius: 100, justifyContent: 'center', alignItems: 'center', backgroundColor: '#cf0071' },
    imageTextStyle: { fontSize: 50, }
}
const defaultStyle = StyleSheet.create({
    headerColor: { backgroundColor: '#0086CF', },
    textStyle: { position: 'absolute', top: 20, fontSize: 20, color: '#ffffff', alignSelf: 'center', marginBottom: 20, },
    shareVideo: { width: '100%', height: '100%', position: 'absolute', top: -50, alignSelf: 'center', },
    headerTitle: { textAlign: 'center', alignSelf: 'center', fontSize: 16, color: 'white', fontWeight: 'bold' },
    titleContainer: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' },
    dialPad: {
        position: 'absolute',
        backgroundColor: 'white',
        bottom: 0,
        left: 0,
        width: '100%',
        height: 400,
        zIndex: 100,
    },
    callAction: {
        position: 'absolute',
        bottom: 10,
        left: 0,
        width: '100%',
    },
});