import * as React from 'react';
import PropTypes from 'prop-types';

import { connect } from 'react-redux';

import { DefaultCanvasProvider } from 'App/Shared/Providers/DefaultCanvasProvider';

import CalculationWidget from './Containers/CalculationWidget';
import Error from 'App/Shared/Containers/Error';
import Confirm from './Containers/Confirm';
import DefaultThemeProvider from './ThemeProvider';

import './Components/Styles.scss';

/**
 * Main Screen of the configurator
 */
const CalculationWidgetScreen = props => {
    const {
        renderError,
        renderConfirm,
        renderWidget,

        // Components
        CanvasProvider,
        ThemeProvider,
    } = props;

    return (
        <CanvasProvider>
            <ThemeProvider>
                {renderWidget()}
                {renderError()}
                {renderConfirm()}
            </ThemeProvider>
        </CanvasProvider>
    );
};

CalculationWidgetScreen.propTypes = {
    // Render props
    renderWidget: PropTypes.func,

    renderError: PropTypes.func,
    renderConfirm: PropTypes.func,

    // Components
    CanvasProvider: PropTypes.elementType.isRequired,
    ThemeProvider: PropTypes.elementType.isRequired,
};

CalculationWidgetScreen.defaultProps = {
    // Render props
    renderWidget: () => <CalculationWidget />,
    renderError: () => <Error />,
    renderConfirm: () => <Confirm />,

    // Components
    CanvasProvider: DefaultCanvasProvider,
    ThemeProvider: DefaultThemeProvider,
};

// Export the non connected Screen
export default CalculationWidgetScreen;

const mapStateToProps = state => {
    const selectedDesignArea = state.designArea.selectedDesignArea;

    return {
        selectedDesignArea,
    };
};

export const ConnectedCalculationWidgetScreen = connect(mapStateToProps)(CalculationWidgetScreen);
