<script lang="ts">
import { fomcImpactComponent, displayCompanyName, stockTicker, assetType, etfTicker, getCache, setCache } from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts';
import { init, use } from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent, MarkLineComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

use([LineChart, GridComponent, MarkLineComponent, TooltipComponent, CanvasRenderer]);

let isLoaded = false;
let rawData = [];
let tableList = []
let optionsData;
let showFullStats = false;


function getPlotOptions() {

const xAxisData = rawData?.history.map(item => item.date);

// Extract yAxis data from history (close prices)
const seriesData = rawData?.history?.map(item => [item.date, item.close]);

// Create markLine data for FOMC dates based on xAxis index

const markLineData = rawData.fomcData
  ?.map(item => {
    const index = xAxisData?.indexOf(item?.date);
    if (index !== -1) {
      return { xAxis: index }; // Mark the index in xAxis where FOMC date exists
    }
    return null;
  })
  ?.filter(item => item !== null); // Filter out null values in case FOMC date is not in history

  tableList = rawData.fomcData?.sort((a,b) => new Date(b?.date) - new Date(a?.date))


const option = {
  silent: true,
  animation: false,
  tooltip: {
    trigger: 'axis',
    hideDelay: 100
  },
  grid: {
    left: '3%',
    right: '3%',
    bottom: '2%',
    top: '5%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel: {
            color: '#fff',
    },
    data: xAxisData 
  },
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    }
  ],
  series: [
    {
        name: 'Stock Price',
      type: 'line',
      symbol: 'none',
      lineStyle: {
        color: '#fff',
      },
      markLine: {
            symbol: ['none', 'none'],
            label: { show: false },
            lineStyle: {
                color: 'orange' // Set the color to orange
            },
            data: markLineData // Use dynamically created markLine data for FOMC dates
        },
      data: seriesData // Populate series with [date, close] data
    }
  ]
};
  return option;
}

const getFOMCImpact = async (ticker: string) => {
  // Get cached data for the specific tickerID
  const cachedData = getCache(ticker, 'getFOMCImpact');
  if (cachedData) {
    rawData = cachedData;
  } else {
    const postData = { 'ticker': ticker, path: 'fomc-impact' };
    const response = await fetch('/api/ticker-data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(postData)
    });

    rawData = await response?.json()
    // Cache the data for this specific tickerID with a specific name 'getFOMCImpact'
    setCache(ticker, rawData, 'getFOMCImpact');
  }

  if (Object?.keys(rawData)?.length !== 0) {
    $fomcImpactComponent = true;
  } else {
    $fomcImpactComponent = false;
  }
};

$: {
   if($assetType === 'stock' ? $stockTicker : $etfTicker && typeof window !== 'undefined') {
    isLoaded = false;
    showFullStats = false;
    tableList = []
    const asyncFunctions = [getFOMCImpact($assetType === 'stock' ? $stockTicker : $etfTicker)];
    Promise.all(asyncFunctions)
      .then(() => {
        if (Object?.keys(rawData)?.length !== 0) {
          optionsData = getPlotOptions();
        }
      })
      .catch((error) => {
        console.error('An error occurred:', error);
      });
    isLoaded = true;
  }
}
</script>

    
    
    
    <section class="overflow-hidden text-white h-full ">
        <main class="overflow-hidden ">
                        
            <div class="flex flex-row items-center">
                <label for="fomcInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
                 FOMC Impact
                </label>
                <InfoModal
                  title={"Federal Open Market Committee Meeting"}
                  content={"FOMC meetings influence stock prices by setting interest rates and signaling monetary policy, affecting investor sentiment and market liquidity."}
                  id={"fomcInfo"}
                />
            </div>
            
            {#if isLoaded}
            {#if Object?.keys(rawData)?.length !== 0}
            <div class="mt-2 pb-8 sm:pb-2 rounded-lg bg-[#09090B] sm:bg-[#09090B]">
                    
                <div class="w-full flex flex-col items-start">
                    <div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
                        Examine how sensitive {$displayCompanyName}'s stock price is to the decisions made during FOMC meetings. The vertical line marks the interest rate decision.
                    </div>
                </div>
            
                

                <div class="app w-full h-[300px] ">
                    <Chart {init} options={optionsData} class="chart" />
                </div>
                
               
               <h2 class="mt-10 mr-1 flex flex-row items-center text-white text-2xl font-bold mb-3">
                    Latest FED Interest Rate
                </h2>

                <div class="w-full text-white text-[1rem] mt-6">
                    The latest list of previous, forecasted, and actual interest rate decisions made by the FED. 
                    <br>
                    The "% Price Change" column reflects the performance for each interval leading up to the next FOMC meeting.
                </div>

                    <div class="flex justify-start items-center w-full m-auto mt-6 overflow-x-scroll">
                    <table class="table table-sm table-compact w-full">
                      <thead>
                        <tr>
                          <th class="text-white font-semibold text-sm sm:text-[1rem] text-start bg-[#09090B]">Date</th>
                          <th class="text-white font-semibold text-sm sm:text-[1rem] text-end bg-[#09090B]">Previous</th>
                          <th class="text-white font-semibold text-sm sm:text-[1rem] text-end bg-[#09090B]">Forecast</th>
                          <th class="text-white font-semibold text-sm sm:text-[1rem] text-end bg-[#09090B]">Actual</th>
                          <th class="text-white font-semibold text-sm sm:text-[1rem] text-end bg-[#09090B]">% Price Change</th>
                        </tr>
                      </thead>
                      <tbody>
                        {#each (showFullStats ? tableList?.slice(0,10) : tableList?.slice(0,3)) as item,index}
                        <tr class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && tableList?.length > 3 ? 'opacity-[0.5]' : '' } sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]">
                         
                            <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap">
                             {new Date(item?.date ?? null)?.toLocaleString('en-US', {
                                    month: 'short',
                                    day: 'numeric',
                                    year: 'numeric',
                                })}
                            </td>
                            
                             <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap">
                                {item?.previous}%
                            </td>

                            <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap">
                                {item?.estimate}%
                            </td>

                            <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap">
                                {item?.actual}%
                            </td>
                        
                            
                            <td class="text-white font-normal text-end text-sm sm:text-[1rem] whitespace-nowrap">
                                 {#if item?.changePercentage >=0}
                                    <span class="text-[#37C97D]">+{item?.changePercentage?.toFixed(2)}%</span>
                                {:else}
                                    <span class="text-[#FF2F1F]">{item?.changePercentage?.toFixed(2)}% </span> 
                                {/if}
                            </td>
                        
                        </tr>
                        {/each}
                      </tbody>
                    </table>

            
                  </div>

                  <label on:click={() => showFullStats = !showFullStats} class="cursor-pointer flex justify-center items-center mt-5">
                    <svg class="w-10 h-10 transform {showFullStats ? '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>

            

            
            </div>
              
            {:else}
            <h2 class="mt-10 mb-5 flex justify-center items-center text-3xl font-bold text-slate-700 m-auto">
                No data available
                <svg class="w-10 sm: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}

            {: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}
      

        
        </main>
    </section>
    
    
    

<style>

.app {
    height: 300px;
    max-width: 100%; /* Ensure chart width doesn't exceed the container */

    }

    @media (max-width: 640px) {
    .app {
        height: 230px;
    }
    }

    .chart {
    width: 100%;
    }
    
</style>