<script lang="ts">
  import { t } from '$lib/translations';
  import { investmentCalculator } from '../../../store';
  import type { IInvestmentCalculator } from '$type/investmentCalculator';

  let chartData: IInvestmentCalculator['chartData'] = [];
  let maxValue = 0;

  investmentCalculator.subscribe((data: IInvestmentCalculator) => {
    chartData = data.chartData;
    maxValue = Math.max(...chartData.map(d => d.finalBalance));
  });
</script>

<div class="investmentChart">
  <div class="investmentChart__bars">
    {#each chartData as item}
      {@const totalHeight = (item.finalBalance / maxValue) * 100}
      {@const investedHeight = (item.totalInvested / item.finalBalance) * 100}
      {@const interestHeight = (item.totalInterest / item.finalBalance) * 100}
      <div class="investmentChart__bar">
        <div class="investmentChart__stack" style="height: {totalHeight}%">
          <div class="investmentChart__segment balance" style="flex: {interestHeight}"></div>
          <div class="investmentChart__segment interest" style="flex: {interestHeight}"></div>
          <div class="investmentChart__segment invested" style="flex: {investedHeight}"></div>
        </div>
      </div>
    {/each}
  </div>
  <div class="investmentChart__legend">
    <span>{$t('IC.Total invested')} <i class="invested"></i></span>
    <span>{$t('IC.Total interest')} <i class="interest"></i></span>
    <span>{$t('IC.Final balance')} <i class="balance"></i></span>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .investmentChart {
    width: 100%;

    &__bars {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      height: 282px;
      width: 100%;

      @include breakpoint-down('tabM') {
        height: 212px;
      }
    }

    &__bar {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: flex-end;
    }

    &__stack {
      width: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 2px;
      overflow: hidden;
    }

    &__segment {
      width: 100%;

      &.balance  { background: #FFCECE; }
      &.interest { background: #FF8787; }
      &.invested { background: #FF3737; }
    }

    &__legend {
      display: flex;
      justify-content: space-between;
      margin-top: 16px;
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      color: $qc-bg-osc;

      @include breakpoint-down('tabM') {
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
      }

      span {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      i {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 2px;

        @include breakpoint-down('tabM') {
          width: 8px;
          height: 8px;
        }

        &.balance  { background: #FFCECE; }
        &.interest { background: #FF8787; }
        &.invested { background: #FF3737; }
      }
    }
  }
</style>