import { Provider, connect } from 'react-redux';
import { useEffect, useState } from 'react'
import { Header, Footer, MainImg, Links } from "./index"
import thunk from 'redux-thunk';
import { bindActionCreators } from 'redux';
import actionCatalogCard from './../reducers/reducerCat';


const CatalogSubLink = ({name, arr}) => {
    const [show, changeValue] = useState(false);
    return(
        <li><span  onClick = {() =>changeValue(!show)}>{name} </span>{<ul className="subCatalog">{ show && arr.map(key =>
            <Links className = {"subLink"} key={key._id} url={`/catalog/` + key._id} text={key.name}> </Links>)}</ul>}</li>

    )
}


const Catalog = ({ state, categories = [], getData = () => console.log("no") }) => {
    useEffect(() => categories.length == 0 && getData(), []);


    return (
        <>
            <ul className="catalog">
                {categories.map(category =>
                    category.subCategories == null ?
                        <Links key={category._id} url={`/catalog/` + category._id} text={category.name}> </Links> :

                         <CatalogSubLink name = {category.name} arr = {category.subCategories}/>

                        // <li onClick = {() =>changeValue(!show)}>{category.name} { show &&  <ul className="catalog">{category.subCategories.map(subCategory =>
                        //     <Links key={subCategory._id} url={`/catalog/` + subCategory._id} text={subCategory.name}> </Links>)}</ul>}</li>

                )}
            </ul>
        </>
    )
}

const getCategories = state => {
    // console.log("state", state)
    if (state.promiseRed.categories && state.promiseRed.categories.payload) {
        return state.promiseRed.categories.payload.data.CategoryFind
    }

    return [];
};
const mapStateToProps = state => ({
    state: state,
    categories: getCategories(state)
});

const mapDispatchToProps = dispatch => bindActionCreators({
    getData: actionCatalogCard
}, dispatch);


export default connect(mapStateToProps, mapDispatchToProps)(Catalog);