<script lang="ts">
  //import ProgressBar from 'progressbar.js';
  //import { onMount } from 'svelte';
  import { stockTicker, screenWidth } from "$lib/store";

  export let stockDeck;

  let info;
  let esgScore;
  let socialScore;
  let environmentalScore;
  let governanceScore;
  let esgRiskRating;

  $: {
    if (
      $stockTicker &&
      typeof window !== "undefined" &&
      typeof stockDeck !== "undefined" &&
      stockDeck?.length !== 0
    ) {
      info = stockDeck?.at(0);
      esgScore =
        info?.esgScore !== "n/a"
          ? Math.round(info?.esgScore.toFixed(1))
          : "n/a";
      socialScore =
        info?.socialScore !== "n/a"
          ? Math.round(info?.socialScore.toFixed(1))
          : "n/a";
      environmentalScore =
        info?.environmentalScore !== "n/a"
          ? Math.round(info?.environmentalScore?.toFixed(1))
          : "n/a";
      governanceScore =
        info?.governanceScore !== "n/a"
          ? Math.round(info?.governanceScore?.toFixed(1))
          : "n/a";
      esgRiskRating = info?.esgRiskRating;
    }
  }
</script>

<!--Start ESG Card -->
<div
  class="space-y-3 lg:pt-5 hidden lg:block lg:{esgScore &&
  esgRiskRating &&
  environmentalScore &&
  governanceScore !== 'n/a'
    ? ''
    : 'hidden'}"
