import React, {useState, useEffect }  from 'react';
import logo from './logo.svg';
import './App.css';
import {Provider, connect}   from 'react-redux';
import {actionSearch } from './actions';
import store from './reducers'
//import { CounterView, Counter, ConnectedBIGTABLO, ConnectedCounter, ConnectedBigButton } from './components'
import {Router, Route, Link, Switch, Redirect} from 'react-router-dom';
import createHistory from "history/createBrowserHistory";

import {actionCategories, actionLogin, actionCategory} from './actions'


const history = createHistory()

const PageMain = () =>
<>
    <h1>Главная магазина</h1>
</>

const LoginForm = ({onLogin}) => {
    const [login, setLogin] = useState("")
    const [password, setPassword] = useState("")
    return (
            <div>
                <input type='text' value={login} onChange={e => setLogin(e.target.value)} />
                <input type='password' value={password} onChange={e => setPassword(e.target.value)} />
                <button onClick={() => onLogin(login, password)}>Login</button>
            </div>
        )
}
const CLoginForm = connect(null, {onLogin: actionLogin})(LoginForm)


store.dispatch(actionCategories())

const CategoryMenuItem = ({category:{_id, name}={_id: 'NOID', name: "NO CATEGORY"}}) =>
<li>
    <Link to={`/category/${_id}`}>{name}</Link>
</li>

const CategoryMenu = ({categories=
[
      { "_id": "5dc45acf5df9d670df48cc48", "name": "TV's" },
      { "_id": "5dc49f4d5df9d670df48cc64", "name": "Airconditions" },
      { "_id": "5dc458985df9d670df48cc47", "name": "Smartphones" },
    ]
}) =>
<aside style={{float: 'left'}}>
    <ul>
        {categories && 
            categories.map(category => <CategoryMenuItem category={category}/>)}
    </ul>
</aside>

const CCategoryMenu = connect(state => ({categories: state.promise.categories && 
                                                     state.promise.categories.payload && 
                                                     state.promise.categories.payload.CategoryFind}))(CategoryMenu)

const defaultGoods = [
        {
          "_id": "5dcaac1fe87d153c543bcef4",
          "name": "Гречневая лапша с овощами и курицей"
        },
        {
          "_id": "5dcabb776d09c45440d14cf0",
          "name": "Пшеничная лапша с овощами и курицей"
        },
        {
          "_id": "5dcabc636d09c45440d14cf1",
          "name": "Пшеничная лапша с овощами и свининой"
        }]

const GoodCard = ({_id, name}) =>
<li>
    <h2>{name}</h2>
</li>

const GoodList = ({goods=defaultGoods}) =>
<ul>
    {goods && goods.map(good => <GoodCard key={good._id} {...good}/>)}
</ul>

const CGoodList = connect(
state => ({goods: state.promise.category && 
             state.promise.category.payload && 
             state.promise.category.payload.CategoryFindOne && 
             state.promise.category.payload.CategoryFindOne.goods})
)(GoodList)


const PageCategory = ({match:{params:{_id}}, getData}) => {
    useEffect(() => (getData(_id), undefined), [_id])
    return (
        <>
            <h1>КАТЕГОРИЯ {_id}</h1>
            <CGoodList />
        </>
    )
}

const CPageCategory = connect(null, {getData: actionCategory})(PageCategory)




export default () => {
    return (
        <Provider store={store}>
            <Router history={history}>
                <CCategoryMenu/>
                <main>
                    <Route path='/' component={PageMain} exact />
                    <Route path='/category/:_id' component={CPageCategory} exact />
                </main>
            </Router>
        </Provider>
    )
}