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

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

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

  return (
    <React.Fragment>
      <Head title="Comercializadoras" />
      <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}
                aria-label="Agregar nueva comercializadora"
              >
                <i className="fas fa-user-plus me-2" aria-hidden="true" />
                Agregar Comercializadora
              </button>
            </Col>
          </Row>
          <Row>
            <Col lg={12}>
              <Card>
                <Card.Header>
                  <h5 className="card-title mb-0">Comercializadoras</h5>
                </Card.Header>
                <Card.Body>
                  <ComercializadorasCardsView
                    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;
