import DefaultLayout from "../layouts/default.tsx";
import DateRange from "@/classes/DateRange";
import CustomCalendar from "../components/calendar.tsx";

import "@/styles/index-page.css"
import { Button } from "flowbite-react";
import { useState } from "react";
import { Value } from "@/types/CalendarDates.ts";

export default function IndexPage() {

  const [calendarValue, setCalendarValue] = useState<Value>([new Date(), new Date()]);

  function clearCalendarValue() {
    setCalendarValue([null, null]);
  }

  function onChangeCalendarValue(newValue:Value) {
    setCalendarValue(newValue);
  }

  const allyDates: DateRange[] = [
    new DateRange("2025-08-14", "2025-08-17")
  ];

  const renderListAllyDates = allyDates.map((date) => (
    <li key={crypto.randomUUID()}>
      {date.startDate} - {date.endDate}
    </li>
  ));

  const selfDates = [new DateRange("2025-08-12", "2025-08-15")];

  const renderListSelfDates = selfDates.map((date) => (
    <li key={crypto.randomUUID()}>
      {date.startDate} - {date.endDate}
    </li>
  ));

  const enemyDates = [new DateRange("2025-08-18", "2025-08-21"), new DateRange("2025-08-08", "2025-08-14")];

  const renderListEnemyDates = enemyDates.map((date) => (
    <li key={crypto.randomUUID()}>
      {date.startDate} - {date.endDate}
    </li>
  ));

  return (
    <>
      <DefaultLayout>
        <div className="main-container">
          <div className="sub-container">
            <CustomCalendar
              allyDates={allyDates}
              enemyDates={enemyDates}
              selfDates={selfDates}
              calendarValue={calendarValue}
              onChangeCalendarValue={onChangeCalendarValue}
            />
            <Button className="m-3" onClick={clearCalendarValue}>Clear</Button>
          </div>
          <div className="sub-container">
            <div className="date-list">
              <p className="text-blue-700">Your vacation dates</p>
              <ul>{renderListSelfDates}</ul>
            </div>
            <div className="date-list">
              <p className="text-green-800">Must intersect</p>
              <ul>{renderListAllyDates}</ul>
            </div>
            <div className="date-list">
              <p className="text-amber-600">Must not intersect</p>
              <ul>{renderListEnemyDates}</ul>
            </div>
          </div>
        </div>
      </DefaultLayout>
    </>
  );
}