<script lang="ts">
  import type { SvelteComponent } from 'svelte';
  import InputField from '../../form/input/InputField.svelte';
  import Button from '../../button/Button.svelte';
  import { t } from '$lib/translations';

  let registrations = 0;
  let traders = 0;
  const tradersRegistrationRatio = 0.15;
  const calculatorTradersRatio = 35;

  let tradersInputRef: SvelteComponent | null = null;

  const toDollarFormat = (value: number) => {

    const isThousand = (value >= 1000);

    const newValue: string = new Intl.NumberFormat('en-US', {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(
      isThousand ? value/1000 :value,
    ).replace(/,/g, '.')

    return `${newValue}${isThousand ? 'K' : ''}`;
  }

  $: profit = '—';

  const onInputRegistrations = (e: Event & { currentTarget: EventTarget & HTMLInputElement; }) => {
    e.preventDefault();
    const inputValue = Number(e.currentTarget.value ?? 0);
    registrations = inputValue;
    traders = Math.round(inputValue * tradersRegistrationRatio);
  }
  const onInputTraders = (e: Event & { currentTarget: EventTarget & HTMLInputElement; }) => {
    const inputValue = Number(e.currentTarget.value ?? 0);
    traders = inputValue;
    registrations = Math.floor(Number(inputValue) / tradersRegistrationRatio);
  }

  const calculateProfit = () => {
    if (!traders) {
      tradersInputRef?.getRef().reportValidity();
      return;
    }
    profit = toDollarFormat(calculatorTradersRatio * traders);
  };
</script>

<div class="brokerageFirmCalculator__calculator">
  <div class="brokerageFirmCalculator__calculatorForm">
    <InputField
      type="number"
      value={registrations !== 0 ? registrations.toString() : ''}
      onChange={onInputRegistrations}
      placeholder="{$t('brokerage-profit-calculator.Registrations')}"
      maxlength={10}
    />
    <InputField
      bind:this={tradersInputRef}
      type="number"
      value={traders !== 0 ? traders.toString() : ''}
      onChange={onInputTraders}
      placeholder="{$t('brokerage-profit-calculator.Traders')}"
      maxlength={9}
      required
    />
    <Button onClick={calculateProfit}>{$t('brokerage-profit-calculator.Calculate')}</Button>
  </div>
  <p class="brokerageFirmCalculator__calculator-profit">
    {$t('brokerage-profit-calculator.Your profit:')}
    <span class="brokerageFirmCalculator__calculation">
      {profit}
    </span>
  </p>
</div>

<style lang="scss">
  @import 'src/scss/media';
  @import 'src/scss/variables';
  @import 'src/scss/mixins';
  .brokerageFirmCalculator {
    &__calculator {
      display: flex;
      flex-direction: column;
      gap: 16px;
      background: $techWhite;
      padding: 24px;
      border-radius: 20px;
      margin-bottom: 80px;
      margin-left: -4px;
      width: 540px;

      @include breakpoint-down('deskL') {
        margin-left: 0;
        gap: 21px;
        width: 309px;
        padding: 16px;
        margin-bottom: 40px;
      }

      @include breakpoint-down('tabL') {
        width: 375px;
        gap: 22px;
        margin-bottom: 32px;
      }
      @include breakpoint-down('tabM') {
        width: 334px;
        gap: 8px;
        margin-bottom: 22px;
      }

      &-profit {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-weight: 700;
        font-size: 18px;
        line-height: 110%;

        @include breakpoint-down('deskL') {
          gap: 8px;
        }
        @include breakpoint-down('tabL') {
          gap: 4px;
        }
        @include breakpoint-down('tabM') {
          font-size: 14px;
          gap: 4px;
        }

        span {
          font-size: 72px;
          line-height: 100%;

          @include breakpoint-down('deskL') {
            font-size: 42px;
          }
          @include breakpoint-down('tabL') {
            font-size: 36px;
          }
          @include breakpoint-down('tabM') {
            font-size: 31px;
          }
        }
      }
    }
    &__calculatorForm {
      display: flex;
      flex-direction: column;
      gap: 17px;

      @include breakpoint-down('deskL') {
        gap: 14px;
      }

      @include breakpoint-down('tabL') {
        gap: 15px;
      }

      @include breakpoint-down('tabM') {
        gap: 6px;
      }
    }
  }
</style>