<script lang="ts">
  import { formatString, abbreviateNumber } from "$lib/utils";
  import { screenWidth } from "$lib/store";
  import Infobox from "$lib/components/Infobox.svelte";

  import InfiniteLoading from "$lib/components/InfiniteLoading.svelte";

  export let data;

  let rawData;
  let totalIPOs = 0;
  let ipoList;
  let year;
  let isLoaded = false;
  let displayMonth = "all";

  async function infiniteHandler({ detail: { loaded, complete } }) {
    if (ipoList?.length === rawData?.length) {
      complete();
    } else {
      const nextIndex = ipoList?.length;
      const newHoldings = rawData?.slice(nextIndex, nextIndex + 50);
      ipoList = [...ipoList, ...newHoldings];
      loaded();
    }
  }

  const monthMap = {
    jan: "01",
    feb: "02",
    march: "03",
    april: "04",
    may: "05",
    june: "06",
    july: "07",
    aug: "08",
    sept: "09",
    oct: "10",
    nov: "11",
    dec: "12",
  };

  async function changeTimePeriod(event) {
    isLoaded = false;
    displayMonth = event.target.value;
    const monthValue = monthMap[displayMonth];
    if (displayMonth !== "all") {
      rawData = data?.getIPOCalendar?.filter((item) =>
        item?.date?.includes(`-${monthValue}-`),
      );
    } else {
      rawData = data?.getIPOCalendar;
    }

    ipoList = rawData?.slice(0, 50);

    isLoaded = true;
  }

  $: {
    if (typeof window !== "undefined") {
      const monthValue = monthMap[displayMonth];
      if (displayMonth !== "all") {
        rawData = data?.getIPOCalendar?.filter((item) =>
          item?.date?.includes(`-${monthValue}-`),
        );
      } else {
        rawData = data?.getIPOCalendar;
      }

      totalIPOs = data?.getIPOCalendar?.length;
      ipoList = rawData?.slice(0, 50);
      year = data?.getYear;
      isLoaded = true;
    }
  }

  $: charNumber = $screenWidth < 640 ? 20 : 40;
</script>

<section class="w-full overflow-hidden m-auto">
  {#if isLoaded}
    <div class="mt-3 mb-3">
      <Infobox
        text={`There have been ${totalIPOs} IPOs on the US stock market in ${year}.`}
      />
    </div>
    <div class="flex flex-col justify-center items-center">
      <div class="mr-auto flex flex-col jusitfy-start items-start mb-5 mt-5">
        <div class="text-white text-sm sm:text-[1rem] font-medium mr-2">
          Select Time period
        </div>
        <div class="relative mt-4">
          <select
            class="select text-white select-bordered select-sm w-36 p-0 pl-5 overflow-y-auto bg-secondary"
            on:change={changeTimePeriod}
          >
            <option disabled>Select time period</option>
            <option value="all" selected>All</option>
            <option value="jan">January</option>
            <option value="feb">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="aug">August</option>
            <option value="sept">September</option>
            <option value="oct">October</option>
            <option value="nov">November</option>
            <option value="dec">December</option>
          </select>
        </div>
      </div>

      {#if rawData?.length !== 0}
        <h2
          class="text-white text-xl font- text-start mt-5 w-full font-semibold"
        >
          {rawData?.length} IPOs
        </h2>
        <div class="w-full overflow-x-scroll">
          <table
            class="mt-5 table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto overflow-hidden"
          >
            <thead class="bg-default">
              <tr>
                <th class="text-white font-semibold text-sm text-start"
                  >IPO Date</th
                >
                <th class="text-white font-semibold text-sm text-start"
                  >Symbol</th
                >
                <th class="text-white font-semibold text-sm">Name</th>
                <th class="text-white font-semibold text-end text-sm"
                  >IPO Price</th
                >
                <th class="text-white font-semibold text-end text-sm"
                  >Current Price</th
                >
                <th class="text-white font-semibold text-end text-sm"
                  >Return Since</th
                >
              </tr>
            </thead>
            <tbody>
              {#each ipoList as item}
                <tr
                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b-[#09090B]"
                >
                  <td
                    class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"
                  >
                    {new Date(item?.date)?.toLocaleString("en-US", {
                      month: "short",
                      day: "numeric",
                      year: "numeric",
                      daySuffix: "2-digit",
                    })}
                  </td>

                  <td
                    class="text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"
                  >
                    <a
                      href={"/stocks/" + item?.symbol}
                      class="sm:hover:text-white text-blue-400"
                    >
                      {item?.symbol}
                    </a>
                  </td>

                  <td
                    class="text-gray-200 border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"
                  >
                    <span class="text-white"
                      >{item?.name?.length > charNumber
                        ? formatString(item?.name?.slice(0, charNumber)) + "..."
                        : formatString(item?.name)}</span
                    >
                  </td>

                  <td
                    class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"
                  >
                    {item?.ipoPrice !== null ? item?.ipoPrice : "-"}
                  </td>

                  <td
                    class="text-white border-b-[#09090B] text-sm sm:text-[1rem] text-end"
                  >
                    {item?.currentPrice !== null ? item?.currentPrice : "-"}
                  </td>

                  <td
                    class="text-white border-b-[#09090B] text-end flex flex-row items-center justify-end"
                  >
                    {#if item?.return >= 0 && item?.return !== null}
                      <span
                        class="inline-block text-[#00FC50] text-sm sm:text-[1rem] whitespace-nowrap"
                        >+{abbreviateNumber(item?.return)}%</span
                      >
                    {:else if item?.return < 0 && item?.return !== null}
                      <span
                        class="inline-block text-[#FF2F1F] text-sm sm:text-[1rem] whitespace-nowrap"
                        >{abbreviateNumber(item?.return)}%
                      </span>
                    {:else}
                      <span
                        class="inline-block text-white text-sm sm:text-[1rem] whitespace-nowrap"
                      >
                        -
                      </span>
                    {/if}
                  </td>
                </tr>
              {/each}
              <InfiniteLoading on:infinite={infiniteHandler} />
            </tbody>
          </table>
        </div>
      {:else}
        <div class="flex justify-center items-center m-auto mt-10 mb-6">
          <div
            class="text-gray-100 text-center text-sm sm:text-[1rem] rounded-md h-auto border border-gray-600 p-4"
          >
            <svg
              class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 256 256"
              ><path
                fill="#fff"
                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
              /></svg
            >
            No IPOs found. Please adjust your search timeframe for the latest {year}
            IPOs.
          </div>
        </div>
      {/if}
    </div>
  {:else}
    <div class="flex justify-center items-center h-80">
      <div class="relative">
        <label
          class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
        >
          <span class="loading loading-spinner loading-md text-gray-400"></span>
        </label>
      </div>
    </div>
  {/if}
</section>
