<script lang='ts'>
  import { numberOfUnreadNotification, screenWidth, isOpen } from '$lib/store';
  import { onMount, onDestroy } from 'svelte';
  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
  import { abbreviateNumber } from '$lib/utils.js';
  import { goto } from '$app/navigation';
  
    export let data;

    let isLoaded = false;
    let rawData = []
    let displayList =  [];
    let mostFrequentTicker;
    let highestVolumeTicker;
    let highestSizeTicker;
    let highestAmountTicker;
    let sumAmountTicker
    let displayDate;
    let scrollContainer;
    let notFound = false;

    let filterQuery = '';


function getLastDate(dateString) {
  const date = new Date(dateString);

  // Check if it is open
  if ($isOpen) {
    return date?.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
  } else {
    const dayOfWeek = date.getDay(); // 0 (Sunday) to 6 (Saturday)

    // Check if it is a weekday (Monday to Friday)
    if (dayOfWeek >= 1 && dayOfWeek <= 5) {
      date.setDate(date.getDate());
    } else {
      // Find the last weekday of the week
      // If it's Saturday, go back to Friday
      // If it's Sunday, go back to Friday
      if (dayOfWeek === 6) {
        date.setDate(date.getDate() - 1);
      } else if (dayOfWeek === 0) {
        date.setDate(date.getDate() - 2);
      }
    }

    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
  }
}
function formatTime(dateString) {
  // Parse the date string to a Date object
  const date = new Date(dateString);

  // Extract hours, minutes, and seconds
  let hours = date.getUTCHours();
  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
  const seconds = String(date.getUTCSeconds()).padStart(2, '0');

  // Determine AM/PM
  const ampm = hours >= 12 ? 'PM' : 'AM';

  // Convert hours from 24-hour to 12-hour format
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'

  // Format hours
  const formattedHours = String(hours).padStart(2, '0');

  // Format time as hh:mm:ss AM/PM
  return `${formattedHours}:${minutes}:${seconds} ${ampm}`;
}

  function findMostFrequentTicker(data) {
    const tickerCountMap = new Map();
    // Iterate through the data and update the count for each ticker
    data?.forEach(item => {
      const ticker = item?.symbol;
      if (tickerCountMap?.has(ticker)) {
        tickerCountMap?.set(ticker, tickerCountMap?.get(ticker) + 1);
      } else {
        tickerCountMap?.set(ticker, 1);
      }
    });
  
    let maxTicker;
    let maxCount = -1;
  
    // Find the ticker with the highest count
    tickerCountMap?.forEach((count, ticker) => {
      if (count > maxCount) {
        maxCount = count;
        maxTicker = ticker;
      }
    });
  
    return { ticker: maxTicker, count: maxCount };
  }
  

  function findHighestVolume(data) {
    let maxVolume = -1;
    let maxVolumeTicker = null;
  
    // Iterate through the data and find the ticker with the highest volume
    data?.forEach(item => {
      const volume = parseInt(item?.volume); // Assuming volume is a string, parse it to an integer
      if (volume > maxVolume) {
        maxVolume = volume;
        maxVolumeTicker = item?.symbol;
      }
    });
  
    return { ticker: maxVolumeTicker, volume: maxVolume };
  }

  function findHighestSize(data) {
    let maxSize = -1;
    let maxSizeTicker = null;
  
    // Iterate through the data and find the ticker with the highest cost basis
    data?.forEach(item => {
      if (item?.size > maxSize) {
        maxSize = item?.size;
        maxSizeTicker = item?.symbol;
      }
    });
  
    return { ticker: maxSizeTicker, size: maxSize };
  }

  function findHighestAmount(data) {
    let maxAmount = -1;
    let maxAmountTicker = null;
  
    // Iterate through the data and find the ticker with the highest cost basis
    data?.forEach(item => {
      if ((item?.volume*item?.price) > maxAmount) {
        maxAmount = item?.volume*item?.price;
        maxAmountTicker = item?.symbol;
      }
    });

  
    return { ticker: maxAmountTicker, amount: maxAmount };
  }

  function sumTotalAmount(data) {
  let totalAmount = 0;
    let ticker;
    // Iterate through the data and sum up the cost basis for each item
    data?.forEach(item => {
      totalAmount += item?.volume * item?.price;
    });

    return{ ticker: data?.at(0)?.symbol, totalAmount: totalAmount };
  }



  async function handleScroll() {
    if (!scrollContainer) return;
    const scrollThreshold = scrollContainer.scrollHeight * 0.8; // 80% of the div height
    const isBottom = scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollThreshold;
    if (isBottom && displayList?.length !== rawData?.length) {
      const nextIndex = displayList?.length;
      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
      displayList = [...displayList, ...filteredNewResults];
    }
  }

    
  onMount(() => {
    rawData = data?.getDarkPoolFlow ?? [];
    displayList = rawData?.slice(0,20) ?? []
    displayDate = getLastDate(rawData?.at(0)?.date)
    mostFrequentTicker = findMostFrequentTicker(rawData);
    highestVolumeTicker = findHighestVolume(rawData);
    highestSizeTicker = findHighestSize(rawData);
    highestAmountTicker = findHighestAmount(rawData);

    sumAmountTicker = sumTotalAmount(rawData);

    if (data?.user?.tier === 'Pro') {
      const attachScrollListener = () => {
        if (scrollContainer) {
          scrollContainer.addEventListener('scroll', handleScroll);
          return true;
        }
        return false;
      };

      if (!attachScrollListener()) {
        const observer = new MutationObserver(() => {
          if (attachScrollListener()) {
            observer.disconnect();
          }
        });

        observer.observe(document.body, { childList: true, subtree: true });
      }
    }

    isLoaded = true;
  })
  

