'use client';
import { GetEventoWithCuestionarios } from '@/types/evento';
import Image from 'next/image';
import Link from 'next/link';
import React, { useState } from 'react';
import MarkdownRenderer from './markdown-render';

export default function EventoCard({
  evento,
  user = 'public',
}: {
  evento: GetEventoWithCuestionarios;
  user?: 'public' | 'administrador' | 'staff';
}) {
  const [verMas, setVerMas] = useState(false);
  const descripcion = evento.descripcion_evento ?? '';
  const limite = 100;

  const descripcionRecortada =
    descripcion.length > limite && !verMas
      ? `${descripcion.slice(0, limite)}...`
      : descripcion;

  return (
    <div className="card card-blog d-flex flex-column justify-content-between">
      <div>
        <div className="card-image scale-hover-1">
          <Link
            href={
              user === 'administrador' || user === 'staff'
                ? `/${user}/evento/${evento.id_evento}`
                : `/evento/${evento.nombre_evento.split(' ').join('_')}/${
                    evento.id_evento
                  }`
            }
          >
            <Image
              width={400}
              height={300}
              className="img-fluid"
              src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`}
              alt="Banner formulario"
            />
            <div className="card-caption">{evento.nombre_evento}</div>
          </Link>
          <div className="ripple-cont"></div>
        </div>

        <div className="card-body">
          <div className="card-description mb-0">
            {evento.cuestionarios[0]?.cupo_maximo === null ? (
              <span className="badge bg-success">Sin límite</span>
            ) : (
              <span className="badge bg-primary mb-2">
                {evento.cuestionarios[0]?.cupos_disponibles} cupos disponibles
              </span>
            )}
            <MarkdownRenderer markdown={descripcionRecortada} />
            {descripcion.length > limite && (
              <button
                onClick={() => setVerMas(!verMas)}
                className="btn btn-link btn-sm p-0 ms-1 align-baseline"
                style={{ fontSize: '0.875rem' }}
              >
                {verMas ? 'Ver menos' : 'Ver más'}
              </button>
            )}
          </div>

          {evento.cuestionarios.length > 0 &&
            evento.cuestionarios.map((cuestionario) => (
              <div key={cuestionario.id_cuestionario} className="">
                {user === 'administrador' || user === 'staff' ? (
                  <Link
                    href={`/${user}/evento/${evento.id_evento}`}
                    className="btn mt-2 w-100 btn-outline-primary"
                  >
                    Ver evento
                  </Link>
                ) : cuestionario.cupos_disponibles === 0 &&
                  cuestionario.cupo_maximo !== null ? (
                  <button
                    className="btn mt-2 w-100 btn-outline-secondary"
                    disabled
                  >
                    Cupo lleno
                  </button>
                ) : (
                  <Link
                    href={`/evento/${evento.nombre_evento
                      .split(' ')
                      .join('_')}/${evento.id_evento}/${
                      cuestionario.id_cuestionario
                    }`}
                    className="btn mt-2 w-100 btn-outline-primary"
                  >
                    Regístrate
                  </Link>
                )}
              </div>
            ))}
        </div>
      </div>
    </div>
  );
}