<template>
    <div class="relative">
      <div class="bg-neutral-100 p-4 sm:p-10 text-center">
        <p class="typography-headline-4 sm:typography-headline-3 font-bold">
          Subscribe and get discount on your first purchase!
        </p>
        <p class="typography-text-sm sm:typography-text-base my-2 mb-4">
          Be aware of upcoming sales and events. Receive gifts and special offers!
        </p>
        <form
          class="mb-4 flex flex-col sm:flex-row gap-4 max-w-[688px] mx-auto"
          @submit.prevent="subscribeNewsletter(inputValue)"
        >
          <SfInput v-model="inputValue" type="email" wrapper-class="grow" placeholder="Type your email" />
          <SfButton type="submit" size="lg"> Subscribe to Newsletter </SfButton>
        </form>
        <div class="typography-text-xs text-neutral-600">
          To learn how we process your data, visit our <SfLink href="#" class="!text-neutral-600">Privacy Notice</SfLink>.
          You can <SfLink href="#" class="!text-neutral-600">unsubscribe</SfLink> at any time without costs.
        </div>
      </div>
      <div class="absolute top-0 right-0 mx-2 mt-2 sm:mr-6">
        <div
          v-if="showPositiveAlert"
          role="alert"
          class="flex items-start md:items-center shadow-md max-w-[600px] bg-positive-100 pr-2 pl-4 mb-2 ring-1 ring-positive-200 typography-text-sm md:typography-text-base py-1 rounded-md"
        >
          <SfIconCheckCircle class="mr-2 my-2 text-positive-700" />
          <p class="py-2 mr-2">Your email has been added to the newsletter subscription.</p>
          <button
            type="button"
            class="p-1.5 md:p-2 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900"
            aria-label="Close positive alert"
            @click="showPositiveAlert = false"
          >
            <SfIconClose class="hidden md:block" />
            <SfIconClose size="sm" class="md:hidden block" />
          </button>
        </div>
        <div
          v-if="showErrorAlert"
          role="alert"
          class="flex items-start md:items-center max-w-[600px] shadow-md bg-negative-100 pr-2 pl-4 ring-1 ring-negative-300 typography-text-sm md:typography-text-base py-1 rounded-md"
        >
          <p class="py-2 mr-2">This email is already subscribed for our newsletter.</p>
          <button
            type="button"
            class="p-1.5 md:p-2 ml-auto rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900"
            aria-label="Close error alert"
            @click="showErrorAlert = false"
          >
            <SfIconClose class="hidden md:block" />
            <SfIconClose size="sm" class="md:hidden block" />
          </button>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, type Ref } from 'vue';
  import { SfButton, SfInput, SfLink, SfIconCheckCircle, SfIconClose } from '@storefront-ui/vue';
  
  const inputValue = ref('');
  const showPositiveAlert = ref(false);
  const showErrorAlert = ref(false);
  const emailDataBase: Ref<string[]> = ref([]);
  
  const checkEmailDataBase = (email: string) => emailDataBase.value.find((element) => element === email);
  
  const subscribeNewsletter = (email: string) => {
    if (!email) return;
    if (checkEmailDataBase(email)) {
      showErrorAlert.value = true;
      setTimeout(() => (showErrorAlert.value = false), 5000);
    } else {
      showPositiveAlert.value = true;
      emailDataBase.value.push(email);
      setTimeout(() => (showPositiveAlert.value = false), 5000);
    }
    inputValue.value = '';
  };
  </script>
  