import React from 'react'
import { requireNativeComponent, ViewProps, findNodeHandle } from 'react-native'
import { UIManagerHelper } from './utils';

const NATIVE_COMPONENT_NAME = "CallRemoteView"

interface RemoteViewProps extends ViewProps {
    parentNode?: number,
    participantIdentity: string,
    onPublishedVideoTrack?: () => {}
    onUnPublishedVideoTrack?: () => {}
    onPublishedAudioTrack?: () => {}
    onUnPublishedAudioTrack?: () => {}
    onSubcribeVideoTrack?: () => {}
    onUnSubcribeVideoTrack?: () => {}
    onSubcribeAudioTrack?: () => {}
    onUnSubcribeAudioTrack?: () => {}

    onEnabledVideoTrack?: () => {}
    onDisabledVideoTrack?: () => {}
    onEnabledAudioTrack?: () => {}
    onDisabledAudioTrack?: () => {}

    onFailedToSubscribeVideoTrack?: () => {}
    onFailedToSubscribeAudioTrack?: () => {}
}
const NTiveView = requireNativeComponent(NATIVE_COMPONENT_NAME)
class RemoteView extends React.PureComponent<RemoteViewProps> {

    componentDidMount() {
        this.addRenderer()
    }

    addRenderer = () => {
        UIManagerHelper.dispatchViewMethod(
            this,
            NATIVE_COMPONENT_NAME, "addRenderer",
            [this.props.participantIdentity, findNodeHandle(this.props.parentNode!)])
    }

    onPublishedVideoTrack = () => {
        const { onPublishedVideoTrack } = this.props
        onPublishedVideoTrack && onPublishedVideoTrack()
    }
    onUnPublishedVideoTrack = () => {
        const { onUnPublishedVideoTrack } = this.props
        onUnPublishedVideoTrack && onUnPublishedVideoTrack()
    }
    onPublishedAudioTrack = () => {
        const { onPublishedAudioTrack } = this.props
        onPublishedAudioTrack && onPublishedAudioTrack()
    }
    onUnPublishedAudioTrack = () => {
        const { onUnPublishedAudioTrack } = this.props
        onUnPublishedAudioTrack && onUnPublishedAudioTrack()
    }
    onSubcribeVideoTrack = () => {
        const { onSubcribeVideoTrack } = this.props
        onSubcribeVideoTrack && onSubcribeVideoTrack()
    }
    onUnSubcribeVideoTrack = () => {
        const { onUnSubcribeVideoTrack } = this.props
        onUnSubcribeVideoTrack && onUnSubcribeVideoTrack()
    }
    onSubcribeAudioTrack = () => {
        const { onSubcribeAudioTrack } = this.props
        onSubcribeAudioTrack && onSubcribeAudioTrack()
    }
    onUnSubcribeAudioTrack = () => {
        const { onUnSubcribeAudioTrack } = this.props
        onUnSubcribeAudioTrack && onUnSubcribeAudioTrack()
    }

    onEnabledVideoTrack = () => {
        const { onEnabledVideoTrack } = this.props
        onEnabledVideoTrack && onEnabledVideoTrack()
    }
    onDisabledVideoTrack = () => {
        const { onDisabledVideoTrack } = this.props
        onDisabledVideoTrack && onDisabledVideoTrack()
    }
    onEnabledAudioTrack = () => {
        const { onEnabledAudioTrack } = this.props
        onEnabledAudioTrack && onEnabledAudioTrack()
    }
    onDisabledAudioTrack = () => {
        const { onDisabledAudioTrack } = this.props
        onDisabledAudioTrack && onDisabledAudioTrack()
    }

    onFailedToSubscribeVideoTrack = () => {
        const { onFailedToSubscribeVideoTrack } = this.props
        onFailedToSubscribeVideoTrack && onFailedToSubscribeVideoTrack()
    }
    onFailedToSubscribeAudioTrack = () => {
        const { onFailedToSubscribeAudioTrack } = this.props
        onFailedToSubscribeAudioTrack && onFailedToSubscribeAudioTrack()
    }

    render() {

        return (
            <NTiveView
                {...this.props}
                onPublishedVideoTrack={this.onPublishedVideoTrack}
                onUnPublishedVideoTrack={this.onPublishedVideoTrack}
                //
                onPublishedAudioTrack={this.onPublishedVideoTrack}
                onUnPublishedAudioTrack={this.onPublishedVideoTrack}
                //
                onSubcribeVideoTrack={this.onPublishedVideoTrack}
                onUnSubcribeVideoTrack={this.onPublishedVideoTrack}
                //
                onSubcribeAudioTrack={this.onPublishedVideoTrack}
                onUnSubcribeAudioTrack={this.onPublishedVideoTrack}
                //
                onEnabledVideoTrack={this.onPublishedVideoTrack}
                onDisabledVideoTrack={this.onPublishedVideoTrack}
                //
                onEnabledAudioTrack={this.onPublishedVideoTrack}
                onDisabledAudioTrack={this.onPublishedVideoTrack}
                //
                onFailedToSubscribeVideoTrack={this.onPublishedVideoTrack}
                onFailedToSubscribeAudioTrack={this.onPublishedVideoTrack}
            />
        )
    }
}

export default RemoteView