>
  <div
    class="sm:rounded-md shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-gray-600 h-auto sm:h-[470px] {$screenWidth <
    640
      ? 'w-screen pt-16'
      : ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0"
  >
    <!--Start Content-->
    <div
      class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0"
    >
      <h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
        ESG Score
      </h2>

      {#if esgScore && esgRiskRating && environmentalScore && governanceScore !== "n/a"}
        <p class="text-white mb-5 ml-4 mr-1">
          Gain valuable insights into a company's sustainability by evaluating
          its ESG (Environmental, Social, and Governance) scores.
        </p>

        <div class="flex flex-col m-auto items-center rounded-md w-full mb-16">
          <div class="flex flex-col items-center w-full">
            <div class="flex flex-row items-center w-11/12 mt-2 mb-2">
              <span class="text-white font-medium text-start mr-auto">
                Total
              </span>
              <span class="text-white text-md font-medium ml-auto">
                {esgScore}
              </span>
            </div>
            <progress
              class="progress bg-[#3B3D3F] w-11/12 {esgScore >= 50
                ? '[&::-webkit-progress-value]:bg-[#00FC50] [&::-moz-progress-bar]:bg-[#00FC50]'
                : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
              value={esgScore}
              max="100"
            ></progress>
          </div>

          <div class="flex flex-col items-center w-full mt-2">
            <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
              <span class="text-white font-medium text-start mr-auto">
                Environment
              </span>
              <span class="text-white text-md font-medium ml-auto">
                {environmentalScore}
              </span>
            </div>
            <progress
              class="progress bg-[#3B3D3F] w-11/12 {environmentalScore >= 50
                ? '[&::-webkit-progress-value]:bg-[#00FC50] [&::-moz-progress-bar]:bg-[#00FC50]'
                : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
              value={environmentalScore}
              max="100"
            ></progress>
          </div>

          <div class="flex flex-col items-center w-full">
            <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
              <span class="text-white font-medium text-start mr-auto">
                Social
              </span>
              <span class="text-white text-md font-medium ml-auto">
                {socialScore}
              </span>
            </div>
            <progress
              class="progress bg-[#3B3D3F] w-11/12 {socialScore >= 50
                ? '[&::-webkit-progress-value]:bg-[#00FC50] [&::-moz-progress-bar]:bg-[#00FC50]'
                : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
              value={socialScore}
              max="100"
            ></progress>
          </div>

          <div class="flex flex-col items-center w-full">
            <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
              <span class="text-white font-medium text-start mr-auto">
                Governance
              </span>
              <span class="text-white text-md font-medium ml-auto">
                {governanceScore}
              </span>
            </div>
            <progress
              class="progress bg-[#3B3D3F] w-11/12 {governanceScore >= 50
                ? '[&::-webkit-progress-value]:bg-[#00FC50] [&::-moz-progress-bar]:bg-[#00FC50]'
                : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
              value={governanceScore}
              max="100"
            ></progress>
          </div>
        </div>
      {:else}
        <h2
          class="mt-20 justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto"
        >
          No data available
        </h2>
      {/if}
    </div>
  </div>
</div>

<!--End ESG Card-->

<!--Start Mobile ESG Card-->
<div class="lg:hidden space-y-3 sm:pt-5">
  <div class="bg-[#000] h-auto w-screen">
    <!--Start Header-->
    <div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
      <h2
        class="text-center m-auto text-[1.1rem] font-semibold text-white mt-5"
      >
        ESG Score
      </h2>

      <div class="flex flex-col items-center mt-10 mb-5 w-full px-3">
        <span class="text-white text-center text-md">
          Gain valuable insights into a company's sustainability by evaluating
          its ESG (Environmental, Social, and Governance) scores.
        </span>
      </div>
    </div>
    <!--End Header-->

    {#if esgScore && esgRiskRating && environmentalScore && governanceScore !== "n/a"}
      <div
        class="mt-5 flex flex-col m-auto items-center rounded-md w-full mb-16 p-3"
      >
        <div
          class="shadow-lg bg-primary w-full rounded-md p-4 mb-5 flex flex-row items-center"
        >
          <div class="flex flex-col -mt-2 w-full">
            <div class="flex flex-row items-center w-full">
              <span
                class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"
              >
                Total
              </span>
              <span class="text-white text-md font-medium ml-auto">
                {esgScore}
              </span>
            </div>
            <progress
              class="progress w-full {esgScore >= 50
                ? '[&::-webkit-progress-value]:bg-[#00FC50] [&::-moz-progress-bar]:bg-[#00FC50]'
                : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
              value={esgScore}
              max="100"
            ></progress>
          </div>
        </div>

        <div
          class="shadow-lg bg-primary w-full rounded-md p-4 mb-5 flex flex-row items-center"
        >
          <div class="flex flex-col -mt-2 w-full">
            <div class="flex flex-row items-center w-full">
              <span
                class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"
              >
                Environment
              </span>
              <span class="text-white text-md font-medium ml-auto">
                {environmentalScore}
              </span>
            </div>
            <progress
              class="progress w-full {environmentalScore >= 50
                ? '[&::-webkit-progress-value]:bg-[#00FC50] [&::-moz-progress-bar]:bg-[#00FC50]'
                : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
              value={environmentalScore}
              max="100"
            ></progress>
          </div>
        </div>

        <div
          class="shadow-lg bg-primary w-full rounded-md p-4 mb-5 flex flex-row items-center"
        >
          <div class="flex flex-col -mt-2 w-full">
            <div class="flex flex-row items-center w-full">
              <span
                class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"
              >
                Social
              </span>
              <span class="text-white text-md font-medium ml-auto">
                {socialScore}
              </span>
            </div>
            <progress
              class="progress w-full {socialScore >= 50
                ? '[&::-webkit-progress-value]:bg-[#00FC50] [&::-moz-progress-bar]:bg-[#00FC50]'
                : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
              value={socialScore}
              max="100"
            ></progress>
          </div>
        </div>

        <div
          class="shadow-lg bg-primary w-full rounded-md p-4 mb-5 flex flex-row items-center"
        >
          <div class="flex flex-col -mt-2 w-full">
            <div class="flex flex-row items-center w-full">
              <span
                class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"
              >
                Governance
              </span>
              <span class="text-white text-md font-medium ml-auto">
                {governanceScore}
              </span>
            </div>
            <progress
              class="progress w-full {governanceScore >= 50
                ? '[&::-webkit-progress-value]:bg-[#00FC50] [&::-moz-progress-bar]:bg-[#00FC50]'
                : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
              value={governanceScore}
              max="100"
            ></progress>
          </div>
        </div>
      </div>
    {:else}
      <div
        class=" mt-20 flex justify-center items-center text-2xl font-bold text-slate-700 mb-20 m-auto"
      >
        No data available
      </div>
    {/if}
  </div>
</div>
<!--End Mobile ESG Card-->
