import React, {useState }  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 {actionPosts, actionLogin} from './actions'


const history = createHistory()

const SearchField = connect(null, {onChange: actionSearch})(({onChange}) => {
    const [text, setText] = useState('')
    return (
        <input value={text} onChange={e => (setText(e.target.value), onChange(e.target.value))}/>
    )
})

const Post = ({post}) =>
<div>
    <h2>{post.title}</h2>
    <p>{post.text}</p>
</div>

const PostFeed = ({posts=[]}) =>
<div>
    {posts && posts.map(p => <Post post={p}/>)}
</div>

const CPostFeed = connect(s => ({posts:s.promise.posts && 
                                       s.promise.posts.payload && 
                                       s.promise.posts.payload.getPosts}))(PostFeed)

const PageMain = () =>
<>
    <CPostFeed />
</>

const LoginForm = ({onLogin}) =>
<>
    <input type='text' />
    <input type='password' />
    <button onClick={() => onLogin('admin', '123')}>Login</button>
</>

const CLoginForm = connect(null, {onLogin: actionLogin})(LoginForm)



const SearchResult = connect(s => (console.log(s), ({payload: s.searchResult && 
                                                              s.searchResult.payload && 
                                                              s.searchResult.payload.payload && 
                                                              s.searchResult.payload.payload.GoodFind})))(({payload}) => <h1>{console.log(payload)}{payload && payload.map(({_id, name}) => <div>{name}</div>)}</h1>)

store.dispatch(actionPosts())

export default () => {
    return (
        <Provider store={store}>
            <SearchField />
            <SearchResult />
            <CLoginForm />
            <Router history={history}>
                <Route path="/" component={PageMain} />
            </Router>
        </Provider>
    )
}