import * as React from 'react';
import { withRouter } from 'react-router-dom';

// const BrowserRouterComponent = <BrowserRouter>
//     <Switch>
//         <Route path="/AdminPanel" component={AdminPanel} />
//         <Route path="/user" component={UserPanel} />
//         <Route exact path="/" component={App} />
//         <Route exact path="/example" component={Example} />
//         <Route path="/404" component={error404} />
//         <Redirect to="/404" />
//     </Switch>
// </BrowserRouter>;

class Comp extends React.Component<any>{

    public render() {
        return (
            <div>
                <h1>id: {this.props.id}</h1>
                <h1>old: {this.props.old}</h1>
                <h1>search:{this.props.search}</h1>
                <h1>key1:{this.props.key1}</h1>
                <h1>key2:{this.props.key2}</h1>
                <h1>key3:{this.props.key3}</h1>

            </div>
        );
    }
}


class Example extends React.Component<any>{

     queryStringToObject = (queryString:any) => {
        let pairs = queryString.slice(1).split('&');
        const result: any = {};
        pairs.forEach((pair: string) => {
            const pairA: string[] = pair.split('=');
            result[pairA[0]] = decodeURIComponent(pairA[1] || '');
        });
        return result;
    }

    public render() {
        let pathsProps;

        if(this.props.location.search !== ''){
            console.log(this.props.location.search);
            pathsProps = this.queryStringToObject(this.props.location.search);
            console.log('myObjest',pathsProps);
        }else{
             pathsProps = this.props.match.params;
            console.log(this.props.match.params);
        }
        return (
           <Comp {...pathsProps}/>
        );
    }
}
export default withRouter(Example);