'use client';

import ClientCarousel from '@/client-components/client-carousel';
import FormularioCardUser from '@/components/formulario/formulario-card-user';
import EmptyEventsState from '@/components/empty-events-state';
import { useGetApi } from '@/hooks/use-get-api';
import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
import React from 'react';

export default function Page() {
  const { loading, data } = useGetApi<GetEventoWithCuestionariosWithCupos[]>(
    '/evento/activos/cuestionarios'
  );

  return (
    <div>
      {data && data.length > 0 && (
        <div className="mx-auto mb-5 mt-3 fade-in-down-bounce">
          <ClientCarousel
            images={
              data && data.length > 0
                ? data.map((evento) => ({
                    src: `${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`,
                    alt: `Banner de ${evento.nombre_evento}`,
                  }))
                : [
                    {
                      src: '/default-banner.png',
                      alt: 'Banner de eventos activos',
                    },
                  ]
            }
          />
        </div>
      )}

      {loading && (
        <div className="text-center py-5 fade-in-scale">
          <div className="d-flex justify-content-center align-items-center mb-3">
            <div
              className="spinner-border text-primary me-3"
              role="status"
              style={{ width: '2rem', height: '2rem' }}
            >
              <span className="visually-hidden">Cargando...</span>
            </div>
            <div>
              <h5 className="mb-0 text-primary">Cargando eventos...</h5>
              <small className="text-muted">
                Esto solo tomará unos segundos
              </small>
            </div>
          </div>
        </div>
      )}

      {!loading && data && data.length === 0 && (
        <div className="flex-grow-1 d-flex flex-column justify-content-center align-items-center">
          <EmptyEventsState />
        </div>
      )}

      {!loading && data && data.length > 0 && (
        <div className="row">
          {data.flatMap((evento) =>
            evento.cuestionarios.map((cuestionario, index) => {
              return (
                <div
                  className={`col-md-6 col-lg-4 my-3 fade-in-up-bounce delay-${
                    (index % 5) + 1
                  }`}
                  key={`${evento.id_evento}-${cuestionario.id_cuestionario}`}
                >
                  <FormularioCardUser
                    evento={evento}
                    formulario={cuestionario}
                  />
                </div>
              );
            })
          )}
        </div>
      )}
    </div>
  );
}
