<script lang="ts">
    import  plural from 'plural-ru';
    import { locale } from '$lib/translations';
    import type { ChangeEventHandler } from "svelte/elements";
    import { investmentCalculator } from "../../../store";
    import type { IIdsList, IInvestmentCalculator } from '$type/investmentCalculator';

    export let id: IIdsList;
    export let title: string = '';
    export let hint: string = '';
    export let value: number;
    export let className: string = '';
    export let range: [number, number] = [0, 100];
    export let name: string = '';
    export let extraPlaceholder: string = '';
    export let subLabel: string = '';
    export let suffix: string = '';

    let brokerageCalculatorData: IInvestmentCalculator;

    investmentCalculator.subscribe((newValue: IInvestmentCalculator): void => {
        brokerageCalculatorData = newValue;
        value = brokerageCalculatorData[id] ?? 0;
    });

    let performValue = new Intl.NumberFormat("en-US").format(value);
    let inputPercent = value * 100 / range[1];

    const handleInput: ChangeEventHandler<any> = (event) => {
        value = Number(event.currentTarget.value);
        performValue = new Intl.NumberFormat("en-US").format(value)
        inputPercent = value * 100 / range[1];

        brokerageCalculatorData[id] = value;
        investmentCalculator.set(brokerageCalculatorData);
    }

    const forms = name.split('|');
    const threeForms = [forms[0] ?? '', forms[1] ?? '', forms[2] ?? ''];

</script>

<div class="calculatorSliderInput {$locale} {className}">
  {#if title !== ''}
    <div class="calculatorSliderInput__Label">{title}</div>
  {/if}
  {#if title !== ''}
    <div class="calculatorSliderInput__Hint">{hint}</div>
  {/if}
  {#if subLabel !== ''}
    <div class="calculatorSliderInput__SubLabel">{subLabel}</div>
  {/if}
  {#if extraPlaceholder !== ''}
  <div class="calculatorSliderInput__ExtraPlaceholder">{extraPlaceholder}</div>
  {/if}
  <div class="calculatorSliderInput__Value">{performValue}{suffix} {plural(parseInt(performValue), ...threeForms)}</div>
  <div class="calculatorSliderInput__rangeContainer">
    <label class="calculatorSliderInput__range">
      <input type="range" min="{range[0]}" max="{range[1]}" value="{value}" aria-label="Range" on:input={handleInput} style="background: linear-gradient(to right, rgb(68, 86, 103) {inputPercent}%, rgb(207, 218, 225) {inputPercent}%);">
    </label>
    <div class="calculatorSliderInput__rangeContainer--min">{new Intl.NumberFormat("en-US").format(range[0])}{'%' === name ? '%' : ''}</div>
    <div class="calculatorSliderInput__rangeContainer--max">{new Intl.NumberFormat("en-US").format(range[1])}{'%' === name ? '%' : ''}</div>
  </div>
</div>

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

  .calculatorSliderInput {
    width: 100%;
    margin-bottom: 27px;
    position: relative;

    @include breakpoint-down('tabL') {
      margin-bottom: 24px;
    }

    @include breakpoint-down('tabM') {
      margin-bottom: 26px;
    }

    &.smaller {
      .calculatorSliderInput{
        &__Label {
          font-family: $Suisse;
          font-weight: 600;
          font-size: 12px;
          line-height: 14px;
        }

        &__Hint {
          font-size: 10px;
          line-height: 14px;
          margin-bottom: 3px;
        }
      }
    }

    &.mb {
      margin-bottom: 10px;
    }

    &.extended {
      .calculatorSliderInput {
        &__Label {
          @include breakpoint-down('tabL') {
            font-size: 18px;
            line-height: 26px;
            letter-spacing: -0.4px;
            margin-bottom: 3px;
          }
        }

        &__Hint {
          @include breakpoint-down('tabL') {
            margin-bottom: 16px;
          }
        }
      }
    }

    &__Label {
      font-family: $Suisse;
      font-weight: 500;
      font-size: 18px;
      line-height: 26px;
      margin-bottom: 3px;

      @include breakpoint-down('tabL') {
        font-size: 16px;
        line-height: 24px;
      }
    }

    &__Hint {
      color: $qc-tech-blue;
      font-family: $Suisse;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      margin-bottom: 13px;
    }

    &__Value {
      font-family: $Suisse;
      font-weight: 500;
      font-size: 18px;
      line-height: 26px;
      margin-bottom: 3px;

      @include breakpoint-down('tabL') {
        font-size: 16px;
        line-height: 24px;
      }
    }
    &__SubLabel {
      font-family: $Suisse;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: $qc-tech_grey;
      margin-bottom: 4px;
    }
    &__ExtraPlaceholder {
      color: $qc-tech-blue;
      font-family: $Suisse;
      font-weight: 400;
      font-size: 8px;
      line-height: 10px;
      position: absolute;
      margin-left: 50px;
      margin-top: 2px;
    }

    &__rangeContainer {
      color: $qc-tech-blue;
      font-family: $Suisse;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      position: relative;
      margin-bottom: 10px;

      &--min {
        position: absolute;
        left: 0;
      }
      &--max {
        position: absolute;
        right: 0;
      }
    }


    &__range {
      display: flex;
      width: 100%;
      align-items: center;
      height: 20px;
      margin-bottom: 4px;

      input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        border: none;
        background: $qc-tech-light;
        border-radius: 90px;
        cursor: pointer;
        outline: none;

        &::-webkit-slider-runnable-track {
          height: 2px;
          border-radius: 90px;
        }

        &::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          margin-top: -10px;
          height: 20px;
          width: 20px;
          background: url('../../../assets/images/white-label-binary-options/howMuchCanYouEarn/rangeThumb.svg');
          border-radius: 50%;
          position: relative;
          box-shadow: 0 4px 4px 0 #00000040;
          background-size: contain;
        }

        &::-moz-range-track {
          height: 2px;
          border-radius: 90px;
        }
        input[type="range"]::-moz-range-thumb {
          -webkit-appearance: none;
          appearance: none;
          margin-top: -10px;
          height: 20px;
          width: 20px;
          background: url('../../../assets/images/white-label-binary-options/howMuchCanYouEarn/rangeThumb.svg');
          border-radius: 50%;
          position: relative;
          box-shadow: 0 4px 4px 0 #00000040;
          background-size: contain;
        }
      }
    }
  }
</style>