import {OneGood, GoodsNotFound} from "./index";
import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
import {getData, actionGoods, urlUpload} from "../reducers/index";
import {Provider, connect} from 'react-redux';
import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';


  const mapStateToProps = state => ({
    state: state,
    arr: getData(state),
    // search: getGoods(state)
  });
  
  const mapDispatchToProps = dispatch => bindActionCreators({
    getData: actionGoods
  }, dispatch);
  



const GoodsList = ({arr = [], className = "goods", onAdd}) => {
  const history = useHistory();
  // console.log(arr)
  if(arr.length == 0) {
    return(
        <>
        <GoodsNotFound/>
        </>
    )
}
  return (
    <div className = {className}>          
      {arr.map((good) => 
      
      <div key = {`${Math.random}${good._id}`}className = "oneGood">
        <OneGood  id = {good._id} name = {good.name} price = {good.price} 
        image = {good.images ? `${urlUpload}/${good.images[0].url}` : `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}
        />
        <div>
           {(history.location.pathname.includes(`/catalog/`) || history.location.pathname.includes(`/search/`)) && <button onClick = {() => onAdd(good.name, good.price, good._id,  good.description, good.images)}>В кошик</button>}
           {history.location.pathname.includes(`/orderPage/`) && <button onClick = {() => onAdd(good.name, good.price, good._id,  good.description, good.images)}>Додати до замовлення</button>}
        </div>
      </div>
      
      )}

    </div>
  )
}

//  const CGoodsList = connect(mapStateToProps, mapDispatchToProps)(GoodsList);

 export default GoodsList;