import React  from 'react';
import { Row, Col, Button, Table } from 'react-bootstrap'
import { Box } from '@mui/material';

import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';

import ViewListIcon from '@mui/icons-material/ViewList';
import ViewModuleIcon from '@mui/icons-material/ViewModule';

import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
import EditIcon from '@mui/icons-material/Edit';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';

import NotFound from '../Images/not_found.png';

import Express from '../Components/Modal/AgregarExpress';
import Manual from '../Components/Modal/AgregarManual';

import Editar from '../Components/Modal/EditPlaza';
import Eliminar from '../Components/Modal/EliminarPlaza';
import Mostrar from '../Components/Modal/MostrarPlaza';

    
let data = [{
    nombre : 'The standard Lorem Ipsum passage, used since the 1500s',
    description : '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."',
    salario :  'Q 10,000',
    id :  0,
}]

function* idMaker() {
    var index = 1;
    while(true)
        yield index++;
}

var ID = idMaker(); 

for ( var _ of new Array(46) ){
    data.push({ ...data[0], id : ID.next().value, d : _ })
}

function ListMode(props) {
    
    let { setEdit, setDelete, setShow, setPuesto } = props;

    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">Salario</th>
                            <th className="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>

                        {
                            data.length ? 
                                data.slice( 0,23 ).map( (plaza, i) => {
                                    return (
                                        <tr key={plaza.id}>
                                            <td className="text-center">{  plaza.id +  " - " + plaza.nombre }</td>
                                            <td className="text-center">{ plaza.description }</td>
                                            <td className="text-center">{ plaza.salario }</td>
                                            <td className="actions_butons_plaza"> 
                                                <Button 
                                                    onClick={() => {
                                                        setPuesto(plaza) 
                                                        setShow(true)
                                                    }} 
                                                    className="ver_producto">Ver
                                                </Button>

                                                <Button 
                                                    onClick={() => {
                                                        setPuesto(plaza) 
                                                        setEdit(true)
                                                    }} 
                                                    className="editar_producto">Editar
                                                </Button>
                                                <Button 
                                                    onClick={() => {
                                                        setPuesto(plaza) 
                                                        setDelete(true) 
                                                    }} 
                                                    className="eliminar_producto">Eliminar
                                                </Button>
                                            </td>
                                        </tr>
                                    )
                                }) : undefined
                        }

                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Nombre de la plaza</th>
                            <th>Descripción</th>
                            <th>Salario</th>
                            <th>Acciones</th>
                        </tr>
                    </tfoot>
                </Table>
            </div>
        </Col>
    )
}


function GridMode (props) {
    
    let { setEdit, setDelete, setShow, setPuesto } = props;

    return(
        <React.Fragment> 
            {
                data.length ? 
                data.slice(23).map( plaza => {
                    return(
                        <Col key={plaza.id} lg="4" md="6" sm="6" xs="12" >
                            <div className="panel">
                                <Row>
                                    <Col md="4">
                                        <div className="img-container">
                                            <img alt="not found" src={NotFound}/>
                                        </div>
                                    </Col>
                                    <Col md="8">
                                        <div className="info_details">
                                            <p>{ plaza.nombre }</p>
                                            <p>{ plaza.description }</p>
                                            <p>{ plaza.salario }</p>
                                        </div>
                                        <div className="btn_interactivos">

                                            <div className="botones_interactivos">
                                                <span 
                                                    onClick={ () => {
                                                        setPuesto(plaza)
                                                        setShow(true)
                                                    }} 
                                                    tooltip-location="top" 
                                                    tooltip="Ver plaza">
                                                    <RemoveRedEyeIcon className="grid_btn"/>
                                                </span>
                                            </div>
                                            <div className="botones_interactivos">
                                                <span 
                                                    onClick={() => {
                                                        setPuesto(plaza)
                                                        setEdit(true)
                                                    }} 
                                                    tooltip-location="top" 
                                                    tooltip="Editar plaza">
                                                    <EditIcon className="grid_btn"/>
                                                </span>
                                            </div>
                                            <div className="botones_interactivos">
                                                <span 
                                                    onClick={() => {
                                                        setPuesto(plaza)
                                                        setDelete(true)
                                                    }} 
                                                    tooltip-location="top" 
                                                    tooltip="Eliminar plaza">
                                                    <HighlightOffIcon className="grid_btn"/>
                                                </span>
                                            </div>

                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        </Col>
                    )
                }) : undefined
            }
        </React.Fragment>
    )
}

export function Puestos() {

    const [alignment, setAlignment] = React.useState('list');

    const handleChange = (event, newAlignment) => setAlignment(newAlignment);

    const children = [
        <ToggleButton value="list" key="list">
            <ViewListIcon />
        </ToggleButton>,
        <ToggleButton value="grid" key="grid">
            <ViewModuleIcon/>
        </ToggleButton>,
    ];

    const control = {
        value: alignment,
        onChange: handleChange,
        exclusive: true,
    };

    let [puesto, setPuesto] = React.useState(false);

    let [manual, setManual] = React.useState(false);
    let [expres, setExpress] = React.useState(false);

    let [edit, setEdit] = React.useState(false);
    let [del, setDelete] = React.useState(false);
    let [show, setShow] = React.useState(false);

    React.useEffect(() => {
        console.log('puesto >>>', puesto.id)
    }, [puesto])

    return (
        <div className="content-section">

            <div className="main">

                <h1>Puestos</h1>

                <Row>
                    <Col md="2" sm="2" xs="2">
                        <div className="breadcrumb-header">
                            <Box sx={{ float : 'left',display: 'flex', flexDirection: 'column', alignItems: 'center', '& > :not(style) + :not(style)': { mt: 2 }, }} >
                                <ToggleButtonGroup size="small" {...control}>
                                    {children}
                                </ToggleButtonGroup>
                            </Box>
                        </div>
                    </Col>
                    <Col md="10" sm='10' xs="10">
                        <div className="add_producto">
                            <div onClick={() => setManual(true) } className="btn_add_producto"> <span >Agregar manual</span> </div>
                        </div>
                        <div onClick={() => setExpress(true) } className="add_producto">
                            <div className="btn_add_producto"> <span >Agregar express</span> </div>
                        </div>
                    </Col>
                </Row>
                <div className={`main_productos ${ alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'  }`} id="grid_view">
                    <Row>
                        <GridMode
                            setPuesto={setPuesto}
                            setEdit={setEdit}
                            setDelete={setDelete}
                            setShow={setShow}
                        />
                    </Row>
                </div>
                <div className={`main_list_products ${alignment === 'list' ?  'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
                    <Row>
                        <ListMode 
                            setPuesto={setPuesto}
                            setEdit={setEdit}
                            setDelete={setDelete}
                            setShow={setShow}
                        />
                    </Row>
                </div>
            </div>

            <Express setExpress={setExpress} visible={expres} onClose={() => setExpress(false) } />
            <Manual setManual={setManual} visible={manual}  onClose={() => setManual(false) } />

            <Editar  puesto={puesto} visible={edit} onClose={() => setEdit(false)} />
            <Eliminar puesto={puesto} visible={del} onClose={() => setDelete(false)} />
            <Mostrar puesto={puesto} visible={show} onClose={() => setShow(false)} />

        </div>
    )
}
