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

const Index = () => {
  const { anexoProductos, pagination } = usePage().props as any;
  const flash = usePage().props.flash;
  const initialData = Array.isArray(anexoProductos) ? anexoProductos : [];
  const initialPagination = pagination || { current_page: 1, last_page: 1, per_page: 12, total: initialData.length };
  const { showLoading, hideLoading } = useLoading();

  return (
    <React.Fragment>
      <Head title="Anexos de Productos" />
      <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' }}
                onClick={() => { showLoading(); router.visit(route('anexo-productos.create'), { onFinish: hideLoading }); }}
                aria-label="Agregar nuevo anexo">
                <i className="fas fa-file-plus me-2" aria-hidden="true" /> Agregar Anexo
              </button>
            </Col>
          </Row>
          <Row>
            <Col lg={12}>
              <Card>
                <Card.Header><h5 className="card-title mb-0">Anexos de Productos</h5></Card.Header>
                <Card.Body>
                  <AnexoProductosCardsView initialItems={initialData} initialPagination={initialPagination} flash={flash} />
                </Card.Body>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    </React.Fragment>
  );
};

Index.layout = (page: any) => <Layout children={page} />;
export default Index;
