<script lang="ts">
  import { stockTicker, etfTicker } from "$lib/store";
  import InfoModal from "$lib/components/InfoModal.svelte";
  import { get } from "svelte/store";
  import { formatDate } from "$lib/utils";

  export let data;

  let isLoaded = false;
  let wiim;
  let showFullHistory = false;

  function latestInfoDate(inputDate) {
    // Create a Date object for the input date and convert it to New York time zone
    const inputDateLocal = new Date(inputDate).toLocaleString("en-US", {
      timeZone: "America/New_York",
    });

    // Get the current date and time in New York timezone
    const todayLocal = new Date().toLocaleString("en-US", {
      timeZone: "America/New_York",
    });

    // Convert the localized strings back to Date objects
    const inputDateMs = new Date(inputDateLocal).getTime();
    const todayMs = new Date(todayLocal).getTime();

    // Calculate the difference in milliseconds
    const differenceInMs = todayMs - inputDateMs;

    // Convert milliseconds to days
    const differenceInDays = Math.floor(differenceInMs / (1000 * 60 * 60 * 24));

    // Return whether the difference is less than or equal to 1 day
    return differenceInDays <= 1;
  }

  $: {
    if ((get(stockTicker) || get(etfTicker)) && typeof window !== "undefined") {
      isLoaded = false;
      showFullHistory = false;
      wiim = data?.getWhyPriceMoved || [];
      isLoaded = true;
    }
  }
</script>

<section class="overflow-hidden text-white h-full mt-5">
  <main class="overflow-hidden">
    <div class="flex flex-row items-center">
      <label
        for="whyPriceMovedInfo"
        class="mr-1 cursor-pointer flex flex-row items-center text-white text-2xl font-bold"
      >
        Why Price Moved
      </label>
      <InfoModal
        title={"Why Price Moved"}
        content={"Why Price Moved is a one-sentence explanation of why a stock is moving higher or down. By removing noise and collecting signals from news, press releases and SEC filings, we can pinpoint the trigger for price movements."}
        id={"whyPriceMovedInfo"}
      />
    </div>

    {#if isLoaded}
      {#if wiim?.length !== 0}
        <div class="mt-5">
          {#each showFullHistory ? wiim : wiim?.slice(0, 2) as item, index}
            <div
              class="w-full {index === 1 && !showFullHistory && wiim?.length > 2
                ? 'opacity-[0.5]'
                : ''} "
            >
              <div class="relative">
                <div class="">
                  <div class="flex justify-center">
                    <!--Start Item-->
                    <div class="flex flex-row items-center w-full mb-8">
                      <!-- Vertical Line -->
                      <div
                        class="w-1 h-full mr-4 rounded-lg {item?.changesPercentage ===
                        '-'
                          ? 'bg-white'
                          : item?.changesPercentage >= 0
                            ? 'bg-[#00FC50]'
                            : 'bg-[#FF2F1F]'}"
                      ></div>
                      <!-- Item Content -->

                      <div class="w-full h-full">
                        <div class="flex flex-col items-start">
                          <div class="flex flex-row items-start w-full">
                            <span class="text-white text-sm"
                              >{formatDate(item?.date)} &#183;
                              <a
                                href={item?.url}
                                class="inline-block text-sm text-white sm:hover:underline sm:hover:underline-offset-4"
                              >
                                Source
                              </a></span
                            >
                            {#if latestInfoDate(item?.date)}
                              <label
                                class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
                                >New</label
                              >
                            {/if}
                            <div class="text-white text-sm ml-auto font-medium">
                              {#if item?.changesPercentage >= 0}
                                <span class="text-[#00FC50] inline-block"
                                  >+{item?.changesPercentage}%</span
                                >
                              {:else if item?.changesPercentage < 0}
                                <span class="text-[#FF2F1F] inline-block"
                                  >{item?.changesPercentage}%
                                </span>
                              {/if}
                            </div>
                          </div>

                          <div class="flex flex-col w-full max-w-3xl pt-2">
                            {#if index === 0 && data?.user?.tier !== "Pro"}
                              <span class="mt-3">
                                {item?.text?.slice(0, 50) + "..."}
                                Unlock content with
                                <a
                                  class="inline-block ml-0.5 text-blue-400 sm:hover:text-white"
                                  href="/pricing"
                                  >Pro Subscription <svg
                                    class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:text-white"
                                    xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24"
                                    ><path
                                      fill="currentColor"
                                      d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
                                    /></svg
                                  ></a
                                >
                              </span>
                            {:else}
                              <span class="text-white text-[1rem]">
                                {item?.text}
                              </span>
                            {/if}
                          </div>
                        </div>
                      </div>
                    </div>
                    <!--End Item-->
                  </div>
                </div>
              </div>
            </div>
          {/each}
        </div>

        {#if wiim?.length > 2}
          <label
            on:click={() => (showFullHistory = !showFullHistory)}
            class="cursor-pointer flex justify-center items-center mt-5"
          >
            <svg
              class="w-10 h-10 transform {showFullHistory ? 'rotate-180' : ''} "
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              ><path
                fill="#2A323C"
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"
              /></svg
            >
          </label>
        {/if}
      {/if}
    {:else}
      <div class="flex justify-center items-center h-80">
        <div class="relative">
          <label
            class="bg-[#09090B] 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}
  </main>
</section>
