import React from "react";
import { useAuth } from "../../hooks";
import { Row, Card, List } from "antd";
import { useHistory } from "react-router-dom";
import { ViewLoading } from "../../components";
import { DefaultLayout } from "../../components/layouts";

const Inicio = () => {
  const history = useHistory();
  const { user } = useAuth();

  const cardsAdmin = [
    {
      id: 0,
      titulo: "Eventos",
      img: "/assets/eventos.png",
      path: "/administracion/eventos",
    },
    {
      id: 1,
      titulo: "Usuarios",
      img: "/assets/usuarios.png",
      path: "/administracion/usuarios",
    },
    {
      id: 2,
      titulo: "Grupos",
      img: "/assets/grupos.png",
      path: "/administracion/grupos",
    },
    {
      id: 3,
      titulo: "Reportes",
      img: "/assets/reportes.png",
      path: "/administracion/reportes",
    },
  ];

  const cardsCliente = [
    {
      id: 0,
      titulo: "Editar perfil",
      img: "/assets/profile.png",
      path: "/perfil",
    },
  ];

  const ViewAdmin = () => {
    return (
      <List
        grid={{
          gutter: 16,
          column: 6,
        }}
        dataSource={cardsAdmin}
        renderItem={(item) => (
          <List.Item>
            <Card 
              onClick={ () => history.push(item.path)  }
              title={item.titulo} 
              style={{ textAlign: "center", cursor: 'pointer' }}
            >
              <img
                alt={item.titulo}
                src={item?.img}
                width="100%"
              />
            </Card>
          </List.Item>
        )}
      />
    );
  };

  const ViewCliente = () => {
    return (
      <List
        grid={{
          gutter: 10,
          column: 3,
        }}
        dataSource={cardsCliente}
        renderItem={(item) => (
          <List.Item>
            <Card 
              onClick={ () => history.push(item.path)  }
              title={item.titulo} 
              style={{ textAlign: "center", cursor: 'pointer' }}
            >
              <img
                alt={item.titulo}
                src={item?.img}
                width="100%"
              />
            </Card>
          </List.Item>
        )}
      />
    );
  };

  if (!user) return <ViewLoading />;

  return (
    <DefaultLayout className="site-card-wrapper">
      <Row gutter={10}>
        {user?.rol === "admin" ? <ViewAdmin /> : <ViewCliente />}
      </Row>
    </DefaultLayout>
  );
};

export default Inicio;