<script lang='ts'>
  import { stockTicker, displayCompanyName } from "$lib/store";
  import InfoModal from '$lib/components/InfoModal.svelte';
  
  export let data;
  
  let rawData = {};

function latestInfoDate(inputDate) {
    // Convert the input date string to milliseconds since epoch
    const inputDateMs = Date?.parse(inputDate);

    // Get today's date in milliseconds since epoch
    const todayMs = Date?.now();

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

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

    // Return the difference in days
    return differenceInDays <=1;
}

  
  function handleMode(i) {
    activeIdx = i;
  }
  
  const tabs = [
      {
        title: "Bull Case",
      },
      {
        title: "Bear Case",
      },
    ];
  
    let activeIdx = 0;
  
  $: {
      if($stockTicker && typeof window !== 'undefined') {
          rawData = data?.getBullBearSay;
          activeIdx = 0;
      }
  }
      
  </script>
  
  
  {#if Object?.keys(rawData)?.length !== 0}
  
  <div class="space-y-3 overflow-hidden">  
      <!--Start Content-->
      <div class="w-auto lg:w-full p-1 flex flex-col m-auto">
  
        <div class="flex flex-col items-center w-full mb-6">
            <div class="flex flex-row justify-start mr-auto items-center">
              <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
              <div class="flex flex-row items-center">
                <label for="bullBearCase" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
                  Bull Case vs Bear Case
                </label>
                <InfoModal
                  title={"Bull Case vs Bear Case"}
                  content={`Before investing, examine both perspectives. We offer brief analyst report summaries, highlighting both positive ("Bulls Say") and negative ("Bears Say") viewpoints on ${$displayCompanyName}`}
                  id={"bullBearCase"}
                />
                </div>
  
            </div>
        </div>
  
     <!--Start Header-->
     <div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 -mt-2">
        {#each tabs as item, i}
          <button
            on:click={() => handleMode(i)}
            class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
              ? 'z-0'
              : ''} "
          >
            {#if activeIdx === i}
                <div
                  class="absolute inset-0 rounded-lg bg-purple-600"
                ></div>
            {/if}
            <span
              class="relative text-sm block font-medium duration-200 text-white">
                {item.title}
                <svg class="{data?.user?.tier !== 'Pro' && i ===1 ? '' : 'hidden'} inline-block ml-1 -mt-0.5 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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>
            </span>
          </button>
        {/each}
    </div>
    

    <!--End Header-->
      <span class="text-gray-200 text-xs sm:text-[0.915rem] italic mt-6 sm:ml-auto">
        <label class="{latestInfoDate(rawData?.date) ? '' : 'hidden'} bg-purple-600 mr-2 text-white font-medium not-italic text-xs rounded-lg px-2 py-0.5">New</label>
        Updated {rawData?.date}
      </span> 
      <div class="flex mt-5 h-auto">
      
        <div class="{activeIdx === 0 ? 'bg-[#37C97D]' : 'bg-[#FF2F1F]'} w-full max-w-[3px] rounded-l-xl" />
        <span class="text-gray-100 ml-3 text-[1rem] w-full">
          {#if activeIdx === 0}
          <p class="pr-1">{rawData?.bullSays}</p>
          {:else}

          {#if data?.user?.tier === 'Pro'}
            <p class="pr-1">{rawData?.bearSays}</p>
           {:else}
          <div class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
              <svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" 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>
              Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
            </div>
          {/if}
          
          {/if}
        </span>
      </div>

  
      </div>

  
    </div>
  {/if}