const {__} = wp.i18n
import React, { useState } from 'react';
import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
import '../scss/_theme-activation.scss';

const ThemeActivation = ({isPurchase, setIsPurchase}) => {

  const [fetchStatus, setFetchStatus] = useState('idle');
  const [response, setResponse] = useState('');
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    code: ''
  });
  const [errors, setErrors] = useState({
    name: '',
    email: '',
    code: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;

    setFormData({
      ...formData,
      [name]: value,
    });

    // Reset errors when user types
    setErrors({
      ...errors,
      [name]: '',
    });

    // Validate email format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (name === 'email' && value.trim() !== '' && !emailRegex.test(value)) {
      setErrors({
        ...errors,
        email: 'Please enter a valid email address.',
      });
    }
  };

  const savePurchaseCode = async (e) => {
    e.preventDefault()

    // Validate required fields
    const newErrors = {};
    if (!formData.name.trim()) {
      newErrors.name = 'Please enter your name.';
    }
    if (!formData.email.trim()) {
      newErrors.email = 'Please enter a valid email address.';
    }
    if (!formData.code.trim()) {
      newErrors.code = 'Please enter a valid purchase code.';
    }

    // If there are errors, set them in state and do not submit the form
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    try {
      setFetchStatus('loading');
      let rest_url = `${devia_options.rest_url}wd/v2/save-purchase-code`;
      let body = JSON.stringify({
        purchase_name: formData.name,
        purchase_email: formData.email,
        purchase_code: formData.code
      });
      const res = await fetch(rest_url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': devia_options.nonce
        },
        body
      });
      if (res.ok) {
        const data = await res.json();
        setResponse(data.message);
        setFetchStatus('success');
        let now = new Date()
        setIsPurchase({
          active: true,
          name: formData.name,
          email: formData.email,
          code: formData.code,
          date: now.toISOString().slice(0, 10) + ` ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`
        });
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <section className="devia-welcome">
      <h1>Theme Activation</h1>
      {!isPurchase.active ? (
        <div className="purchase" style={{ paddingBlock: "5px 40px" }}>
          <div className="purchase-form" style={{maxWidth: "500px"}}>
          <form>

            <Flex direction={'column'}>
              <Flex justify={'flex-start'} align='start'> 
                <FlexItem isBlock={true} className={`form-field`}>
                  <label htmlFor="purchase_name" style={{display: 'block'}} >{__('Name:', devia_options.text_domain)}</label>
                  <input
                    id="purchase_name"
                    name="name"
                    type="text"
                    value={formData.name}
                    placeholder={__('Your name', devia_options.text_domain)}
                    required
                    className={errors.name && 'required-error'}
                    onChange={handleChange}
                  />
                  {errors.name && <span className="form-hint">{errors.name}</span>}
                </FlexItem>
                <FlexItem isBlock={true} className={`form-field`}>
                  <label htmlFor="purchase_email" style={{display: 'block'}} >{__('Email:', devia_options.text_domain)}</label>
                  <input
                    id="purchase_email"
                    name="email"
                    type="text"
                    value={formData.email}
                    placeholder={__('Your Email', devia_options.text_domain)}
                    required
                    className={errors.email && 'required-error'}
                    onChange={handleChange}
                  />
                  {errors.email && <span className="form-hint">{errors.email}</span>}
                </FlexItem>
              </Flex>
              
              <FlexItem isBlock={true} className={`form-field`} >
                <label htmlFor="purchasecode" style={{display: 'block'}} >{__('Purchase code:', devia_options.text_domain)}</label>
                <input
                  id="purchasecode"
                  name="code"
                  type="text"
                  value={formData.code}
                  placeholder={__('Enter your purchase code', devia_options.text_domain)}
                  required
                  className={errors.code && 'required-error'}
                  onChange={handleChange}
                />
                {errors.code && <span className="form-hint">{errors.code}</span>}
              </FlexItem>
              
            </Flex>

            <button
              className={`button btn-submit`}
              onClick={savePurchaseCode}
              style={{border: 'none',
                background: 'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #3858e9))',
                color: 'var(--wp-components-color-accent-inverted, #fff)',
                padding: '3px 30px',
                marginBlock: '15px 20px',
                fontSize: '1em'}}
            >
              {__('Submit', devia_options.text_domain)}
            </button>

          </form>

            <p style={{fontSize: '1em'}}>
              You can't find your purchase code? please visit the <a href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-" 
              target="_blank" rel="noopener">Where Is My Purchase Code? &#8599; </a>
            </p>

            {fetchStatus === 'loading' && <p>{__('Loading...', devia_options.text_domain)}</p>}
            {fetchStatus === 'success' && <p>{response}</p>}
          </div>
        </div>
      ) : <>
        <div style={{background: '#00c3005e', padding: '1em', fontWeight: 700, borderRadius: '4px'}}>{__('Theme is activated.', devia_options.text_domain)}</div>
        <p><strong>{ __('Name', devia_options.text_domain) }: </strong>{ isPurchase.name }</p>
        <p><strong>{ __('Email', devia_options.text_domain) }: </strong>{ isPurchase.email }</p>
        <p><strong>{ __('Purchase Code', devia_options.text_domain) }: </strong>{ isPurchase.code }</p>
        <p><strong>{ __('Date', devia_options.text_domain) }: </strong>{ isPurchase.date }</p>
      </>
      }
    </section>
  );
};

export default ThemeActivation;