import {Link, Route, Switch} from 'react-router-dom';
import Products from './products/products';
import React, {useContext, useState} from 'react';
import ShoppingBasket from './shoppingBasket/shoppingBasket';
import ProductDetails from './products/details/productDetails';

export const ViewContext = React.createContext({adminView: false, toggleAdminView: undefined});

const Navbar = () => {
    const {adminView, toggleAdminView} = useContext(ViewContext);

    return <div className={'navbar'}>
        <ul>
            <li><Link to='/products'>Products</Link></li>
            <li><Link to='/basket'>Shopping Basket</Link></li>
            <li>
                <label>Show admin view</label>
                <input type="checkbox" checked={adminView} onChange={toggleAdminView}/>
            </li>
        </ul>
    </div>
}

const Main = () => {
    return <Switch>
        <Route path={'/products/:id'} component={ProductDetails}/>
        <Route path={'/products'} component={Products}/>
        <Route path={'/basket'} component={ShoppingBasket}/>
    </Switch>
}

const App = () => {
    const [adminView, setAdminView] = useState(false);

    const toggleAdminView = () => {
        setAdminView(adminView => !adminView);
    }

    return <div>
        <ViewContext.Provider value={{adminView, toggleAdminView}}>
            <Navbar/>
            <div className='container'>
                <Main/>
            </div>
        </ViewContext.Provider>
    </div>
}

export default App;
