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


const ReactTable = () => {

    const { clientes, pagination } = usePage().props as any;
    const flash  = usePage().props.flash as unknown as IFlashMessage;
    const initialData = Array.isArray(clientes) ? clientes : [];
    const initialPagination = pagination || { current_page: 1, last_page: 1, per_page: initialData.length || 12, total: initialData.length, from: 0, to: initialData.length };
    const { showLoading, hideLoading } = useLoading();

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

    return (
        <React.Fragment>
        <Head title='Clientes'/>
        <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 cliente"
                    >
                        <i className="fas fa-user-plus me-2"></i>
                        Agregar Cliente
                    </button>
                </Col>
            </Row>
            <Row>
                <Col lg={12}>
                <Card>
                    <Card.Header>
                    <h5 className="card-title mb-0">Búsqueda</h5>
                    </Card.Header>
                    <Card.Body>

                    <ClienteCardsView
                        initialClientes={initialData}
                        initialPagination={initialPagination}
                        flash={flash}
                    />

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