import { useSelector } from "react-redux";
import React, { useState, useEffect, useCallback } from "react";
import styles from "../styles";
import { resizeColumns } from "../../../configs/Constants";

import { Container, Row, Col } from "coolgrid";

const Home = () => {
  // const [showContent, setContent] = useState(false);
  const [menu, setMenu] = useState([[]]);

  const columnSize = resizeColumns();
  // const menuSize = window.innerWidth / columnSize;

  // const dispatch = useDispatch();
  const menuData = useSelector(state => state.UserDuck.menu_data);

  const listMenu = useCallback(() => {
    if (menuData.response) {
      var menuPai = [...menuData.response];
      var listMenu = [];
      for (var i = 0; i < menuPai.length; i = i + columnSize) {
        var list = menuPai.slice(i, i + columnSize);
        listMenu.push(list);
      }
      setMenu(listMenu);
    }
  }, [menuData, setMenu, columnSize]);

  useEffect(() => {
    listMenu();
  }, [listMenu]);

  return (
    <div style={styles.containerHome}>
      <Container>
        <Row>
          {menuData.response.map((i, index) => (
            <Col size={{ xs: 12, sm: 3, md: 2 }}>
              <div
                style={{
                  minWidth: 100,
                  borderTop: "1px solid",
                  border: "1px solid",
                  borderColor: "#FFFFFF50"
                }}
              >
                <label>{i.menuPai && i.menuPai.nomeMenu}</label>
              </div>
            </Col>
          ))}
        </Row>
      </Container>

      {/* {menu.map(m => (
        <div
          style={{
            display: "flex"
          }}
        >
          {m.map((i, index) => (
            <div
              style={{
                width: menuSize,
                height: menuSize,
                borderTop: "1px solid",
                borderBottom: "1px solid",
                borderRight: "1px solid",
                borderColor: APP_COLORS.font[1] + "50"
              }}
            >
              <label>{i.menuPai && i.menuPai.nomeMenu}</label>
            </div>
          ))}
        </div>
      ))} */}
    </div>
  );
};

export default Home;