<script lang="ts">

    import {etfTicker, screenWidth} from '$lib/store';
    import { goto } from '$app/navigation';
    
    export let dividendList;
  
    let dividendHistoryList = []; 
    let dividendYield;
    
    $: {
        if($etfTicker && typeof window !== 'undefined')
        {
            dividendHistoryList = dividendList?.history;

            dividendYield = dividendList?.dividendYield;

        }
}
    
    </script>
          
          <!--Start Similar Stocks Card -->
          
          <div class="space-y-3 lg:pt-5 lg:{dividendHistoryList?.length !== 0 ? '' : 'hidden'}">  
          
          <div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
          
            <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
              <div class="flex flex-row items-center w-full ml-2 pb-2 p-3">
                <span class="font-bold text-white text-2xl">
                    Dividends
                </span>
                <span class="text-white font-medium ml-auto text-sm">
                    Dividend Yield {dividendYield ?? '0'}%
                </span>
              </div>
              
              {#if dividendList?.history?.at(0)?.length !== 0} 
        
              
          
              <div class="flex justify-start items-center w-full m-auto pl-2">
                <table class="table lg:table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
                  <thead>
                    <tr>
                      <th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]">Ex-Dividend</th>
                      <th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]">Payment Date</th>
                      <th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]">Amount</th>
                    </tr>
                  </thead>

                  <tbody>
                    {#each dividendHistoryList?.slice(0,5) as item}
                    <tr class="text-white bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]">
                        <td class="text-start text-sm text-white font-medium">
                            {new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                        </td>
                        
        
                      <td class="text-end text-sm text-white font-medium">
                        {item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                      </td>

                        <td class="text-end text-sm text-white font-medium">
                            ${item?.adjDividend?.toFixed(2)}
                        </td>

                    </tr>
                    {/each}
                  </tbody>
                </table>
              </div>

              <label for="dividendModal" on:click={() => goto(`/etf/${$etfTicker}/dividends`)} class="rounded-lg cursor-pointer w-11/12 md:w-3/4 lg:w-11/12 py-2 h-full mt-8 lg:mt-6 text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100 ease-in">
                View Dividend History
              </label>
        
              {:else}
                <h2 class="mt-20 justify-center items-center text-3xl font-medium text-slate-700 mb-20 m-auto">
                  No data available
                  <svg class="w-10 lg:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#334155" d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"/></svg>
                </h2>
                {/if}
          
            
          </div>
          </div>
          </div>
          <!--End Similar Stocks Card -->    
          