import { Card, Col, Container, Row } from 'react-bootstrap';
import { Head, usePage, router } from '@inertiajs/react';
import Layout from '../../../Layouts';
import { SearchTable } from './ReactTable';
import React from 'react';
import { ApiResponse } from '../../../resources/ApiResponse';
import { IFlashMessage } from '../../../interfaces';
import { useLoading } from '../../../LoadingContext';


const ReactTable = () => {

    const { listaUsuarios } = usePage().props;
    const flash  = usePage().props.flash as unknown as IFlashMessage;
    const datos = listaUsuarios as ApiResponse<any[]>;
    const usuarios =  datos?.original?.data || datos?.data || [];
    const { showLoading, hideLoading } = useLoading();

    const handleCreate = () => {
        showLoading();
        router.visit(route('users.crear'), {
            onFinish: () => hideLoading()
        });
    };

    return (
        <React.Fragment>
        <Head title='Usuarios'/>
        <div className="page-content">
            <Container fluid>
            <Row className="mb-3">
                <Col className="d-flex justify-content-end">
                    <button
                        type="button"
                        className={`btn btn-sm`}
                        style={{
                            minWidth: 180,
                            fontWeight: 500,
                            background: '#fff7e6',
                            border: '2px solid orange',
                            color: 'orange',
                            transition: 'all 0.2s'
                        }}
                        onClick={handleCreate}
                        title="Agregar nuevo usuario"
                    >
                        <i className="fas fa-user-plus me-2"></i>
                        Agregar Usuario
                    </button>
                </Col>
            </Row>
            <Row>
                <Col lg={12}>
                <Card>
                    <Card.Header>
                    <h5 className="card-title mb-0">Búsqueda</h5>
                    </Card.Header>
                    <Card.Body>

                    <SearchTable data={usuarios} flash={flash} />

                    </Card.Body>
                </Card>
                </Col>
            </Row>
            </Container>
        </div>
        </React.Fragment>
    )
}
ReactTable.layout = (page:any) => <Layout children={page}/>
export default ReactTable;
