<script lang="ts">
  import Validation from '$utils/Validation';
  import { localeLink } from '$lib/translations';
  import Message from '../../form/message/Message.svelte';
  import CheckboxField from '../../form/input/CheckboxField.svelte';
  import InputFieldPhone from '../../form/input/InputFieldPhone.svelte';
  import TextareaField from '../../form/input/TextareaField.svelte';
  import Button from '../../button/Button.svelte';
  import InputField from '../../form/input/InputField.svelte';
  import { browser } from '$app/environment';
  import type { IForm } from '$type/form';
  import { t } from '$lib/translations';
  import createEvent from '$utils/createEvents';
  import { getCookieByName } from '$utils/cookie';
  import Recaptcha from '$components/form/input/Recaptcha.svelte';

  let roistatId = null;
  if (browser) {
    const urlParams = new URLSearchParams(window.location.search);
    const entries = urlParams.entries();
    roistatId = getCookieByName('roistat_visit', document.cookie);

    for (const entry of entries) {
      localStorage.setItem('param__' + entry[0], entry[1]);
    }
  }

  let recaptcha: { getResponse: () => string; reset: () => void };

  const formState: IForm = {
    loading: false,
    error: false,
    data: {
      name: '',
      email: '',
      tg: '',
      phone: '',
      message: '',
      terms_agree: false,
      roistatId: roistatId,
    },
    response: {},
    status: 0,
  };

  const sendForm = async () => {
    formState.loading = true;

    const code = document.querySelector('.iti__selected-dial-code');

    for (let i = 0; i < localStorage.length; i++) {
      let key = localStorage.key(i);
      if (key && key.includes('param__')) {
        formState.data[key.replace('param__', '')] = localStorage.getItem(key) || null;
      }
    }

    if (code) {
      formState.data.code = code.innerHTML;
    }

    let phone = formState.data.phone;

    if (phone) {
      if (String(phone).includes(String(formState.data.code))) {
        phone = formState.data.phone;
      } else {
        phone = String(formState.data.code) + String(formState.data.phone);
      }
      delete formState.data.code;
    }

    formState.data.token = recaptcha?.getResponse() ?? '';

    formState.data['landing_url'] = window.location.host + window.location.pathname;
    formState.data['referrer'] = window.location.href;
    formState.data['language'] = document.documentElement.lang;
    formState.data['lang_by_browser'] = document.documentElement.lang;

    for (const [key, value] of Object.entries(formState.data)) {
      Validation({ name: key, value: value, formState });
    }

    if (Object.values(formState.response).length) {
      formState.loading = false;
      return;
    }

    createEvent({ event: 'prop-firm_sent' });

    await fetch(`/api/send`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        ...formState.data,
        phone: String(phone).replace(/[^+\d]/g, ''),
      }),
    })
      .then((response) => {
        formState.status = response.status;
        return response.json();
      })
      .then((response) => {
        formState.response = response;
      })
      .finally(() => {
        formState.loading = false;
        recaptcha?.reset();
      });
  };

  const clickSendMore = () => {
    formState.data = {};
    formState.response = {};
    formState.status = 0;
    recaptcha?.reset();
  };
</script>

