<script lang="ts">
  import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
  import { onMount } from 'svelte';
  
  import { Chart } from 'svelte-echarts'
  import { init, use } from 'echarts/core'
  import { LineChart, BarChart } from 'echarts/charts'
  import { GridComponent, TooltipComponent } from 'echarts/components'
  import { CanvasRenderer } from 'echarts/renderers'
  use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer])
  
  
  export let data;
  let isLoaded = false;
  let dateDistance;
  let rawData = data?.getStockDividend;
  let optionsDividend;
      
      
    
  let exDividendDate = rawData?.history?.at(0)?.date;
  let dividendYield = rawData?.dividendYield;
  let annualDividend = rawData?.annualDividend;
  let payoutFrequency = rawData?.payoutFrequency;
  let payoutRatio = rawData?.payoutRatio;
  let dividendGrowth = rawData?.dividendGrowth;
      
  
    
  
  async function plotDividend() {
  
    // Combine the data into an array of objects to keep them linked
    const combinedData = rawData?.history?.map(item => ({
        date: item?.paymentDate,
        dividend: item?.adjDividend
    }));

    // Sort the combined data array based on the date
    combinedData.sort((a, b) => new Date(a.date) - new Date(b.date));

    // Separate the sorted data back into individual arrays
    const dates = combinedData.map(item => item.date);
    const dividendList = combinedData.map(item => item.dividend);

  
    const options = {
       tooltip: {
          trigger: 'axis',
          hideDelay: 100, // Set the delay in milliseconds
      },
      animation: false,
          grid: {
          left: '2%',
          right: '3%',
          bottom: '10%',
          top: '10%',
          containLabel: true
          },
        xAxis: {
          data: dates,
          type: 'category',
          axisLabel: {
            color: '#fff',
          },
          splitLine: {
              show: false, // Disable x-axis grid lines
          },
        },
        yAxis: [
          {
            type: 'value',
          axisLabel: {
            color: '#fff',
            },
            splitLine: {
              show: false, // Disable x-axis grid lines
          },
          },
          {
            type: 'value',
            axisLabel: {
              show: false,
              formatter: '{value} %',
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: 'Dividend per Share',
            data: dividendList,
            type: 'bar',
            smooth: true,
          },
        ],
      };
      
      
          return options;
  }
  
  
  
  
  
  onMount(async() => {
    optionsDividend = await plotDividend()
    isLoaded = true;
  })
  
  
  </script>
  
   
  <svelte:head>
  
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>
      {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$etfTicker}) Dividend History, Dates & Yield · stocknear
    </title>
  
    <meta name="description" content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}>
    <!-- Other meta tags -->
    <meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) Dividend History, Dates & Yield · stocknear`}/>
    <meta property="og:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}), including dividend history, yield, key dates, growth and other metrics.`} />
    <meta property="og:type" content="website"/>
    <!-- Add more Open Graph meta tags as needed -->
  
    <!-- Twitter specific meta tags -->
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) Dividend History, Dates & Yield · stocknear`}/>
    <meta name="twitter:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
    <!-- Add more Twitter meta tags as needed -->
  
  </svelte:head>
    
  
            
      <section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
          <div class="w-full flex h-full overflow-hidden">
              <div class="w-full relative flex justify-center items-center overflow-hidden">
                    <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
                          <div class="w-full mb-6">
                              <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
                                  Dividends
                              </h1>
      
                  
                              
                            
                          <div class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
                            <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" 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>
  
                            
                                {#if rawData?.history?.length !== 0}
                                {#if !dateDistance}
                                    {$displayCompanyName} has an annual dividend of
                                      ${annualDividend}
                                    per share, with a forward yield of
                                      {dividendYield}%.
                                    The dividend is paid every
                                    {payoutFrequency === 4 ? '3 months' : payoutFrequency === 2 ? '6 months' : payoutFrequency === 1 ? '12 months' : 'n/a'} 
                                    and the last ex-dividend date was
                                      {new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                {:else}
                                  {$displayCompanyName} issued its most recent dividend on 
                                  {new Date(rawData?.history?.at(0)?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}. 
                                  Since then, the company has not distributed any further dividends for over 12 months.
                                {/if}
  
                             
                              {:else}
                              No dividend history available for {$displayCompanyName}.
                              {/if}
                            
                          </div>
      
                          </div>
      
                        {#if rawData?.history?.length !== 0}
                        <div class="mb-4 grid grid-cols-2 grid-rows-2 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1">
                          <div class="p-4 bp:p-5 sm:p-6">
                              <div class="text-sm font-normal text-default xs:text-base">
                                Dividend Yield
                              </div> 
                              <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                                {dividendYield !== '0.00' ? dividendYield : '0'}%
                              </div> 
                          </div>
                          <div class="p-4 bp:p-5 sm:p-6">
                              <div class="text-sm font-normal text-default xs:text-base">
                                Annual Dividend
                              </div> 
                              <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                                ${annualDividend !== '0.00' ? annualDividend : '0'}
                              </div> 
                          </div>
                          <div class="p-4 bp:p-5 sm:p-6 ">
                              <div class="text-sm font-normal text-default xs:text-base">
                                Ex-Dividend Date
                              </div> 
                              <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                                {new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                              </div> 
                          </div>
  
                          <div class="p-4 bp:p-5 sm:p-6 ">
                              <div class="text-sm font-normal text-default xs:text-base">
                                Payout Frequency
                              </div> 
                              <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                                {payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
                              </div> 
                          </div>
  
                          <div class="p-4 bp:p-5 sm:p-6 ">
                            <div class="text-sm font-normal text-default xs:text-base">
                              Payout Ratio 
                            </div> 
                            <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                              {payoutRatio !== '0.00' ? payoutRatio : '0'}%
                            </div> 
                        </div>
  
                        <div class="p-4 bp:p-5 sm:p-6 ">
                          <div class="text-sm font-normal text-default xs:text-base">
                            Dividend Growth
                          </div> 
                          <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                            {dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
                          </div> 
                      </div>
  
  
                        </div>
  
                           
        
                            <div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
          
                              <h3 class="text-xl text-white font-semibold ">
                                Dividends History
                              </h3>
          
        
          
                            </div>
        
  
                    {#if isLoaded} 
                          {#if rawData?.history?.length !== 0 && optionsDividend}
        
                          <div class="app w-full">
                            <Chart {init} options={optionsDividend} class="chart" />
                          </div>
        
                          
                              <div class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4">
                                <table class="table table-sm table-compact flex justify-start items-center w-full m-auto">
                                  <thead>
                                    <tr class="bg-[#09090B] border-b-slate-600 shadow-md">
                                      <th class="text-start bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
                                        Ex-Divid. Date
                                      </th>
                                      <th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
                                        Cash Amount
                                      </th>
                                      <th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
                                        Record Date
                                      </th>
                                      <th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
                                        Pay Date
                                      </th>
                                    </tr>
                                  </thead>
                                  <tbody class="shadow-md">
                                    {#each rawData?.history as item}
                                    <tr class="text-gray-200 odd:bg-[#27272A]">
                                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium border-b border-[#09090B]">
                                        {new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                      </td>
                                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                        ${item?.adjDividend?.toFixed(3)}
                                      </td>
                                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                        {item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                                      </td>
                                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                        {item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                                      </td>
                                    </tr>
                                  {/each}
                                  </tbody>
                                </table>
                              </div>
                              <span class="text-gray-200 text-sm italic">
                                * Dividend amounts are adjusted for stock splits when applicable.
                              </span>
        
                          {:else}
                          <h1 class="text-xl m-auto flex justify-center text-gray-200 mb-4 mt-10">
                            No history found
                          </h1>
                          {/if}
        
        
                      {:else}
                      <div class="flex justify-center items-center h-80">
                          <div class="relative">
                          <label class="bg-[#09090B] rounded-xl 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"></span>
                          </label>
                          </div>
                      </div>
                      {/if}
                        
  
                      {/if}
  
  
                       
                    
      
                    </div>
              </div>
          </div>
      
          
      </section>
      
      
      
          
                  
      <style>
        .app {
            height: 400px;
            width: 100%;
        }
        
        @media (max-width: 560px) {
            .app {
                width: 100%;
                height: 300px;
            }
        }
    
        .chart {
            width: 100%;
        }
    </style>