---
import { sumTimes, toSnakeCase } from "../../utils";

type Props = {
  course: any;
};

const { course }: Props = Astro.props;

const isDev = import.meta.env.DEV;
const statusFilter = isDev ? { '_neq': 'archived' } : { '_eq': 'published' };

const filteredModules = course.modules.filter((module: any) => {
  if (statusFilter._neq) {
    return module.status !== statusFilter._neq;
  } else if (statusFilter._eq) {
    return module.status === statusFilter._eq;
  }
  return true;
});

const courseDurations = filteredModules.flatMap((time:any) => (time.duration));
const totalCourseDuration = sumTimes(courseDurations);
---

<div>
  <div class="border-top pt-7 mt-7">
    <div class="row mb-4">
      <div class="col-8">
        <h3 class="mb-0 text-white">Contenidos del Curso</h3>
      </div>
      <div class="col-4 text-end">
        <div class="row">
          <div class="col-lg">
			<span class="text-white">
				{`${totalCourseDuration.hours} Horas ${totalCourseDuration.minutes} Minutos`}
			</span>
          </div>
        </div>
      </div>
    </div>
    <div class="accordion accordion-btn-icon-start">
	{filteredModules.map((item: any, index:number) => (
		<div class="accordion-item">
			<div class="accordion-header" id={`headingCourse${index}`}>
				<a
				class="accordion-button collapsed"
				role="button"
				data-bs-toggle="collapse"
				data-bs-target={`#${toSnakeCase(item.title)}`}
				aria-expanded="true"
				aria-controls={toSnakeCase(item.title)}>
					<div class="flex-grow-1 ps-3">
						<div class="row">
							<div class="col-8 text-white">{item.title}</div>
							<div class="col-4 text-end">
								<div class="row">
									<div class="col-lg-6"></div>
									<div class="col-lg-6">
										<span class="text-white small fw-normal"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</a>
			</div>
			<div id={toSnakeCase(item.title)} class="accordion-collapse collapse" aria-labelledby={`headingCourse${index}`}>
				<div class="bg-secondary accordion-body">
					<div class="list-group list-group-flush list-group-no-gutters">
						<span class="text-white">
							{item.description}
						</span>
						<span class="mt-2">
							<div class="ratio ratio-16x9">
								<video
								controls
								preload="auto"
								class="object-fit-fill">
								<source src={`${import.meta.env.ASTRO_ASSETS}/${item.video}`} type="video/mp4" />
								</video>
							</div>
						</span>
					</div>
				</div>
			</div>
		</div>
	))}
    </div>
  </div>
</div>