<section class="form-block" id="form-block">
  <div class="container">
    <div class="form-block__form">
      <div class="form-block__formText">
        <p class="form-block__formTitle">{$t('prop-firm.Start Your White Label Prop Firm in Just 2 Weeks')}</p>
        <p class="form-block__formDescription">{$t('prop-firm.Launch Your Prop Trading Business Effortlessly with Our Complete White Label Solution')}</p>
      </div>
      <div class="form-block__formItems">
        <div class="form-block__formItem">
          <InputField
            className="bordered"
            placeholder={$t('prop-firm.Name*')}
            name="name"
            error={formState.response.name}
            value={String(formState.data.name || '')}
            onChange={(e) => {
              formState.data.name = e.currentTarget.value;
              Validation({ name: 'name', value: e.currentTarget.value, formState });
            }}
          />
        </div>
        <div class="form-block__formItem">
          <InputField
            className="bordered"
            placeholder={$t('prop-firm.Email*')}
            name="email"
            error={formState.response.email}
            value={String(formState.data.email || '')}
            onChange={(e) => {
              formState.data.email = e.currentTarget.value;
              Validation({ name: 'email', value: e.currentTarget.value, formState });
            }}
          />
        </div>
        <div class="form-block__formItem">
          <InputFieldPhone
            className="bordered"
            placeholder={$t('prop-firm.Phone number*')}
            name="phone"
            error={formState.response.phone}
            value={String(formState.data.phone || '')}
            onChange={(e) => {
              formState.data.phone = e.currentTarget.value;
              Validation({ name: 'phone', value: e.currentTarget.value, formState });
            }}
          />
        </div>
        <div class="form-block__formItem">
          <InputField
            className="bordered"
            placeholder={$t('prop-firm.TG @username')}
            name="tg"
            error={formState.response.tg}
            value={String(formState.data.tg || '')}
            onChange={(e) => {
              formState.data.tg = e.currentTarget.value;
              Validation({ name: 'tg', value: e.currentTarget.value, formState });
            }}
          />
        </div>
        <div class="form-block__formItem">
          <TextareaField
            className="bordered"
            placeholder={$t('prop-firm.Comment')}
            name="message"
            error={formState.response.text}
            value={String(formState.data.message || '')}
            onChange={(e) => {
              formState.data.message = e.currentTarget.value;
            }}
          />
        </div>
        <div class="block-feedback__formItem recaptcha">
          <Recaptcha bind:this={recaptcha} error={formState.response.token} />
        </div>
        <div class="form-block__formItem" style="margin-top: 10px;">
          <Button
            text={$t('prop-firm.Get Started')}
            className="form-block__button"
            onClick={sendForm}
            loading={formState.loading}
          />
        </div>
        <div class="form-block__formItem">
          <CheckboxField
            placeholder={`${$t('By sticking this checkbox I consent with the')} <a href="${localeLink()}/terms-and-conditions">${$t('terms and conditions')}</a> ${$t('and the')} <a href="${localeLink()}/privacy-policy">${$t('privacy policy')}</a> ${$t('of the website')}`}
            name="terms_agree"
            error={formState.response.terms_agree}
            checked={Boolean(formState.data.terms_agree)}
            onChange={(e) => {
              formState.data.agreement = e.currentTarget.checked;
              formState.data.terms_agree = e.currentTarget.checked;
              Validation({ name: 'terms_agree', value: e.currentTarget.checked, formState });
            }}
          />
        </div>
      </div>
      {#if formState.response?.status === 'ok'}
        <Message
          onClick={clickSendMore}
          text={$t('prop-firm.Thank you for your interest! Our team will contact you shortly to discuss the details.')}
        />
      {/if}
      {#if [500, 502, 429].includes(formState.status)}
        <Message
          error={true}
          onClick={clickSendMore}
          text={formState.response.error || formState.response.message || ''}
        />
      {/if}
    </div>
  </div>
</section>

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

  .form-block {
    background: rgba(245, 245, 245, 1);
    padding: 84px 0 80px 0;

    @include breakpoint-down('deskL') {
      padding: 66px 0;
    }
    @include breakpoint-down('tabL') {
      padding: 48px 0;
    }
    @include breakpoint-down('tabM') {
      padding: 40px 0;
    }

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      @include breakpoint-down('tabL') {
        justify-content: center;
      }
    }
    .activePicture {
      height: 699px;
      width: 590px;
      @include breakpoint-down('deskL') {
        height: 554px;
        width: 468px;
      }
      @include breakpoint-down('tabL') {
        display: none;
      }
    }
    &__form {
      background: #FFFFFF;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 52px 48.5px;
      border-radius: 40px;
      justify-content: center;
      width: 708px;
      @include breakpoint-down('deskL') {
        width: 492px;
        gap: 29px;
        padding: 32px 20px;
        border-radius: 20px;

      }
      @include breakpoint-down('tabL') {
        width: 346px;
        gap: 22px;
      }
      @include breakpoint-down('tabM') {
        width: 100%;
        padding: 32px 14px 14px 14px;
        gap: 27px;
      }
    }
    &__formText {
      padding-bottom: 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 16px;

      @include breakpoint-down('deskL') {
        gap: 9px;
        padding-bottom: 0;
      }
      @include breakpoint-down('tabL') {
        gap: 7px;
      }
      @include breakpoint-down('tabM') {
        gap: 13px;
      }
    }
    &__overTitle {
      color: $redPrimary;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      @include breakpoint-down('deskL') {
        font-size: 14px;
        line-height: 15.4px;
      }
      @include breakpoint-down('tabL') {
        font-size: 16px;
        line-height: 22.4px;
      }
      @include breakpoint-down('tabM') {
        line-height: 17.6px;
      }
    }
    &__formTitle {
      @include H2;
      text-align: center;
      @include breakpoint-down('deskL') {
        width: 352px;
      }
      @include breakpoint-down('tabL') {
        @include H3;
        width: 251px;
      }
      @include breakpoint-down('tabM') {
        @include H2;
        width: 233px;
      }
    }
    &__formDescription {
      @include body;
      text-align: center;
      padding-inline: 13px;

      @include breakpoint-down('deskL') {
        @include subtext;
        padding: 0;
        width: 314px;
      }
      @include breakpoint-down('tabL') {
        @include table;
        font-weight: 400;
        width: 255px;
      }
      @include breakpoint-down('tabM') {
        @include body;
      }
    }
    &__formItems {
      padding-inline: 11.5px;
      @include breakpoint-down('tabM') {
        padding-inline: 0;
      }
    }
    &__formItem {
      margin-bottom: 13px;

      @include breakpoint-down('deskL') {
        margin-bottom: 16px;
      }
      @include breakpoint-down('tabL') {
        margin-bottom: 9px;
      }
      @include breakpoint-down('tabM') {
        margin-bottom: 19px;
      }

      &:last-child {
        margin-bottom: 0;
      }
      :global(.button) {
        width: 100%;
        font-size: 30px;
        line-height: 33px;
        @include breakpoint-down('deskL') {
          font-size: 18px;
          line-height: 19.8px;
        }
        @include breakpoint-down('tabL') {
          height: 54px;
        }
        @include breakpoint-down('tabM') {
          height: 39px;
          font-size: 14px;
          line-height: 15.4px;
        }
      }
      :global(.checkboxPlaceholder ) {
        font-size: 21px !important;
        line-height: 28px !important;
        @include breakpoint-down('deskL') {
          font-size: 14px !important;
          line-height: 19.6px !important;
        }
        @include breakpoint-down('tabL') {
          font-size: 10px !important;
          line-height: 12px !important;
        }
        @include breakpoint-down('tabM') {
          font-size: 12px !important;
          line-height: 14.4px !important;
        }
      }
      :global(.checkboxContainer  ) {
        align-items: center;

        @include breakpoint-down('deskL') {
          padding-top: 0;
          min-height: 47px;
        }
        @include breakpoint-down('tabL') {
          min-height: 36px;
        }
        @include breakpoint-down('tabM') {
          min-height: 64px;
        }
      }
    }

  }

  :global(body .form-block .inputInput, body .form-block .textareaInput) {
    border-radius: 12px !important;
    @include breakpoint-down('deskL') {
      padding: 14px 68px 8px 24px !important;
    }
    @include breakpoint-down('tabM') {
      padding: 14px 68px 5px 10px !important;
    }
  }
  :global(body .form-block .iti .iti__selected-flag) {
    border-radius: 12px;
    padding-left: 22px;
    gap: 3px;
  }
  :global(body .form-block .iti .iti__flag ) {
    transform: scale(0.6);
  }
</style>