import {  Col, Button, Table } from 'react-bootstrap'
import { Zoom, useMediaQuery as Size, TableCell  } from '@mui/material'

import ShowI from '@mui/icons-material/Grading';
import EditI from '@mui/icons-material/Edit';
import Deletei from '@mui/icons-material/Delete';

export function ListMode(props) {
    
    const opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
    let { setEdit, setDelete, setShow, setPuesto, data, index, showing } = props;

    const isMovil = Size('(min-width:770px)');
    console.log("IS MOV:: ", isMovil)

    return(
        <Col md="12">
            <div className="body-table">
                <Table responsive borderless id="tablaproductos">
                    <thead>
                        <tr >
                            <th className="text-center">Nombre de la plaza</th>
                            <th className="text-center">Descripción</th>
                            <th className="text-center">Creacion</th>
                            <th className="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            data.length && showing === 'list' ? 
                                data[index].map( (plaza) => {
                                    return (
                                    <Zoom key={plaza.id} in={true}>
                                        <tr >
                                            <td className="text-center">{ plaza.nombre }</td>
                                            <td className="text-center">{ plaza.description }</td>
                                            <td className="text-center">{ new Date( plaza.created ).toLocaleDateString('es-GT',opciones) }</td>
                                            <TableCell
                                                sx={{
                                                    "display":'flex',
                                                    "flex-direction":'row',
                                                    "justify-content": "space-between",
                                                    "flex-wrap": !isMovil ? "wrap": "nowrap",
                                                }} 
                                                className="actions_butons_plaza"> 
                                                <Button 
                                                    onClick={() => {
                                                        setPuesto(plaza) 
                                                        setShow(true)
                                                    }} 
                                                    className="ver_producto">
                                                    {!isMovil ? <ShowI/> : "Ver"}
                                                </Button>
                                                <Button 
                                                    onClick={() => {
                                                        setPuesto(plaza) 
                                                        setEdit(true)
                                                    }} 
                                                    className="editar_producto">
                                                    {!isMovil ? <EditI/> : "Editar"}
                                                </Button>
                                                <Button 
                                                    onClick={() => {
                                                        setPuesto(plaza) 
                                                        setDelete(true) 
                                                    }} 
                                                    className="eliminar_producto">
                                                    {!isMovil ? <Deletei/> : "Eliminar"}
                                                </Button>
                                            </TableCell>
                                        </tr>
                                    </Zoom>
                                    )
                            }) : <span></span>
                        }
                    </tbody>
                    <tfoot>
                        <tr>
                            <th className="text-center">Nombre de la plaza</th>
                            <th className="text-center">Descripción</th>
                            <th className="text-center">Salario</th>
                            <th className="text-center">Acciones</th>
                        </tr>
                    </tfoot>
                </Table>
            </div>
        </Col>
    )
}