onDestroy(async() => {

  if (scrollContainer && data?.user?.tier === 'Pro') {
    scrollContainer.removeEventListener('scroll', handleScroll);
  };


})

  function handleInput(event) {
    filterQuery = event.target.value;
    let newData = [];
    setTimeout(() => {
        if (filterQuery?.length !== 0) {
            newData = [...rawData?.filter(item => item?.symbol === filterQuery?.toUpperCase())];
            if (newData?.length !== 0) {
                rawData = newData;

                displayList = [...rawData?.slice(0, 100)];


                notFound = false;
            } else {
                notFound = true;
                rawData = data?.getDarkPoolFlow;
                displayList = rawData?.slice(0, 100);
            }
        } else {
            notFound = false;
            rawData = data?.getDarkPoolFlow;
            displayList = rawData?.slice(0, 100);
        }

        mostFrequentTicker = findMostFrequentTicker(rawData);
        highestVolumeTicker = findHighestVolume(rawData);
        highestSizeTicker = findHighestSize(rawData);
        highestAmountTicker = findHighestAmount(rawData);
        sumAmountTicker = sumTotalAmount(rawData);

    }, 200);
}

function debounce(fn, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

const debouncedHandleInput = debounce(handleInput, 200);

  
  let charNumber = 40;
  $: {
    if ($screenWidth < 640)
    {
      charNumber = 15;
    }
    else {
      charNumber = 40;
    }
  }
  
        
  </script>
  

<svelte:options immutable={true} />

  <svelte:head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>
      {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Dark Pool Flow · stocknear
  </title>
  <meta name="description" content={`Realtime Dark Pool Trades from Hedge Funds & Major Institutional Traders.`} />
  
  <!-- Other meta tags -->
  <meta property="og:title" content={`Dark Pool Flow · stocknear`}/>
  <meta property="og:description" content={`Realtime Dark Pool Trades from Hedge Funds & Major Institutional Traders.`} />
  <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={`Dark Pool Flow · stocknear`}/>
  <meta name="twitter:description" content={`Realtime Dark Pool Trades from Hedge Funds & Major Institutional Traders.`} />
  <!-- Add more Twitter meta tags as needed -->
  
  </svelte:head>
  
      
  <body class="sm:fixed h-screen m-auto w-full max-w-screen">

 

    <section class="w-full max-w-screen sm:max-w-6xl flex justify-center items-center m-auto pt-5 bg-[#09090B] ">
        
      
        <div class="w-full m-auto mb-10 pl-3 pr-3">
  
          <div class="text-sm breadcrumbs mb-5">
            <ul>
              <li><a href="/" class="text-gray-300">Home</a></li>
              <li class="text-gray-300">Dark Pool Flow</li>
            </ul>
          </div>
  
  
            <div class="flex flex-col sm:flex-row items-center w-full bg-[#262626] rounded-lg px-3">
            
    
                <div class="flex flex-row items-center justify-center sm:justify-start mt-6 pb-5">
               
                  
  
    
              
                <div class="ml-3 flex flex-col items-start">
                    <span class="text-xs sm:text-sm italic text-white">
                      Live flow of {new Date(displayList?.at(0)?.date ?? null)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} (NYSE Time)
                    </span>
                </div>
    
              
            </div>
  
            <!--Start Filter-->
            <div class="sm:ml-auto w-full sm:w-fit">
              <div class="relative flex flex-col sm:flex-row items-center">
                  <div class="relative w-full sm:w-fit pl-3 py-2 sm:py-1.5 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-[#313131] rounded-lg border border-gray-600">
                    <label class="flex flex-row items-center ">
                      <input 
                      id="modal-search"
                        type="search" 
                        class="text-white sm:ml-2 text-[1rem] placeholder-gray-300 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1 bg-inherit"
                        placeholder="Find by Symbol"
                        bind:value={filterQuery}
                        on:input={debouncedHandleInput}
                        autocomplete="off"
                      />
                      <svg class="ml-auto h-7 w-7 sm:h-8 sm:w-8 inline-block mr-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"/></svg>
                    </label>
                    {#if notFound === true}
                    <span class="absolute left-1 -bottom-6 label-text text-error text-[0.65rem] mt-2">
                        No Results Found
                    </span>
                    {/if}
                  </div>
                  
                  
                <div class="py-2 sm:py-1.5 mb-5 sm:mb-0 flex-auto text-center bg-[#000] rounded-lg w-full sm:w-fit">
                  <label for="filterList" class="sm:flex sm:flex-row justify-center items-center cursor-pointer px-5">
                    <svg class="h-6 w-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M32 144h448M112 256h288M208 368h96"/></svg>
                    <span class="m-auto text-[1rem] text-white ml-2 px-0 py-1 bg-inherit">
                      Filters
                    </span>
                  </label>
                </div>
  
  
          </div>
        </div>
            <!--End Filter-->
                
        </div>
    
            
      
  
    
            {#if isLoaded }
  
    
            <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center">
  
              <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center p-3 sm:p-0">
                <div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 gap-x-3 ">
      
                 <!--Start Most Traded-->  
                 <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
                  <div class="flex flex-col items-start">
                      <span class="font-medium text-gray-200 text-sm ">Most Traded Symbol</span>
                      <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
                        <a href={"/stocks/"+mostFrequentTicker?.ticker} class="text-blue-400 ">
                          {mostFrequentTicker?.ticker}
                        </a>
                        {new Intl.NumberFormat("en", {
                          minimumFractionDigits: 0,
                          maximumFractionDigits: 0
                      }).format(mostFrequentTicker?.count)}
                      </span>
                  </div>
                </div>
                <!--End Most Traded-->
      
      
                <!--Start Highest Volume-->  
                <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
                  <div class="flex flex-col items-start">
                      <span class="font-medium text-gray-200 text-sm ">Highest Volume</span>
                      <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
                        <a href={"/stocks/"+highestVolumeTicker?.ticker} class="text-blue-400 ">
                          {highestVolumeTicker?.ticker}
                        </a>
                        {new Intl.NumberFormat("en", {
                          minimumFractionDigits: 0,
                          maximumFractionDigits: 0
                      }).format(highestVolumeTicker?.volume)}
                      </span>
                  </div>
                </div>
                <!--End Highest Volume-->
      
                 <!--Start Highest Size-->  
                 <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
                  <div class="flex flex-col items-start">
                      <span class="font-medium text-gray-200 text-sm ">Highest Size</span>
                      <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
                        <a href={"/stocks/"+highestSizeTicker?.ticker} class="text-blue-400 ">
                          {highestSizeTicker?.ticker}
                        </a>
                        {new Intl.NumberFormat("en", {
                          minimumFractionDigits: 0,
                          maximumFractionDigits: 0
                      }).format(highestSizeTicker?.size)}
                      </span>
                  </div>
                </div>
                <!--End Highest Size-->

                  <!--Start Amount-->  
                  <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
                    <div class="flex flex-col items-start">
                        <span class="font-medium text-gray-200 text-sm ">Highest Amount</span>
                        <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
                          <a href={"/stocks/"+highestAmountTicker?.ticker} class="text-blue-400 ">
                            {highestAmountTicker?.ticker}
                          </a>
                          {abbreviateNumber(highestAmountTicker?.amount, true)}
                        </span>
                    </div>
                  </div>
                  <!--End Amount-->

                   <!--Start Amount-->  
                   <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
                    <div class="flex flex-col items-start">
                        <span class="font-medium text-gray-200 text-sm ">Total Amount</span>
                        <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
                          <a href={"/stocks/"+sumAmountTicker?.ticker} class="text-blue-400 ">
                            {sumAmountTicker?.ticker}
                          </a>
                          {abbreviateNumber(sumAmountTicker?.totalAmount, true)}
                        </span>
                    </div>
                  </div>
                  <!--End Amount-->
      
      
                </div>
              </div>
      
           </div>
            
      
    
          
    
    
            <!-- Page wrapper -->
            <div class="flex justify-center w-full m-auto h-full overflow-hidden">
        
                <!-- Content area -->
                <div bind:this={scrollContainer} class="mt-4 w-full overflow-x-auto overflow-y-auto h-[900px] rounded-lg">
                  <table class="table table-pin-cols table-pin-rows table-sm table-compact">
                      <thead>
                        <tr class="">
                          <td class="bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase">Time</td>
                          <th class="bg-[#161618] font-bold text-slate-300 text-xs text-start uppercase">Company</th>
                          <td class="bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase">Size</td>
                          <td class="bg-[#161618] text-slate-300 font-bold text-xs text-end uppercase">Volume</td>
                          <td class="bg-[#161618] text-slate-300 font-bold text-xs text-end uppercase">Price</td>
                          <td class="bg-[#161618] text-slate-300 font-bold text-xs text-end uppercase">Amount</td>
                        </tr>
                      </thead>
                      <tbody>
                        {#each displayList as item,index}
                        <!-- row -->
                        <tr class="w-full odd:bg-[#27272A] cursor-pointer {index+1 === displayList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                          
                          <td class="text-start text-sm font-medium text-white whitespace-nowrap">
                            {formatTime(item?.date)}
                          </td>
      
                              <td  on:click|stopPropagation={() => goto(`/stocks/${item?.symbol}`)}  class="text-sm text-start whitespace-nowrap">
                                <div class="flex flex-col items-start w-32 sm:w-fit">
                                    <span class="text-blue-400">{item?.symbol}</span>
                                    <span class="text-white">
                                        {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
                                    </span>
                                </div>
                            </td>
    
                            <td class="text-start text-sm font-medium text-white">
                              {new Intl.NumberFormat("en", {
                                minimumFractionDigits: 0,
                                maximumFractionDigits: 0
                            }).format(item?.size)}
                          </td>
    
                          <td class="text-end text-sm font-medium text-white">
                            {new Intl.NumberFormat("en", {
                              minimumFractionDigits: 0,
                              maximumFractionDigits: 0
                          }).format(item?.volume)}
                          </td>
      
                          <td class="text-end text-sm font-medium text-white">
                            ${item?.price}
                          </td>
      
                        <td class="text-end text-sm font-medium text-white">
                          {abbreviateNumber(item?.price*item?.volume,true)}
                        </td>
        
      
                        </tr>
                        
                    
                        {/each}
                      </tbody>
                    </table>
        
                    <!--<InfiniteLoading on:infinite={infiniteHandler} />-->    
      
            </div>
        
            </div>
  
  
            <div class="relative bottom-[400px] w-fit m-auto flex justify-center items-center">
              <UpgradeToPro data={data} title="Get the recent Options Flow Data from Hedge Funds and major institutional traders to never miss out"/>
            </div>
    
           
            {: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}
        </div>        
        
    </section>
        
  </body>
  