import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { BrowserRouter, Route as BasicRoute, Redirect, Switch } from 'react-router-dom';

import WrapperFrame from './Frame';
import ErrorBoundary from './Error/ErrorBoundary';

import combinedScreens from './Screens';

import { getConf } from './configuration.js';

const Route = ({ component: Component, ...props }) => (
    <BasicRoute
        {...props}
        render={() => <Component {...props} query={new URLSearchParams(props.location.search)} />}
    />
);

Route.propTypes = {
    component: PropTypes.elementType,
    location: PropTypes.object,
};

const NoMatch = () => <div>No routing found for the specified path.</div>;

export default class Routing extends Component {
    constructor(props) {
        super(props);

        this.basePath = getConf('routingBasePath', '');
    }

    render() {
        return (
            <BrowserRouter basename={this.basePath}>
                <ErrorBoundary>
                    <WrapperFrame>
                        <Switch>
                            <Route exact path="/" component={combinedScreens.ItemOverview} />

                            <Route exact path="/items" component={combinedScreens.ItemOverview} />

                            <Redirect from="blank" to={this.basePath} />

                            <Route path="/identifier::identifier" component={combinedScreens.Configurator} />
                            <Route path="/code::code" component={combinedScreens.Configurator} />

                            <Route
                                path="/widget/identifier::identifier"
                                component={combinedScreens.CalculationWidget}
                            />
                            <Route path="/widget/code::code" component={combinedScreens.CalculationWidget} />

                            <Route
                                path="/designer-preview-widget"
                                component={combinedScreens.DesignerProductPreview}
                            />

                            <Route component={NoMatch} />
                        </Switch>
                    </WrapperFrame>
                </ErrorBoundary>
            </BrowserRouter>
        );
    }
}
