import React, { Component, ReactNode } from 'react';
import Empty from '../Empty';

interface SceneProps {
    renderChild(showError: Function): ReactNode;
    renderHeader(): void;
}

interface SceneState {
    hasError: boolean;
    message: string;
    type?: string;
}

class Scene extends Component<SceneProps, SceneState> {
    constructor(props: SceneProps) {
        super(props);
        this.state = { hasError: false, message: '' };
        this.showError = this.showError.bind(this);
    }

    componentDidCatch(message: Error) {
        // Display fallback UI
        this.setState({ hasError: true, message: message.toString() });
        // You can also log the error to an error reporting service
    }

    showError(message: string, type: string) {
        this.setState({ message, type, hasError: true });
    }

    render() {
        if (this.state.hasError) {
            let message = this.state.message;
            // You can render any custom fallback UI
            return <Empty.List text={message} />;
        }

        const renderChild = this.props.renderChild;
        return (
            <React.Fragment>
                {this.props.renderHeader()}
                {renderChild(this.showError)}
            </React.Fragment>
        );
    }
}

export default Scene;