/* eslint-disable react/no-danger */
/* eslint-disable no-unused-expressions */
/* eslint-disable react/prop-types */
import React, { useRef, useState } from 'react';

import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './newsletter-optin.module.scss';

export default function Newsletter({
  title = 'Exclusive Casino Offers and Free Spins straight to your Inbox',
  description = 'Subscribe below to be the first to get notified of exclusive casino offers, free spins and bonuses - conveniently via email or SMS. We won’t flood your inbox, but just give you the good stuff in the right way!',
  terms = 'I confirm that I am 18+ years old and Irish resident.',
  privacyText = 'Read our <a class="newsletter-gtm" href="/privacy-policy">Privacy Policy</a> for more details.',
}) {
  const form = useRef(null);

  const onSubmit = (e) => {
    e.preventDefault();
    // validationForm(e.target.elements) && form.current.submit();
    // eslint-disable-next-line no-use-before-define, no-console
    validationForm(e.target.elements) && console.log('submited');
  };

  const validationForm = (e) => {
    let nameValidate = false;
    let emailValidate = false;
    let phoneValidate = false;
    let termsValidate = false;

    if (!e.name.value && e.name.value.trim() === '') {
      nameValidate = false;
      e.name.classList.add(styles.error);
    } else {
      nameValidate = true;
      e.name.classList.remove(styles.error);
    }

    if (!/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i.test(e.email.value)) {
      emailValidate = false;
      e.email.classList.add(styles.error);
    } else {
      emailValidate = true;
      e.email.classList.remove(styles.error);
    }

    if (!/^\d+$/.test(e.phone.value)) {
      phoneValidate = false;
      e.phone.classList.add(styles.error);
    } else {
      phoneValidate = true;
      e.phone.classList.remove(styles.error);
    }

    termsValidate = e.terms.checked;

    return !!(nameValidate && emailValidate && phoneValidate && termsValidate);
  };

  const [checked, setChecked] = useState(false);

  const handleChange = () => {
    setChecked(!checked);
  };

  return (
    <div className={styles?.container || ''}>
      <div className={styles?.newsletterBody || ''}>
        <h2 className={styles?.title || ''}>SUBSCRIBE</h2>
        <p>{title}</p>
        <p>{description}</p>
        <form action="" method="post" ref={form} onSubmit={onSubmit}>
          <input placeholder={useTranslate('first_name', 'First Name')} type="text" name="name" />
          <input placeholder={useTranslate('email', 'E-Mail')} type="email" name="email" />
          <input
            placeholder={useTranslate('phone_number', 'Phone Number')}
            type="text"
            name="phone"
          />
          <button type="submit">Subscribe</button>
          <div className={styles?.checkbox || ''}>
            <div>
              <label className={styles?.labelContainer || ''} htmlFor="terms">
                {terms}
                <input
                  type="checkbox"
                  id="terms"
                  name="terms"
                  checked={checked}
                  onChange={handleChange}
                />
                <span className={styles?.checkmark || ''} />
              </label>
            </div>
            <p dangerouslySetInnerHTML={{ __html: privacyText }} />
          </div>
        </form>
      </div>
    </div>
  );
}
