<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 { env } from '$env/dynamic/public';
import activePic from '../../../assets/images/business-plan/active-picture-business.webp';
import { getCookieByName } from '$utils/cookie';

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]);
  }
}


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

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

  const code = document.querySelector('.iti__selected-dial-code');
  const token = document.querySelector('.g-recaptcha-response');

  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;
  }

  if (token) {
    formState.data.token = token?.value;
  }

  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: 'saas_form_sent' });
  await fetch(`/api/popup`, {
    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;

      const grecaptcha = window?.grecaptcha;

      if (grecaptcha && grecaptcha?.ready && env?.PUBLIC_RECAPTCHA_SITE_KEY) {
        grecaptcha?.reset();
      }
    });
};
const clickSendMore = () => {
  formState.data = {};
  formState.response = {};
  formState.status = 0;

  const grecaptcha = window?.grecaptcha;

  if (grecaptcha && grecaptcha?.ready && env?.PUBLIC_RECAPTCHA_SITE_KEY) {
    grecaptcha?.reset();
  }
};
</script>

<section class="fromAtoZ" id="fromAtoZ">
  <div class="container">
    <div class="activePicture">
      <img src={activePic} loading="lazy" alt="active_picture">
    </div>
    <div class="fromAtoZ__form" >
      <div class="fromAtoZ__formText">
        <p class="fromAtoZ__overTitle">{$t('From A to Z')}</p>
        <p class="fromAtoZ__formTitle">{$t('business-plan.1-Page Brokerage Business Plan')}</p>
        <p class="fromAtoZ__formDescription">{$t('business-plan.Submit the form below and we’ll send you PDF file with detailed calculations.')}</p>
      </div>
      <div class="fromAtoZ__formItems">
        <div class="fromAtoZ__formItem">
          <InputField
            className="bordered"
            placeholder={$t("business-plan.Name*")}
            name="first_name"
            error={formState.response.first_name}
            value={String(formState.data.first_name || '')}
            onChange={(e) => {
                  formState.data.first_name = e.currentTarget.value;
                 Validation({ name: 'first_name', value: e.currentTarget.value, formState });
                }}
          />
        </div>
        <div class="fromAtoZ__formItem">
          <InputField
            className="bordered"
            placeholder={$t("business-plan.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="fromAtoZ__formItem">
          <InputFieldPhone
            className="bordered"
            placeholder={$t("business-plan.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="fromAtoZ__formItem">
          <InputField
            className="bordered"
            placeholder={$t("business-plan.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="fromAtoZ__formItem">
          <TextareaField
            className="bordered"
            placeholder={$t("business-plan.Comment")}
            name="message"
            error={formState.response.text}
            value={String(formState.data.message || '')}
            onChange={(e) => {
                  formState.data.message = e.currentTarget.value;
                }}
          />
        </div>
        <div class="fromAtoZ__formItem">
          <Button
            text={$t("business-plan.Get Started")}
            className="fromAtoZ__button"
            onClick={sendForm}
            loading={formState.loading}
          />
        </div>
        <div class="fromAtoZ__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("business-plan.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";
  .fromAtoZ {
    background-color: rgba(245, 245, 245, 1);
    background-image: url('../../../assets/images/business-plan/pattern.png');
    background-size: cover;
    padding-top: 40px;
    padding-bottom: 40px;

    @include breakpoint-down('deskL') {
      padding-top: 51px;
      padding-bottom: 50px;
    }
    @include breakpoint-down('tabL') {
      padding-top: 89px;
      padding-bottom: 40px;
    }
    @include breakpoint-down('tabM') {
      padding-top: 92px;
      padding-bottom: 110px;
    }

    .container {
      display: flex;
      justify-content: space-between;
      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: 14px;
        padding: 32px 20px;
        border-radius: 20px;
      }
      @include breakpoint-down('tabL') {
        width: 529px;
        gap: 24px;
      }
      @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: 4px;
      }
      @include breakpoint-down('tabM') {
        gap: 20px;
      }
    }
    &__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 {
      font-weight: 700;
      font-size: 42px;
      line-height: 56px;
      text-align: center;
      @include breakpoint-down('deskL') {
        font-size: 24px;
        line-height: 26.4px;
      }
      @include breakpoint-down('tabL') {
        font-size: 18px;
        line-height: 19.8px;
      }
    }
    &__formDescription {
      text-align: center;
      font-size: 24px;
      line-height: 32px;
      @include breakpoint-down('deskL') {
        font-size: 14px;
        line-height: 19.6px;
      }
      @include breakpoint-down('tabL') {
        font-size: 16px;
        line-height: 19.49px;
      }
      @include breakpoint-down('tabM') {
        font-size: 12px;
        line-height: 14.4px;
        margin-top: -8px;
      }
    }
    &__formItems {
      padding-inline: 11.5px;
      @include breakpoint-down('tabM') {
        padding-inline: 0;
      }
    }
    &__formItem {
      margin-bottom: 16px;

      @include breakpoint-down('tabL') {
        margin-bottom: 8px;
      }
      @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(body .fromAtoZ .inputInput, body .fromAtoZ .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 .fromAtoZ .iti .iti__selected-flag) {
    border-radius: 12px;
    padding-left: 22px;
    gap: 3px;
  }
  :global(body .fromAtoZ .iti .iti__flag ) {
    transform: scale(0.6);
  }
</style>