import { useEffect, useState } from 'react';
import quitFormStyles from 'src/components/form/quit-now/form.module.css';
import { useRouter } from 'next/router';
import {CalendarContainer, AvailableTimesContainer} from './calendar.styles';

// ================================================= //
// Calendar component //
// ================================================= //
import 'react-calendar/dist/Calendar.css';
import Calendar from 'react-calendar';

// ================================================= //
// Icons //
// ================================================= //
import { BsCheck, BsX, BsChevronLeft, BsChevronRight } from 'react-icons/bs';
import { MdInfo } from 'react-icons/md';

export interface LandingPageData {
  mainHeader: any,
  mainBody: any,
  additionalSupport: any,
  disclaimer: any,
  quitCoachHeader: any,
  quitCoachBody: any,
  btnSignUp: any,
  textProgramHeader: any,
  textProgramBody: any,
  textProgramDisclaimer: any,
  btnQuitSmoking: any,
  btnQuitVaping: any,
}

export interface ButtonsData {
  nextBtn: any,
  previousBtn: any,
  exitBtn: any,
  confirmBtn: any
}

export interface QuestionData {
  id: number,
  section: number,
  type: string,
  property?: string,
  quick_response: boolean,
  question: any,
  options: AnswerOption[],
  required_message?: any,
  disclaimer_message?: any,
  help_copy?: any,
  error_message?: any,
  next?: number,
  api?: string,
  error_message_multi?: any
}

interface AnswerOption {
  key: string,
  value: any,
  required: boolean,
  validation: boolean | string,
  field_type: string,
  dropdown_options?: string[],
  help_copy?: any,
  error_message?: any,
  next?: number,
  api?: string,
  message_on_select?: any
}

interface StandardFormProps {
  currentQuestion_Data: QuestionData;
  uiButtons_Data: ButtonsData;
  onClickHandler: any;
  answers: any;
}

interface CalendarFormProps {
  currentQuestion_Data: QuestionData;
  uiButtons_Data: ButtonsData;
  onClickHandler: any;
  dates?: any;
}

interface ExitFormProps {
  currentQuestion_Data: QuestionData;
  uiButtons_Data: ButtonsData;
}

interface MessageFormProps {
  currentQuestion_Data: QuestionData;
  uiButtons_Data: ButtonsData;
  appointmentSchedule: any;
}

interface ErrorMessageFormProps {
  currentQuestion_Data: QuestionData;
  uiButtons_Data: ButtonsData;
}

// ================================================= //
// Standard Form //
// ================================================= //
export function Standard_Form(props: StandardFormProps) {

  // Determine locale //
  // ================================================= //
  const router = useRouter();
  const locale = router.locale === undefined ? 'en' : router.locale;

  // Use language Specific Text //
  // ================================================= //
  let question = props.currentQuestion_Data.question[locale];
  let continueButton = props.uiButtons_Data.nextBtn[locale];
  let helpCopy: string | null = null;
  if (props.currentQuestion_Data.help_copy) {
    helpCopy = props.currentQuestion_Data.help_copy[locale];
  }
  /*
  let errorMessage: any = null;
  if (props.currentQuestion_Data.error_message) {
    errorMessage = props.currentQuestion_Data.error_message[locale];
  } */
  
  const [errorMessage, setErrorMessage] = useState(props.currentQuestion_Data.error_message ? props.currentQuestion_Data.error_message[locale] : "" );

  // ================================================= //

  // Default Error State //
  // ================================================= //
  let [showError, setShowError] = useState(false);

  // Main Props //
  // ================================================= //
  let options = props.currentQuestion_Data.options;
  let quickResponse = props.currentQuestion_Data.quick_response;
  let onClickHandler = props.onClickHandler;

  useEffect(() => {

    // Set value for options if they exist in Answers already //
    // ================================================= //
    options.forEach((option) => {
      let el = (document.getElementById(option.key + '_answer') as HTMLInputElement);

      if(el){
        // Text and Number Inputs //
        if (['text', 'email', 'number', 'dob'].includes(option.field_type)) {
          el.value = props.answers[option.key];
        }
        // CheckBoxes and Radios //
        if (option.field_type == 'checkbox' || option.field_type == 'radio') {
          el.checked = props.answers[option.key];
        }
      }

    });

  }, []);
  
  // Clear: Radio Buttons //
  // ================================================= //
  const clearRadios = () => {
    var radios = document.querySelectorAll('input[type=radio]');
    radios.forEach((radio) => {
      (radio as HTMLInputElement).checked = false;
    });
  }

  // Clear: CheckBoxes //
  // ================================================= //
  const clearCheckBoxes = () => {
    var checkBoxes = document.querySelectorAll('input[type=checkbox]');
    checkBoxes.forEach((checkBox) => {
      (checkBox as HTMLInputElement).checked = false;
    });
  }

  // Clear: Text & Number Inputs //    
  // ================================================= //
  const clearTextInputs = () => {
    // Text Inputs //
    var txtInputs = document.querySelectorAll('input[type=text]');
    txtInputs.forEach((txtInput) => {
      (txtInput as HTMLInputElement).value = "";
      (txtInput as HTMLInputElement).className = quitFormStyles.text;
    });
    // Number Inputs //
    var numberInputs = document.querySelectorAll('input[type=number]');
    numberInputs.forEach((numberInput) => {
      (numberInput as HTMLInputElement).value = "";
      (numberInput as HTMLInputElement).className = quitFormStyles.text_small;
    });
  }

  // Clear: DropDown //
  // ================================================= //
  const clearDropDown = () => {
    var dropDownMenu = (document.querySelector('select') as HTMLSelectElement);
    
    if (dropDownMenu) {
      dropDownMenu.selectedIndex = 0;
      dropDownMenu.className = quitFormStyles.dropDown;
    }
  }
  
  // ================================================= //
  // Continue Button Clicked //
  // ================================================= //
  const onContinue = () => {
    setShowError(false); 

    setErrorMessage(props.currentQuestion_Data.error_message ? props.currentQuestion_Data.error_message[locale] : "");

    setRadioSelection('');

    let next = props.currentQuestion_Data.next;
    let answers : any | undefined;
    let apiCall = props.currentQuestion_Data.api;

    // ================================================= //
    // Radio Selection //
    // ================================================= //
    var radios = document.querySelectorAll('input[type=radio]:checked');

    for (var i = 0; i < radios.length; i++) {
      let radio = (radios[i] as HTMLInputElement);

      // Update Answers Value //
      // ================================================= //
      answers = radio.dataset.answer;      

      // Validation: Answer has a Next Question value? Update the next var //
      // ================================================= //
      if (next == undefined) {
        next = Number(radio.dataset.next);
      }

      // Validation: Answer has an API call? Update the api var //
      // ================================================= //
      if (apiCall == undefined) {
        apiCall = radio.dataset.api;
      }
    }

    // ================================================= //
    // DOB Inputs //
    // ================================================= //
    if (props.currentQuestion_Data.options[0]?.validation === 'dob') {
      const dobMonth = (document.querySelector('#dob-month') as HTMLInputElement)?.value;
      const dobDay = (document.querySelector('#dob-day') as HTMLInputElement)?.value;
      const dobYear = (document.querySelector('#dob-year') as HTMLInputElement)?.value;

      const errorMulti = props.currentQuestion_Data.error_message_multi?.[locale];

      if (!dobMonth || !dobDay || !dobYear || (Number(dobYear) > new Date().getFullYear())) {
        setErrorMessage(errorMulti.validateDate);
        setShowError(true);
        return false;
      }

      const dob = new Date(`${dobYear}-${dobMonth}-${dobDay}T00:00:00Z`);

      if (isNaN(dob.getTime())) {
        setErrorMessage(errorMulti.validateDate);
        setShowError(true);
        return false;
      }

      const today = new Date();
      const eighteenYearsAgo = new Date(
        today.getFullYear() - 18,
        today.getMonth(),
        today.getDate()
      );

      if (dob > eighteenYearsAgo) {
        setErrorMessage(errorMulti.under18);
        setShowError(true);
        return false;
      }

      answers = `${dobMonth}/${dobDay}/${dobYear}`;

      //answers.push(checkbox.dataset.answer);

    }


    // ================================================= //
    // CheckBoxes Selected // 
    // ================================================= //
    var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')

    if (checkboxes.length > 0) {
      for (var i = 0; i < checkboxes.length; i++) {
        let checkbox = (checkboxes[i] as HTMLInputElement);

        // If it's the 1st loop, set up the Answers as an Array //
        // ================================================= //
        if (i < 1 ) {
          answers = [];
        }

        // Push the Checked Answer to the Answers Array // 
        // ================================================= //
        answers.push(checkbox.dataset.answer);

        // Validation: Answer has a Next Question value? Update the next var //
        // ================================================= //
        if (next == undefined) {
          next = Number(checkbox.dataset.next);
        }
      }
    }

    // ================================================= //
    // DropDown Selection //
    // ================================================= //
    var dropDown = document.getElementsByTagName("select")[0];
    var dropDown_SelectedIndex = 0;

    // Validation: DropDown Selected? Update Answers // 
    // ================================================= //
    if (dropDown && dropDown.selectedIndex > 0) {
      dropDown_SelectedIndex = dropDown.selectedIndex;
      answers = dropDown.options[dropDown_SelectedIndex].text;
    }

    // ================================================= //
    // Text Inputs //
    // ================================================= //
    var textInputs = document.querySelectorAll('input[type=text]');

    if (textInputs.length > 0 && props.currentQuestion_Data.options[0]?.validation !== 'dob') {
      for (var i = 0; i < textInputs.length; i++) {
        let textInput = (textInputs[i] as HTMLInputElement);

        // Validation: Phone Number //
        // ================================================= //
        if (props.currentQuestion_Data.options[i]?.validation == 'phoneNumber') {
          if (textInput.value.length < 12 && checkboxes.length < 1) {
            return;
          }
        }

        // Validation: Has a value? Update Answers // 
        // ================================================= //
        if (textInput.value) {
          answers = textInput.value;
        }
                  
        // Validation: Answer has a Next Question value? Update the next var // 
        // ================================================= //
        if (next == undefined) {
          next = Number(textInput.dataset.next);
        }
      }
    }

    // ================================================= //
    // Number Inputs //
    // ================================================= //
    var numberInputs = document.querySelectorAll('input[type=number]');

    if (numberInputs.length > 0) {
      for (var i = 0; i < numberInputs.length; i++) {
        let numberInput = (numberInputs[i] as HTMLInputElement);

        // If this number input has a value //
        // ================================================= //
        if (numberInput.value) {

          // Validation: Age //
          // ================================================= //
          if (props.currentQuestion_Data.options[i].validation == 'age') {
            if( 13 > Number(numberInput.value) ){
              // Too young: Show Error //
              setShowError(true);

              // Prevent from moving forward //
              return false;
            }
          }

          // Validation: Marijuana Days Used //
          // ================================================= //
          if (props.currentQuestion_Data.options[i].validation == 'marijuanaDaysUsed') {
            if( 30 < Number(numberInput.value) || 1 > Number(numberInput.value)){
              setShowError(true);
              return false;
            }

            // Clear if float (mimicking current age behavior; unsure where this currently is located -- AR)
            const parsed = Number.parseFloat(numberInput.value);
            if ( (!Number.isNaN(parsed)) && (!Number.isInteger(parsed)) ) {
              numberInput.value = '';
              // clearTextInputs();
              return false;
            }

          }

          // Validation: Nicotine Pouches Days Used //
          // ================================================= //
          if (props.currentQuestion_Data.options[i].validation == 'nicPouchDaysPerWeek') {
            if( 6 < Number(numberInput.value) || 1 > Number(numberInput.value)){
              setShowError(true);
              return false;
            }

            // Clear if float (mimicking current age behavior; unsure where this currently is located -- AR)
            const parsed = Number.parseFloat(numberInput.value);
            if ( (!Number.isNaN(parsed)) && (!Number.isInteger(parsed)) ) {
              numberInput.value = '';
              // clearTextInputs();
              return false;
            }

          }

          // Update Answers Value //
          // ================================================= //
          answers = numberInput.value;
        }

        // Validation: Answer has a Next Question value? Update the next var // 
        // ================================================= //
        if (next == undefined) {
          next = Number(numberInput.dataset.next);
        }
      }
    }




    // ================================================= //
    // Send Answers and go to the Next Page //
    // ================================================= //
    if (answers !== undefined) {
      onClickHandler({
        field: props.currentQuestion_Data.property,
        answers: answers,
        next: next,
        api: apiCall
      });

      clearTextInputs();
      clearRadios();
      clearCheckBoxes();
      clearDropDown();
    }
    
  };

  // For Radio message_on_select option //
  // ================================================= //
  const [radioSelection, setRadioSelection] = useState('');

  useEffect(() => {
    setRadioSelection((document.querySelector(`input[type="radio"]:checked`) as HTMLInputElement)?.value);
  }, [locale]);

  // ================================================= //
  // Change Events: Radios //
  // ================================================= //
  const onRadioChangeEvent = (e: any) => {
    // Clear / Reset Form Elements //
    clearTextInputs();
    clearCheckBoxes();
    clearDropDown();

    // Moves to Next Question automatically if this is a Quick Response Question //
    // ================================================= //
    if(props.currentQuestion_Data.quick_response){
      onContinue(); 
    }

    setRadioSelection(e.target.value);
  }
  
  // ================================================= //
  // Change Events: Text //
  // ================================================= //
  const onTextInput = (e: any) => {
    // Clear / Reset Form Elements //

    /*// Preserve current sexual orientation exclusivity between Other box and Checkbox selections
    let shouldClearCheckbox = true;

    for (const option of options) {
      if (option.field_type === "checkbox") {
        shouldClearCheckbox = false;
      }
    }
    if (shouldClearCheckbox) {
      clearCheckBoxes();
    }
    */
    
    clearCheckBoxes();
    clearRadios();
    clearDropDown();

    // Set to Active Input Class //
    // ================================================= //
    if (e.target.type == "number") {
      e.target.className = quitFormStyles.text_small_active;
    } else {
      e.target.className = quitFormStyles.text_active;
    }
    
    // Limit answers to 3 digit numbers //
    // ================================================= //
    if (e.target.dataset.validation == "age" || e.target.dataset.validation == "cigPerDay") {
      e.target.value = e.target.value.slice(0, 3);
    }

    // Force Phone Number Formatting //
    // ================================================= //
    if (e.target.dataset.validation == "phoneNumber") {
      e.target.value = e.target.value.replace(/^\D*(\d{0,3})\D*(\d{0,3})\D*(\d{0,4})/, (match: string, g1: string, g2: string, g3: string) => {
        let output = '';

        if (g1.length || match) {
          output += g1;
          if (g1.length === 3) {
            output += '-';
            if (g2.length) {
              output += '' + g2;
              if (g2.length === 3) {
                output += '-';
                if (g3.length) {
                  output += g3;
                }
              }
            }
          }
        }
        return output;
      }).substring(0, 12);
    }

  }

  // ================================================= //
  // Change Events: CheckBox //
  // ================================================= //
  const onCheckboxChangeEvent = (e: any) => {
    // Clear / Reset Form Elements //
    clearTextInputs();
    clearRadios();
    clearDropDown();

    if(e.target.checked){
      var checkboxes = document.querySelectorAll('input[type=checkbox]:checked');

      for (var i = 0; i < checkboxes.length; i++) {
        let checkbox = (checkboxes[i] as HTMLInputElement);

        // "None" was selected, so make sure other selections are deselected //
        // ================================================= //
        if (e.target.defaultValue == 'None' && checkbox.value != 'None' || e.target.defaultValue == 'Ninguno' && checkbox.value != 'Ninguno') {
          checkbox.checked = false;
        }
        
        // Valid option was selected, so deselect 'None' //
        // ================================================= //
        if(e.target.defaultValue != 'None' && checkbox.value == 'None' || e.target.defaultValue != 'Ninguno' && checkbox.value == 'Ninguno'){
          checkbox.checked = false;
        }
      }

    } 
  }

  // ================================================= //
  // Change Events: DropDown //
  // ================================================= //
  const onDropDownChangeEvent = (e: any) => {
    // Clear / Reset Form Elements //
    clearTextInputs();
    clearRadios();
    clearCheckBoxes();
    
    // Set to Active DropDown Class //
    // ================================================= //
    e.target.className = quitFormStyles.dropDown_active;
  }

  // ================================================= //
  // Show Help Copy //
  // ================================================= //
  let show_HelpCopy = false;
  const showHelpCopy = () => {
    let helpIcon_Before = document.getElementById("question_holder") as HTMLElement;

    //console.log(helpIcon_Before);
    //console.log(quitFormStyles.question_holder_ToolTip);

    if (helpIcon_Before) {
      helpIcon_Before.className = quitFormStyles.question_holder_ToolTip;
      show_HelpCopy = false;
    }
  }
  // ================================================= //
  // Hide Help Copy //
  // ================================================= //
  const hideHelpCopy = () => {
    let helpIcon_Before = document.getElementById("question_holder") as HTMLElement;

    if (helpIcon_Before) {
      helpIcon_Before.className = quitFormStyles.question_holder;
      show_HelpCopy = false;
    }
  }
  // ================================================= //
  // Toggle Help Copy //
  // ================================================= //
  const toggleHelpCopy = () => {
    let questionHolder = document.getElementById("question_holder") as HTMLElement;

    if (show_HelpCopy) {
      questionHolder.className = quitFormStyles.question_holder;
      show_HelpCopy = false;
    } else {
      questionHolder.className = quitFormStyles.question_holder_ToolTip;
      show_HelpCopy = true;
    }
  }


  return(
    <>
      {/* ================================================================
      // Question // 
      ================================================================ */}
      <div id='question_holder' className={quitFormStyles.question_holder} {...helpCopy && {'data-tooltip' : helpCopy}} >

        <p dangerouslySetInnerHTML={{__html: question}} /> 

        {/* Help Copy Icon // 
        ================================================================ */}
        {helpCopy && 
        <button id='helpIconBtn' className={quitFormStyles.helpIconBtn} 
          onMouseOver={showHelpCopy} 
          onMouseOut={hideHelpCopy}
          onBlur={hideHelpCopy}
          onClick={toggleHelpCopy}>
          <MdInfo size="24px" className={quitFormStyles.react_icons_white} />
        </button>          
        }
      </div>

      {/* ================================================================
      // Answers //
      ================================================================ */}
      <div className={quitFormStyles.answers_holder}>
          {options.map((option: AnswerOption, index: any) => (
              <div key={index}>
                {/* ================================================================
                // Text Input // 
                ================================================================ */}
                {option.field_type === 'text' &&
                  <input 
                    type={option.field_type} 
                    id={'answer_' + index} 
                    name="answer_input" 
                    placeholder={option.value[locale]}
                    className={quitFormStyles.text}
                    data-next={option.next}
                    data-validation={option.validation}
                    onChange={onTextInput} />
                }
                
                {/* ================================================================
                // Number Input // 
                ================================================================ */}
                {option.field_type === 'number' &&
                  <input 
                    type={option.field_type} 
                    id={'answer_' + index} 
                    name="answer_input" 
                    placeholder={option.value[locale]}
                    className={option.key == "age" || option.key == "cigPerDay" || option.key == "marijuanaDaysUsed" ? quitFormStyles.text_small : quitFormStyles.text}
                    data-next={option.next}
                    data-validation={option.validation}
                    onChange={onTextInput} />
                }
                
                {/* ================================================================
                // Radio Input // 
                ================================================================ */}
                {(option.field_type === 'radio') &&
                    <input 
                    type={option.field_type} 
                    id={'answer_' + index} 
                    name="answer_input" 
                    value={option.value[locale]}
                    onChange={onRadioChangeEvent}
                    className={quitFormStyles.checkBox}
                    data-next={option.next}
                    data-answer={option.value['en']}
                    data-api={option.api} 
                    />
                }

                {/* ================================================================
                // CheckBox Input // 
                ================================================================ */}
                {(option.field_type === 'checkbox') &&
                  <input
                    type={option.field_type}
                    id={'answer_' + index}
                    name="answer_input"
                    value={option.value[locale]}
                    onChange={onCheckboxChangeEvent}
                    className={quitFormStyles.checkBox}
                    data-answer={option.value['en']}
                    data-next={option.next} />
                }
                
                {/* ================================================================
                // Radio & CheckBox Label // 
                ================================================================ */}
                {(option.field_type === 'checkbox' || option.field_type === 'radio') && 
                <label
                  htmlFor={'answer_' + index}>
                    {option.field_type === 'checkbox' && <BsCheck size="16px" className={quitFormStyles.react_icons} />}
                    {option.value[locale]}
                </label>
                } 

                {/* ================================================================
                // DropDown Menu // 
                ================================================================ */}
                {option.field_type === 'dropdown' && 
                  <select name={option.key} id={'dropDownAnswer_' + index} className={`${quitFormStyles.dropDown} ${"dropDownMenu"}`} onChange={onDropDownChangeEvent} {...helpCopy && {'data-tooltip' : helpCopy}} >
                    <option value={option.value[locale]}>{option.value[locale]}</option>                  
                    {option.dropdown_options?.map((dropdown_option, index) => 
                      <option key={index} value={dropdown_option}>{dropdown_option}</option>
                    )}
                  </select>
                }

                {/* ================================================================
                // DropDown Menu // 
                ================================================================ */}
                {option.field_type === 'dob' && <div style={{backgroundColor: 'white', padding: '.25em 1em', borderRadius: '10px'}}>
                  <input type="text" placeholder="MM" style={{width: '2em', border: "0px solid white", borderBottom: "1px solid black"}} id="dob-month" name="dob-month" pattern="\d*" maxLength={2}/>
                  /
                  <input type="text" placeholder="DD" style={{width: '2em', border: "0px solid white", borderBottom: "1px solid black"}} id="dob-day" name="dob-day" pattern="\d*" maxLength={2}/> 
                  /
                  <input type="text" placeholder="YYYY" style={{width: '4em', border: "0px solid white", borderBottom: "1px solid black"}}id="dob-year" name="dob-year" pattern="\d*" maxLength={4}/>
                  </div>
                }

              </div>
          ))}
      </div>


      {/* ================================================================
      // Radio message_on_select // 
      ================================================================ */}
      
      <div style={{width: '100%'}}>
        {options.map((option: AnswerOption, index: any) => (
          option.field_type === 'radio' && option.message_on_select?.[locale] && radioSelection === option.value?.[locale] ? (
            <p key={index}
              className={quitFormStyles.message_on_select}
              dangerouslySetInnerHTML={{ __html: option.message_on_select[locale] }}
            />
          ) 
          : null
        ))}
      </div>

      {/* ================================================================
      // Error Message // 
      ================================================================ */}
      {showError &&
        <div id="error_message" className={quitFormStyles.error_message} dangerouslySetInnerHTML={{__html: errorMessage}}></div>
      }

      {/* ================================================================
      // Next Button // 
      ================================================================ */}
      {(!quickResponse) &&
        <div className={quitFormStyles.button_holder}>
          <button className={quitFormStyles.next_btn} onClick={onContinue}>{continueButton}</button>
        </div>
      }
      
    </>
  )
};
// ================================================= //


// ================================================= //
// Contact Details Form //
// ================================================= //
export function Contact_Details_Form(props: StandardFormProps) {

  // Determine locale //
  // ================================================= //
  const router = useRouter();
  const locale = router.locale === undefined ? 'en' : router.locale;

  // Use language Specific Text //
  // ================================================= //
  let question = props.currentQuestion_Data.question[locale];
  let requiredText = props.currentQuestion_Data.required_message[locale];
  let disclaimer = props.currentQuestion_Data.disclaimer_message[locale];
  let continueButton = props.uiButtons_Data.nextBtn[locale];
  // ================================================= //

  // Main Props //
  // ================================================= //
  let options = props.currentQuestion_Data.options;
  let onClickHandler = props.onClickHandler;

  // Default Error State //
  // ================================================= //
  let [errors, setErrors] = useState<{[key: string]: boolean}>({
    firstName: false,
    lastName: false,
    phoneNumber: false,
    email: false,
    zipCode: false,
    phoneCallConsent: false,
    smsConsent: false
  });

  // validates phone string 
  const validatePhone = (number: string) => {

    if ('555' == number.substring(0, 3) || '555' == number.substring(4, 7)) {
      return false;
    }

    let regex = new RegExp(/([2-9]{1}\d{2})-([2-9]{1}\d{2})-(\d{4})/);
    return ( regex.test(number) );
  };

  // Update Error State //
  // ================================================= //
  const updateError = (key: string, value: boolean) => {
    setErrors(existingValues => ({
      // Retain the existing values
      ...existingValues,
      // update the current field
      [key]: value,
    }))
  }

  // Clear Error State //
  // ================================================= //
  const clearErrors = () => {
    setErrors({
      firstName: false,
      lastName: false,
      phoneNumber: false,
      email: false,
      zipCode: false,
      phoneCallConsent: false,
      smsConsent: false
    });
  }
  

  useEffect(() => {
    
    // Set value for options if they exist in Answers already //
    // ================================================= //
    options.forEach((option) => {
      let el = (document.getElementById(option.key + '_answer') as HTMLInputElement);

      // Text and Number Inputs //
      if ( ['text', 'email', 'number'].includes(option.field_type) ) {
        el.value = props.answers[option.key];
      }
      // CheckBoxes and Radios //
      if(option.field_type == 'checkbox' || option.field_type == 'radio'){
        el.checked = props.answers[option.key];
      }
    });

  }, []);

  // ================================================= //
  // Continue Button Clicked //
  // ================================================= //
  const onClickEvent = () => {
    clearErrors();

    let next = props.currentQuestion_Data.next;
    let answers: any = {};
    let passRequired = true;

    // ================================================= //
    // Loop through ALL Answer Options for Current Question //
    // ================================================= //
    for (var i = 0, length = props.currentQuestion_Data.options.length; i < length; i++) {
      let q = props.currentQuestion_Data.options[i];
      let value: any;

      // ================================================= //
      // Field Type: Text / Email / Number //
      // ================================================= //
      if(['text', 'email', 'number'].includes(q.field_type)) {
        let el = (document.getElementById(q.key + '_answer') as HTMLInputElement);
        value = el.value;

        // Validation: FAIL = Empty Required Fields //
        // ================================================= //
        if (q.required && (value == undefined || value == '')) {
          updateError(q.key, true);
          passRequired = false;
        }

        // Validate ZIP Code //
        // ================================================= //
        if (q.key == 'zipCode') {
          // California ZIP Codes //
          // ================================================= //
          const CA_zips = ["90001", "90002", "90003", "90004", "90005", "90006", "90007", "90008", "90009", "90010", "90011", "90012", "90013", "90014", "90015", "90016", "90017", "90018", "90019", "90020", "90021", "90022", 
          "90023", "90024", "90025", "90026", "90027", "90028", "90029", "90030", "90031", "90032", "90033", "90034", "90035", "90036", "90037", "90038", "90039", "90040", "90041", "90042", "90043", "90044", "90045", "90046", 
          "90047", "90048", "90049", "90050", "90051", "90052", "90053", "90054", "90055", "90056", "90057", "90058", "90059", "90060", "90061", "90062", "90063", "90064", "90065", "90066", "90067", "90068", "90069", "90070", 
          "90071", "90072", "90073", "90074", "90075", "90076", "90077", "90078", "90079", "90080", "90081", "90082", "90083", "90084", "90086", "90087", "90088", "90089", "90091", "90093", "90094", "90095", "90096", "90099", 
          "90134", "90189", "90201", "90202", "90209", "90210", "90211", "90212", "90213", "90220", "90221", "90222", "90223", "90224", "90230", "90231", "90232", "90239", "90240", "90241", "90242", "90245", "90247", "90248", 
          "90249", "90250", "90251", "90254", "90255", "90260", "90261", "90262", "90263", "90264", "90265", "90266", "90267", "90270", "90272", "90274", "90275", "90277", "90278", "90280", "90290", "90291", "90292", "90293", 
          "90294", "90295", "90296", "90301", "90302", "90303", "90304", "90305", "90306", "90307", "90308", "90309", "90310", "90311", "90312", "90401", "90402", "90403", "90404", "90405", "90406", "90407", "90408", "90409", 
          "90410", "90411", "90501", "90502", "90503", "90504", "90505", "90506", "90507", "90508", "90509", "90510", "90601", "90602", "90603", "90604", "90605", "90606", "90607", "90608", "90609", "90610", "90620", "90621", 
          "90622", "90623", "90624", "90630", "90631", "90632", "90633", "90637", "90638", "90639", "90640", "90650", "90651", "90652", "90660", "90661", "90662", "90670", "90671", "90680", "90701", "90702", "90703", "90704", 
          "90706", "90707", "90710", "90711", "90712", "90713", "90714", "90715", "90716", "90717", "90720", "90721", "90723", "90731", "90732", "90733", "90734", "90740", "90742", "90743", "90744", "90745", "90746", "90747", 
          "90748", "90749", "90755", "90801", "90802", "90803", "90804", "90805", "90806", "90807", "90808", "90809", "90810", "90813", "90814", "90815", "90822", "90831", "90832", "90833", "90840", "90842", "90844", "90846", 
          "90847", "90848", "90853", "90895", "91001", "91003", "91006", "91007", "91008", "91009", "91010", "91011", "91012", "91016", "91017", "91020", "91021", "91023", "91024", "91025", "91030", "91031", "91040", "91041", 
          "91042", "91043", "91046", "91066", "91077", "91101", "91102", "91103", "91104", "91105", "91106", "91107", "91108", "91109", "91110", "91114", "91115", "91116", "91117", "91118", "91121", "91123", "91124", "91125", 
          "91126", "91129", "91182", "91184", "91185", "91188", "91189", "91199", "91201", "91202", "91203", "91204", "91205", "91206", "91207", "91208", "91209", "91210", "91214", "91221", "91222", "91224", "91225", "91226", 
          "91301", "91302", "91303", "91304", "91305", "91306", "91307", "91308", "91309", "91310", "91311", "91313", "91316", "91319", "91320", "91321", "91322", "91324", "91325", "91326", "91327", "91328", "91329", "91330", 
          "91331", "91333", "91334", "91335", "91337", "91340", "91341", "91342", "91343", "91344", "91345", "91346", "91350", "91351", "91352", "91353", "91354", "91355", "91356", "91357", "91358", "91359", "91360", "91361", 
          "91362", "91364", "91365", "91367", "91371", "91372", "91376", "91377", "91380", "91381", "91382", "91383", "91384", "91385", "91386", "91387", "91390", "91392", "91393", "91394", "91395", "91396", "91401", "91402", 
          "91403", "91404", "91405", "91406", "91407", "91408", "91409", "91410", "91411", "91412", "91413", "91416", "91423", "91426", "91436", "91470", "91482", "91495", "91496", "91499", "91501", "91502", "91503", "91504", 
          "91505", "91506", "91507", "91508", "91510", "91521", "91522", "91523", "91526", "91601", "91602", "91603", "91604", "91605", "91606", "91607", "91608", "91609", "91610", "91611", "91612", "91614", "91615", "91616", 
          "91617", "91618", "91701", "91702", "91706", "91708", "91709", "91710", "91711", "91714", "91715", "91716", "91722", "91723", "91724", "91729", "91730", "91731", "91732", "91733", "91734", "91735", "91737", "91739", 
          "91740", "91741", "91743", "91744", "91745", "91746", "91747", "91748", "91749", "91750", "91752", "91754", "91755", "91756", "91758", "91759", "91761", "91762", "91763", "91764", "91765", "91766", "91767", "91768", 
          "91769", "91770", "91771", "91772", "91773", "91775", "91776", "91778", "91780", "91784", "91785", "91786", "91788", "91789", "91790", "91791", "91792", "91793", "91801", "91802", "91803", "91804", "91896", "91899", 
          "91901", "91902", "91903", "91905", "91906", "91908", "91909", "91910", "91911", "91912", "91913", "91914", "91915", "91916", "91917", "91921", "91931", "91932", "91933", "91934", "91935", "91941", "91942", "91943", 
          "91944", "91945", "91946", "91948", "91950", "91951", "91962", "91963", "91976", "91977", "91978", "91979", "91980", "91987", "92003", "92004", "92007", "92008", "92009", "92010", "92011", "92013", "92014", "92018", 
          "92019", "92020", "92021", "92022", "92023", "92024", "92025", "92026", "92027", "92028", "92029", "92030", "92033", "92036", "92037", "92038", "92039", "92040", "92046", "92049", "92051", "92052", "92054", "92055", 
          "92056", "92057", "92058", "92059", "92060", "92061", "92064", "92065", "92066", "92067", "92068", "92069", "92070", "92071", "92072", "92074", "92075", "92078", "92079", "92081", "92082", "92083", "92084", "92085", 
          "92086", "92088", "92091", "92092", "92093", "92096", "92101", "92102", "92103", "92104", "92105", "92106", "92107", "92108", "92109", "92110", "92111", "92112", "92113", "92114", "92115", "92116", "92117", "92118", 
          "92119", "92120", "92121", "92122", "92123", "92124", "92126", "92127", "92128", "92129", "92130", "92131", "92132", "92134", "92135", "92136", "92137", "92138", "92139", "92140", "92142", "92143", "92145", "92147", 
          "92149", "92150", "92152", "92153", "92154", "92155", "92158", "92159", "92160", "92161", "92163", "92165", "92166", "92167", "92168", "92169", "92170", "92171", "92172", "92173", "92174", "92175", "92176", "92177", 
          "92178", "92179", "92182", "92186", "92187", "92191", "92192", "92193", "92195", "92196", "92197", "92198", "92199", "92201", "92202", "92203", "92210", "92211", "92220", "92222", "92223", "92225", "92226", "92227", 
          "92230", "92231", "92232", "92233", "92234", "92235", "92236", "92239", "92240", "92241", "92242", "92243", "92244", "92247", "92248", "92249", "92250", "92251", "92252", "92253", "92254", "92255", "92256", "92257", 
          "92258", "92259", "92260", "92261", "92262", "92263", "92264", "92266", "92267", "92268", "92270", "92273", "92274", "92275", "92276", "92277", "92278", "92280", "92281", "92282", "92283", "92284", "92285", "92286", 
          "92301", "92304", "92305", "92307", "92308", "92309", "92310", "92311", "92312", "92313", "92314", "92315", "92316", "92317", "92318", "92320", "92321", "92322", "92323", "92324", "92325", "92327", "92328", "92329", 
          "92331", "92332", "92333", "92334", "92335", "92336", "92337", "92338", "92339", "92340", "92341", "92342", "92344", "92345", "92346", "92347", "92350", "92352", "92354", "92356", "92357", "92358", "92359", "92363", 
          "92364", "92365", "92366", "92368", "92369", "92371", "92372", "92373", "92374", "92375", "92376", "92377", "92378", "92382", "92384", "92385", "92386", "92389", "92391", "92392", "92393", "92394", "92395", "92397", 
          "92398", "92399", "92401", "92402", "92403", "92404", "92405", "92406", "92407", "92408", "92410", "92411", "92413", "92415", "92418", "92423", "92427", "92501", "92502", "92503", "92504", "92505", "92506", "92507", 
          "92508", "92509", "92513", "92514", "92516", "92517", "92518", "92519", "92521", "92522", "92530", "92531", "92532", "92536", "92539", "92543", "92544", "92545", "92546", "92548", "92549", "92551", "92552", "92553", 
          "92554", "92555", "92556", "92557", "92561", "92562", "92563", "92564", "92567", "92570", "92571", "92572", "92581", "92582", "92583", "92584", "92585", "92586", "92587", "92589", "92590", "92591", "92592", "92593", 
          "92595", "92596", "92599", "92602", "92603", "92604", "92605", "92606", "92607", "92609", "92610", "92612", "92614", "92615", "92616", "92617", "92618", "92619", "92620", "92623", "92624", "92625", "92626", "92627", 
          "92628", "92629", "92630", "92637", "92646", "92647", "92648", "92649", "92650", "92651", "92652", "92653", "92654", "92655", "92656", "92657", "92658", "92659", "92660", "92661", "92662", "92663", "92672", "92673", 
          "92674", "92675", "92676", "92677", "92678", "92679", "92683", "92684", "92685", "92688", "92690", "92691", "92692", "92693", "92694", "92697", "92698", "92701", "92702", "92703", "92704", "92705", "92706", "92707", 
          "92708", "92711", "92712", "92728", "92735", "92780", "92781", "92782", "92799", "92801", "92802", "92803", "92804", "92805", "92806", "92807", "92808", "92809", "92811", "92812", "92814", "92815", "92816", "92817", 
          "92821", "92822", "92823", "92825", "92831", "92832", "92833", "92834", "92835", "92836", "92837", "92838", "92840", "92841", "92842", "92843", "92844", "92845", "92846", "92850", "92856", "92857", "92859", "92860", 
          "92861", "92862", "92863", "92864", "92865", "92866", "92867", "92868", "92869", "92870", "92871", "92877", "92878", "92879", "92880", "92881", "92882", "92883", "92885", "92886", "92887", "92899", "93001", "93002", 
          "93003", "93004", "93005", "93006", "93007", "93009", "93010", "93011", "93012", "93013", "93014", "93015", "93016", "93020", "93021", "93022", "93023", "93024", "93030", "93031", "93032", "93033", "93034", "93035", 
          "93036", "93040", "93041", "93042", "93043", "93044", "93060", "93061", "93062", "93063", "93064", "93065", "93066", "93067", "93094", "93099", "93101", "93102", "93103", "93105", "93106", "93107", "93108", "93109", 
          "93110", "93111", "93116", "93117", "93118", "93120", "93121", "93130", "93140", "93150", "93160", "93190", "93199", "93201", "93202", "93203", "93204", "93205", "93206", "93207", "93208", "93210", "93212", "93215", 
          "93216", "93218", "93219", "93220", "93221", "93222", "93223", "93224", "93225", "93226", "93227", "93230", "93232", "93234", "93235", "93237", "93238", "93239", "93240", "93241", "93242", "93243", "93244", "93245", 
          "93246", "93247", "93249", "93250", "93251", "93252", "93254", "93255", "93256", "93257", "93258", "93260", "93261", "93262", "93263", "93265", "93266", "93267", "93268", "93270", "93271", "93272", "93274", "93275", 
          "93276", "93277", "93278", "93279", "93280", "93282", "93283", "93285", "93286", "93287", "93290", "93291", "93292", "93301", "93302", "93303", "93304", "93305", "93306", "93307", "93308", "93309", "93311", "93312", 
          "93313", "93314", "93380", "93383", "93384", "93385", "93386", "93387", "93388", "93389", "93390", "93401", "93402", "93403", "93405", "93406", "93407", "93408", "93409", "93410", "93412", "93420", "93421", "93422", 
          "93423", "93424", "93426", "93427", "93428", "93429", "93430", "93432", "93433", "93434", "93435", "93436", "93437", "93438", "93440", "93441", "93442", "93443", "93444", "93445", "93446", "93447", "93448", "93449", 
          "93450", "93451", "93452", "93453", "93454", "93455", "93456", "93457", "93458", "93460", "93461", "93463", "93464", "93465", "93475", "93483", "93501", "93502", "93504", "93505", "93510", "93512", "93513", "93514", 
          "93515", "93516", "93517", "93518", "93519", "93522", "93523", "93524", "93526", "93527", "93528", "93529", "93530", "93531", "93532", "93534", "93535", "93536", "93539", "93541", "93542", "93543", "93544", "93545", 
          "93546", "93549", "93550", "93551", "93552", "93553", "93554", "93555", "93556", "93558", "93560", "93561", "93562", "93563", "93581", "93584", "93586", "93590", "93591", "93592", "93596", "93599", "93601", "93602", 
          "93603", "93604", "93605", "93606", "93607", "93608", "93609", "93610", "93611", "93612", "93613", "93614", "93615", "93616", "93618", "93619", "93620", "93621", "93622", "93623", "93624", "93625", "93626", "93627", 
          "93628", "93630", "93631", "93633", "93634", "93635", "93636", "93637", "93638", "93639", "93640", "93641", "93642", "93643", "93644", "93645", "93646", "93647", "93648", "93649", "93650", "93651", "93652", "93653", 
          "93654", "93656", "93657", "93660", "93661", "93662", "93664", "93665", "93666", "93667", "93668", "93669", "93670", "93673", "93675", "93701", "93702", "93703", "93704", "93705", "93706", "93707", "93708", "93709", 
          "93710", "93711", "93712", "93714", "93715", "93716", "93717", "93718", "93720", "93721", "93722", "93723", "93724", "93725", "93726", "93727", "93728", "93729", "93730", "93737", "93740", "93741", "93744", "93745", 
          "93747", "93750", "93755", "93760", "93761", "93764", "93765", "93771", "93772", "93773", "93774", "93775", "93776", "93777", "93778", "93779", "93786", "93790", "93791", "93792", "93793", "93794", "93844", "93888", 
          "93901", "93902", "93905", "93906", "93907", "93908", "93912", "93915", "93920", "93921", "93922", "93923", "93924", "93925", "93926", "93927", "93928", "93930", "93932", "93933", "93940", "93942", "93943", "93944", 
          "93950", "93953", "93954", "93955", "93960", "93962", "94002", "94005", "94010", "94011", "94014", "94015", "94016", "94017", "94018", "94019", "94020", "94021", "94022", "94023", "94024", "94025", "94026", "94027", 
          "94028", "94030", "94035", "94037", "94038", "94039", "94040", "94041", "94042", "94043", "94044", "94060", "94061", "94062", "94063", "94064", "94065", "94066", "94070", "94074", "94080", "94083", "94085", "94086", 
          "94087", "94088", "94089", "94102", "94103", "94104", "94105", "94107", "94108", "94109", "94110", "94111", "94112", "94114", "94115", "94116", "94117", "94118", "94119", "94120", "94121", "94122", "94123", "94124", 
          "94125", "94126", "94127", "94128", "94129", "94130", "94131", "94132", "94133", "94134", "94137", "94139", "94140", "94141", "94142", "94143", "94144", "94145", "94146", "94147", "94151", "94158", "94159", "94160", 
          "94161", "94163", "94164", "94172", "94177", "94188", "94203", "94204", "94205", "94206", "94207", "94208", "94209", "94211", "94229", "94230", "94232", "94234", "94235", "94236", "94237", "94239", "94240", "94244", 
          "94245", "94247", "94248", "94249", "94250", "94252", "94254", "94256", "94257", "94258", "94259", "94261", "94262", "94263", "94267", "94268", "94269", "94271", "94273", "94274", "94277", "94278", "94279", "94280", 
          "94282", "94283", "94284", "94285", "94287", "94288", "94289", "94290", "94291", "94293", "94294", "94295", "94296", "94297", "94298", "94299", "94301", "94302", "94303", "94304", "94305", "94306", "94309", "94401", 
          "94402", "94403", "94404", "94497", "94501", "94502", "94503", "94505", "94506", "94507", "94508", "94509", "94510", "94511", "94512", "94513", "94514", "94515", "94516", "94517", "94518", "94519", "94520", "94521", 
          "94522", "94523", "94524", "94525", "94526", "94527", "94528", "94529", "94530", "94531", "94533", "94534", "94535", "94536", "94537", "94538", "94539", "94540", "94541", "94542", "94543", "94544", "94545", "94546", 
          "94547", "94548", "94549", "94550", "94551", "94552", "94553", "94555", "94556", "94557", "94558", "94559", "94560", "94561", "94562", "94563", "94564", "94565", "94566", "94567", "94568", "94569", "94570", "94571", 
          "94572", "94573", "94574", "94575", "94576", "94577", "94578", "94579", "94580", "94581", "94582", "94583", "94585", "94586", "94587", "94588", "94589", "94590", "94591", "94592", "94595", "94596", "94597", "94598", 
          "94599", "94601", "94602", "94603", "94604", "94605", "94606", "94607", "94608", "94609", "94610", "94611", "94612", "94613", "94614", "94615", "94617", "94618", "94619", "94620", "94621", "94622", "94623", "94624", 
          "94649", "94659", "94660", "94661", "94662", "94666", "94701", "94702", "94703", "94704", "94705", "94706", "94707", "94708", "94709", "94710", "94712", "94720", "94801", "94802", "94803", "94804", "94805", "94806", 
          "94807", "94808", "94820", "94850", "94901", "94903", "94904", "94912", "94913", "94914", "94915", "94920", "94922", "94923", "94924", "94925", "94926", "94927", "94928", "94929", "94930", "94931", "94933", "94937", 
          "94938", "94939", "94940", "94941", "94942", "94945", "94946", "94947", "94948", "94949", "94950", "94951", "94952", "94953", "94954", "94955", "94956", "94957", "94960", "94963", "94964", "94965", "94966", "94970", 
          "94971", "94972", "94973", "94974", "94975", "94976", "94977", "94978", "94979", "94998", "94999", "95001", "95002", "95003", "95004", "95005", "95006", "95007", "95008", "95009", "95010", "95011", "95012", "95013", 
          "95014", "95015", "95017", "95018", "95019", "95020", "95021", "95023", "95024", "95026", "95030", "95031", "95032", "95033", "95035", "95036", "95037", "95038", "95039", "95041", "95042", "95043", "95044", "95045", 
          "95046", "95050", "95051", "95052", "95053", "95054", "95055", "95056", "95060", "95061", "95062", "95063", "95064", "95065", "95066", "95067", "95070", "95071", "95073", "95075", "95076", "95077", "95101", "95103", 
          "95106", "95108", "95109", "95110", "95111", "95112", "95113", "95115", "95116", "95117", "95118", "95119", "95120", "95121", "95122", "95123", "95124", "95125", "95126", "95127", "95128", "95129", "95130", "95131", 
          "95132", "95133", "95134", "95135", "95136", "95138", "95139", "95140", "95141", "95148", "95150", "95151", "95152", "95153", "95154", "95155", "95156", "95157", "95158", "95159", "95160", "95161", "95164", "95170", 
          "95172", "95173", "95190", "95191", "95192", "95193", "95194", "95196", "95201", "95202", "95203", "95204", "95205", "95206", "95207", "95208", "95209", "95210", "95211", "95212", "95213", "95214", "95215", "95219", 
          "95220", "95221", "95222", "95223", "95224", "95225", "95226", "95227", "95228", "95229", "95230", "95231", "95232", "95233", "95234", "95236", "95237", "95240", "95241", "95242", "95245", "95246", "95247", "95248", 
          "95249", "95251", "95252", "95253", "95254", "95255", "95257", "95258", "95267", "95269", "95296", "95297", "95301", "95303", "95304", "95305", "95306", "95307", "95309", "95310", "95311", "95312", "95313", "95315", 
          "95316", "95317", "95318", "95319", "95320", "95321", "95322", "95323", "95324", "95325", "95326", "95327", "95328", "95329", "95330", "95333", "95334", "95335", "95336", "95337", "95338", "95340", "95341", "95343", 
          "95344", "95345", "95346", "95347", "95348", "95350", "95351", "95352", "95353", "95354", "95355", "95356", "95357", "95358", "95360", "95361", "95363", "95364", "95365", "95366", "95367", "95368", "95369", "95370", 
          "95372", "95373", "95374", "95375", "95376", "95377", "95378", "95379", "95380", "95381", "95382", "95383", "95385", "95386", "95387", "95388", "95389", "95391", "95397", "95401", "95402", "95403", "95404", "95405", 
          "95406", "95407", "95409", "95410", "95412", "95415", "95416", "95417", "95418", "95419", "95420", "95421", "95422", "95423", "95424", "95425", "95426", "95427", "95428", "95429", "95430", "95431", "95432", "95433", 
          "95435", "95436", "95437", "95439", "95441", "95442", "95443", "95444", "95445", "95446", "95448", "95449", "95450", "95451", "95452", "95453", "95454", "95456", "95457", "95458", "95459", "95460", "95461", "95462", 
          "95463", "95464", "95465", "95466", "95467", "95468", "95469", "95470", "95471", "95472", "95473", "95476", "95480", "95481", "95482", "95485", "95486", "95487", "95488", "95490", "95492", "95493", "95494", "95497", 
          "95501", "95502", "95503", "95511", "95514", "95518", "95519", "95521", "95524", "95525", "95526", "95527", "95528", "95531", "95532", "95534", "95536", "95537", "95538", "95540", "95542", "95543", "95545", "95546", 
          "95547", "95548", "95549", "95550", "95551", "95552", "95553", "95554", "95555", "95556", "95558", "95559", "95560", "95562", "95563", "95564", "95565", "95567", "95568", "95569", "95570", "95571", "95573", "95585", 
          "95587", "95589", "95595", "95601", "95602", "95603", "95604", "95605", "95606", "95607", "95608", "95609", "95610", "95611", "95612", "95613", "95614", "95615", "95616", "95617", "95618", "95619", "95620", "95621", 
          "95623", "95624", "95625", "95626", "95627", "95628", "95629", "95630", "95631", "95632", "95633", "95634", "95635", "95636", "95637", "95638", "95639", "95640", "95641", "95642", "95644", "95645", "95646", "95648", 
          "95650", "95651", "95652", "95653", "95654", "95655", "95656", "95658", "95659", "95660", "95661", "95662", "95663", "95664", "95665", "95666", "95667", "95668", "95669", "95670", "95671", "95672", "95673", "95674", 
          "95675", "95676", "95677", "95678", "95679", "95680", "95681", "95682", "95683", "95684", "95685", "95686", "95687", "95688", "95689", "95690", "95691", "95692", "95693", "95694", "95695", "95696", "95697", "95698", 
          "95699", "95701", "95703", "95709", "95712", "95713", "95714", "95715", "95717", "95720", "95721", "95722", "95724", "95726", "95728", "95735", "95736", "95741", "95742", "95746", "95747", "95757", "95758", "95759", 
          "95762", "95763", "95765", "95776", "95798", "95799", "95811", "95812", "95813", "95814", "95815", "95816", "95817", "95818", "95819", "95820", "95821", "95822", "95823", "95824", "95825", "95826", "95827", "95828", 
          "95829", "95830", "95831", "95832", "95833", "95834", "95835", "95836", "95837", "95838", "95840", "95841", "95842", "95843", "95851", "95852", "95853", "95860", "95864", "95865", "95866", "95867", "95894", "95899", 
          "95901", "95903", "95910", "95912", "95913", "95914", "95915", "95916", "95917", "95918", "95919", "95920", "95922", "95923", "95924", "95925", "95926", "95927", "95928", "95929", "95930", "95932", "95934", "95935", 
          "95936", "95937", "95938", "95939", "95940", "95941", "95942", "95943", "95944", "95945", "95946", "95947", "95948", "95949", "95950", "95951", "95953", "95954", "95955", "95956", "95957", "95958", "95959", "95960", 
          "95961", "95962", "95963", "95965", "95966", "95967", "95968", "95969", "95970", "95971", "95972", "95973", "95974", "95975", "95976", "95977", "95978", "95979", "95980", "95981", "95982", "95983", "95984", "95986", 
          "95987", "95988", "95991", "95992", "95993", "96001", "96002", "96003", "96006", "96007", "96008", "96009", "96010", "96011", "96013", "96014", "96015", "96016", "96017", "96019", "96020", "96021", "96022", "96023", 
          "96024", "96025", "96027", "96028", "96029", "96031", "96032", "96033", "96034", "96035", "96037", "96038", "96039", "96040", "96041", "96044", "96046", "96047", "96048", "96049", "96050", "96051", "96052", "96054", 
          "96055", "96056", "96057", "96058", "96059", "96061", "96062", "96063", "96064", "96065", "96067", "96068", "96069", "96070", "96071", "96073", "96074", "96075", "96076", "96078", "96079", "96080", "96084", "96085", 
          "96086", "96087", "96088", "96089", "96090", "96091", "96092", "96093", "96094", "96095", "96096", "96097", "96099", "96101", "96103", "96104", "96105", "96106", "96107", "96108", "96109", "96110", "96111", "96112", 
          "96113", "96114", "96115", "96116", "96117", "96118", "96119", "96120", "96121", "96122", "96123", "96124", "96125", "96126", "96127", "96128", "96129", "96130", "96132", "96133", "96134", "96135", "96136", "96137", 
          "96140", "96141", "96142", "96143", "96145", "96146", "96148", "96150", "96151", "96152", "96154", "96155", "96156", "96157", "96158", "96160", "96161", "96162"];
          
          // Validation: FAIL = NOT California ZIP Code //
          // ================================================= //
          if (!CA_zips.includes(value)) {
            updateError('zipCode', true);
            passRequired = false;
          }
        }

        // Validate Email //
        // ================================================= //
        const validateEmail = (email: string) => {
          return email.match(
            /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          );
        };   
        if (q.key == 'email') {
          // Validation: FAIL =  Empty Email Field //
          // ================================================= //
          if (!validateEmail(value)) {
            updateError(q.key, true);
            passRequired = false;
          }
        }

        // Validate Phone Number //
        // ================================================= //
        if (q.key == 'phoneNumber') {
          if ( !validatePhone(value) ) {
            updateError(q.key, true);
            passRequired = false;
          }
        }

        // Update Answers Value //
        // ================================================= //
        answers[q.key] = value;
      }

      // ================================================= //
      // CheckBoxes Selected // 
      // ================================================= //
      if(q.field_type == 'checkbox'){
        let el = (document.getElementById(q.key + '_answer') as HTMLInputElement);
        answers[q.key] = el.checked;

        // Validation: FAIL = Required CheckBox, unChecked //
        // ================================================= //
        if (q.required && (el.checked !== true) ) {
          updateError(q.key, true);
          passRequired = false;
        }
      }


    }

    // ================================================= //
    // Send Answers and go to the Next Page //
    // ================================================= //
    if(passRequired){
      onClickHandler({
        answers: answers,
        next: next,
        api: props.currentQuestion_Data.api
      });
    }
  }

  // ================================================= //
  // Change Events: Form Inputs //
  // ================================================= //
  const onChangeEvent = (e: any) => {
    let key = e.target.id.replace('_answer', '');
    updateError(key, false);
    
    // Force Phone Number Formatting //
    // ================================================= //
    if(e.target.id == 'phoneNumber_answer'){
      e.target.value = e.target.value.replace(/^\D*(\d{0,3})\D*(\d{0,3})\D*(\d{0,4})/, (match: string, g1: string, g2: string, g3: string) => {
        let output = '';

        if (g1.length || match) {
          output += g1;
          if (g1.length === 3) {
            output += '-';
            if (g2.length) {
              output += '' + g2;
              if (g2.length === 3) {
                output += '-';
                if (g3.length) {
                  output += g3;
                }
              }
            }
          }
        }

        return output;
      }).substring(0, 12);
    }

    // Limit ZIP Code to 5 Digits //
    // ================================================= //
    if(e.target.id == 'zipCode_answer') {
      e.target.value = e.target.value.slice(0, 5);
    }
  }

  // ================================================= //
  // Show Help Copy //
  // ================================================= //
  let show_HelpCopy = false;
  const showHelpCopy = (e: any) => {
    let answerID = e.currentTarget.id.replace("helpIconBtn_","");
    let toolTipHolder = answerID + "_HelpCopy";
    let answerHolder = document.getElementById(toolTipHolder) as HTMLElement;

    answerHolder.className = quitFormStyles.toolTipHolder;
    show_HelpCopy = false;
  }
  // ================================================= //
  // Hide Help Copy //
  // ================================================= //
  const hideHelpCopy = (e: any) => {
    let answerID = e.currentTarget.id.replace("helpIconBtn_","");
    let toolTipHolder = answerID + "_HelpCopy";
    let answerHolder = document.getElementById(toolTipHolder) as HTMLElement;

    answerHolder.className = quitFormStyles.toolTipHolder_Hidden;
    show_HelpCopy = false;
  }
  // ================================================= //
  // Toggle Help Copy //
  // ================================================= //
  const toggleHelpCopy = (e: any) => {
    let answerID = e.currentTarget.id.replace("helpIconBtn_","");
    let toolTipHolder = answerID + "_HelpCopy";
    let answerHolder = document.getElementById(toolTipHolder) as HTMLElement;

    if (show_HelpCopy) {
      answerHolder.className = quitFormStyles.toolTipHolder_Hidden;
      show_HelpCopy = false;
    } else {
      answerHolder.className = quitFormStyles.toolTipHolder;
      show_HelpCopy = true;
    }
  }
  
  return (
    <>
      {/* ================================================================
        // Question // 
        ================================================================ */}
      
      { (router.query.srcCode === 'JVR0' ||
         router.query.srcCode === 'JVR1' ||
         router.query.srcCode === 'JVR2' ||
         router.query.srcCode === 'JVR14'||
         router.query.srcCode === 'JVR17'||
         router.query.srcCode === 'JVR46'||
         router.query.srcCode === 'MEM'  ||
         router.query.srcCode === 'MEM26'||
         router.query.srcCode === 'MEM16'||
         router.query.srcCode === 'MEM75'||
         router.query.srcCode === 'MEM24'
        )
        && locale === 'en' ? ( 
        <div className={quitFormStyles.question_holder}>
            <p>
              Free Phone Coaching
              <br/>
              Free Nicotine Patches
              <br/>
              <span style={{fontSize: '.5em', position: 'relative', top: '-.5em'}}>While supplies last. Eligibility requirements apply.</span>
            </p>
          </div>
      ) : ''}

      { (router.query.srcCode === 'JVR0' ||
         router.query.srcCode === 'JVR1' ||
         router.query.srcCode === 'JVR2' ||
         router.query.srcCode === 'JVR14'||
         router.query.srcCode === 'JVR17'||
         router.query.srcCode === 'JVR46'||
         router.query.srcCode === 'MEM'  ||
         router.query.srcCode === 'MEM26'||
         router.query.srcCode === 'MEM16'||
         router.query.srcCode === 'MEM75'||
         router.query.srcCode === 'MEM24'
        ) && locale === 'es' ? (
        <div className={quitFormStyles.question_holder}>
            <p>
              Asesoramiento telefónico gratuito
              <br/>
              Parches de nicotina gratuitos
              <br/>
              <span style={{fontSize: '.5em', position: 'relative', top: '-.5em'}}>Hasta agotar existencias. Se aplican requisitos de elegibilidad.</span>
            </p>
          </div>
      ) : ''}

      { (router.query.srcCode !== 'JVR0' &&
         router.query.srcCode !== 'JVR1' &&
         router.query.srcCode !== 'JVR2' &&
         router.query.srcCode !== 'MEM'  &&
         router.query.srcCode !== 'MEM26'
        ) ? (
        <div className={quitFormStyles.question_holder}>
          <p>{question}</p>
        </div>
      ) : ''}


      {/* ================================================================
        // Answers // 
        ================================================================ */}
      <div className={quitFormStyles.contact_info_answers_holder}>

        {options.map((option: AnswerOption, index: any) => (          
          <div key={index} className={(option.field_type === 'checkbox') ? quitFormStyles.checkBox_holder : quitFormStyles.text_holder}>

            {/* // Form Input // 
            ================================================================ */}
            <input 
            type={option.field_type} 
            id={option.key + '_answer'} 
            name="answer_input"
            onChange={onChangeEvent}
            placeholder={(option.required === true) ? option.value[locale] + " *" : option.value[locale]} 
            className={(option.field_type === 'checkbox') ? quitFormStyles.checkBox : (errors[option.key]) ? quitFormStyles.text_error : quitFormStyles.text} />

            {/* // Error Icon // 
            ================================================================ */}
            { errors[option.key] && (option.field_type === 'text' || option.field_type === 'number' || option.field_type === 'email') && <BsX size="18px" id={option.key + '_error'} className={quitFormStyles.error_icon}/>}

            {/* Help Copy Icon // 
            ================================================================ */}
            {option.help_copy && 
            <button id={'helpIconBtn_' + option.key} className={errors[option.key] ? quitFormStyles.helpIconBtnError : quitFormStyles.helpIconBtn} 
              onMouseOver={showHelpCopy} 
              onMouseOut={hideHelpCopy}
              onBlur={hideHelpCopy}
              onClick={toggleHelpCopy}>
              <MdInfo size="24px" className={quitFormStyles.react_icons} />
            </button>          
            }
            
            {/* // CheckBox Labels // 
            ================================================================ */}
            {(option.field_type === 'checkbox') && <label htmlFor={option.key + '_answer'}>{option.value[locale]}</label>}
            
            {/* // Help Copy ToolTips // 
            ================================================================ */}
            {option.help_copy && 
              <div id={option.key + "_HelpCopy"} className={quitFormStyles.toolTipHolder_Hidden} data-tooltip={option.help_copy[locale]} ></div>
            }

            {/* // Error Mesage //
            ================================================================ */}
            {(option.required && errors[option.key]) && 
              <div id={option.key + "_error"} className={quitFormStyles.error_message} dangerouslySetInnerHTML={{__html: option.error_message[locale]}}></div>
            }

          </div>
        ))}

        <p className={quitFormStyles.required}>{requiredText}</p>
      </div>

      {/* ================================================================
      // Disclaimer // 
      ================================================================ */}
      <div className={quitFormStyles.disclaimer} dangerouslySetInnerHTML={{__html: String(disclaimer)}} />

      {/* ================================================================
        // Next Button // 
        ================================================================ */}
      <div className={quitFormStyles.button_holder}>
        <button className={quitFormStyles.next_btn} onClick={onClickEvent}>{continueButton}</button>
      </div>
    </>
  )
};
// ================================================= //


// ================================================= //
// Mailing Address Form //
// ================================================= //
export function Mailing_Address_Form(props: StandardFormProps) {

  // Determine locale //
  // ================================================= //
  const router = useRouter();
  const locale = router.locale === undefined ? 'en' : router.locale;

  // Use language Specific Text //
  // ================================================= //
  let question = props.currentQuestion_Data.question[locale];
  let requiredText = props.currentQuestion_Data.required_message[locale];
  let continueButton = props.uiButtons_Data.nextBtn[locale];
  // ================================================= //

  // Main Props //
  // ================================================= // 
  let options = props.currentQuestion_Data.options;
  let onClickHandler = props.onClickHandler;

  // Default Error State //
  // ================================================= //
  let [errors, setErrors] = useState<{ [key: string]: boolean }>({
    mailing_coAttn: false,
    mailing_addressLine1: false,
    mailing_addressLine2: false,
    mailing_city: false,
    mailing_zipCode: false,
    mailing_stateCode: false,
    mailing_acknowledgement: false
  });

  // Update Error State //
  // ================================================= //
  const updateError = (key: string, value: boolean) => {
    setErrors(existingValues => ({
      // Retain the Existing Values //
      ...existingValues,
      // Update the Current Field //
      [key]: value,
    }))
  }
  
  // Clear Error State //
  // ================================================= //
  const clearErrors = () => {
    setErrors({
      firstName: false,
      lastName: false,
      phoneNumber: false,
      email: false,
      zipCode: false,
      phoneCallConsent: false,
      smsConsent: false
    });
  }

  useEffect(() => {
    // Set value for options if they exist in Answers already //
    // ================================================= //  
    options.forEach((option) => {
      let el = (document.getElementById(option.key + '_answer') as HTMLInputElement);

      // Text and Number Inputs //
      if ( ['text', 'email', 'number'].includes(option.field_type) ) {
        el.value = props.answers[option.key];
      }
      // CheckBoxes //
      if(option.field_type == 'checkbox'){
        el.checked = props.answers[option.key];
      }

    });

  }, []);

  // ================================================= //
  // Continue Button Clicked //
  // ================================================= //
  const onClickEvent = () => {
    clearErrors();

    let next = props.currentQuestion_Data.next;
    let answers: any = {};
    let passRequired = true;

    // ================================================= //
    // Loop through ALL Answer Options for Current Question //
    // ================================================= //
    for (var i = 0, length = props.currentQuestion_Data.options.length; i < length; i++) {
      let q = props.currentQuestion_Data.options[i];
      let value: any;

      // ================================================= //
      // Field Type: Text / Email / Number //
      // ================================================= //
      if(['text', 'email', 'number'].includes(q.field_type)) {
        let el = (document.getElementById(q.key + '_answer') as HTMLInputElement);
        value = el.value;

        // Validation: FAIL = Empty Required Fields //
        // ================================================= //
        if (q.required && (value == undefined || value == '')) {
          updateError(q.key, true);
          passRequired = false;
        }

        // Validate ZIP Code //
        // ================================================= //
        if (q.key == 'mailing_zipCode') {
          // Validation: FAIL = ZIP Code does NOT have enough numbers //
          // ================================================= //
          if (value.length < 5) {
            updateError(q.key, true);
            passRequired = false;
          }
        }

        // Update Answers Value //
        // ================================================= //
        answers[q.key] = value;
      }

      // ================================================= //
      // CheckBoxes Selected // 
      // ================================================= //
      if(q.field_type == 'checkbox'){
        let el = (document.getElementById(q.key + '_answer') as HTMLInputElement);
        answers[q.key] = el.checked;

        // Validation: FAIL = Required CheckBox, unChecked //
        // ================================================= //
        if (q.required && (el.checked !== true) ) {
          updateError(q.key, true);
          passRequired = false;
        }
      }

      // ================================================= //
      // State DropDown Selection //
      // ================================================= //
      if(q.field_type == 'dropdown'){
        var dropDown = document.getElementsByTagName("select")[0];
        var dropDown_SelectedIndex = 0;

        if (dropDown && dropDown.selectedIndex > 0) {
          // Validation: DropDown Selected, Update Answers // 
          // ================================================= //
          dropDown_SelectedIndex = dropDown.selectedIndex;
          var dropDown_answer = dropDown.options[dropDown_SelectedIndex].text;
          answers[q.key] = dropDown_answer;
        } else if (dropDown && dropDown.selectedIndex < 1) {
          // Validation: FAIL = DropDown NOT Selected // 
          // ================================================= //
          updateError(q.key, true);
          passRequired = false;
        }
      }

    }
    
    // ================================================= //
    // Send Answers and go to the Next Page //
    // ================================================= //
    if(passRequired){
      onClickHandler({
        answers: answers,
        next: next,
        api: props.currentQuestion_Data.api
      });
    }
  }

  // ================================================= //
  // Change Events: Form Inputs //
  // ================================================= //  
  const onChangeEvent = (e: any) => {

    // Limit ZIP Code to 5 Digits //
    // ================================================= //
    if(e.target.id == 'mailing_zipCode_answer') {
      e.target.value = e.target.value.slice(0, 5);
    }

  }

  return (
    <>
      {/* ================================================================
        // Question // 
        ================================================================ */}
      <div className={quitFormStyles.question_holder}>
        <p>{question}</p>
      </div>

      {/* ================================================================
        // Answers // 
        ================================================================ */}
      <div className={quitFormStyles.contact_info_answers_holder}>

        {options.map((option: AnswerOption, index: any) => (          
          <div key={index} className={(option.field_type === 'checkbox') ? quitFormStyles.checkBox_holder : quitFormStyles.text_holder} >

            {/* ================================================================
            // Form Elements // 
            ================================================================ */}
            {option.field_type === 'dropdown' ? 
              // DropDown Menu // 
              // ================================================= //
              <select name={option.key} id={'dropDownAnswer_' + index} className={`${quitFormStyles.dropDown} ${"dropDownMenu"}`} >
                <option value={option.value[locale]}>{option.required === true ? option.value[locale] + " *" : option.value[locale]}</option>                  
                {option.dropdown_options?.map((dropdown_option, index) => 
                  <option key={index} value={dropdown_option}>{dropdown_option}</option>
                )}
              </select>
            :
              // Inputs: text, number, radio, checkbox // 
              // ================================================= //
              <input 
              type={option.field_type} 
              id={option.key + '_answer'} 
              name="answer_input"
              onChange={onChangeEvent}
              placeholder={option.required === true ? option.value[locale] + " *" : option.value[locale]} 
              className={(option.field_type === 'checkbox') ? quitFormStyles.checkBox : (errors[option.key]) ? quitFormStyles.text_error : quitFormStyles.text} />
            }

            {/* // Error Icon //
            ================================================================ */}
            {errors[option.key] && (option.field_type === 'text' || option.field_type === 'number' || option.field_type === 'email') && <BsX size="18px" className={quitFormStyles.error_icon}/>}

            {/* // CheckBox Labels // 
            ================================================================ */}
            {(option.field_type === 'checkbox') && <label htmlFor={option.key + '_answer'}>{option.required === true ? option.value[locale] + " *" : option.value[locale]}</label>}

            {/* // Error Mesage // 
            ================================================================ */}
            {errors[option.key] && (option.required || option.validation) && 
              <div id={option.key + "_error"} className={quitFormStyles.error_message}>
                {option.error_message[locale]}
              </div>
            }

          </div>
        ))}

        {/* // Required Message // 
        ================================================================ */}
        <p className={quitFormStyles.required}>{requiredText}</p>
        
      </div>

      {/* ================================================================
        // Next Button // 
        ================================================================ */}
      <div className={quitFormStyles.button_holder}>
        <button className={quitFormStyles.next_btn} onClick={onClickEvent}>{continueButton}</button>
      </div>
    </>
  )
};
// ================================================= //

/*
const localTestDates =
{
    "Saturday, June 7, 2025": [
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM"
    ],
    "Monday, June 9, 2025": [
        "7:00 AM",
        "7:15 AM",
        "7:30 AM",
        "7:45 AM",
        "8:00 AM",
        "8:15 AM",
        "8:30 AM",
        "8:45 AM",
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM",
        "4:30 PM",
        "4:45 PM",
        "5:00 PM",
        "5:15 PM",
        "5:30 PM",
        "5:45 PM",
        "6:00 PM",
        "6:15 PM",
        "6:30 PM",
        "6:45 PM",
        "7:00 PM",
        "7:15 PM",
        "7:30 PM",
        "7:45 PM",
        "8:00 PM",
        "8:15 PM"
    ],
    "Tuesday, June 10, 2025": [
        "8:00 AM",
        "8:15 AM",
        "8:30 AM",
        "8:45 AM",
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM",
        "4:30 PM",
        "4:45 PM",
        "5:00 PM",
        "5:15 PM",
        "5:30 PM",
        "5:45 PM",
        "6:00 PM",
        "6:15 PM",
        "6:30 PM",
        "6:45 PM",
        "7:00 PM",
        "7:15 PM",
        "7:30 PM",
        "7:45 PM",
        "8:00 PM",
        "8:15 PM"
    ],
    "Wednesday, June 11, 2025": [
        "8:00 AM",
        "8:15 AM",
        "8:30 AM",
        "8:45 AM",
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM",
        "4:30 PM",
        "4:45 PM",
        "5:00 PM",
        "5:15 PM",
        "5:30 PM",
        "5:45 PM",
        "6:00 PM",
        "6:15 PM",
        "6:30 PM",
        "6:45 PM",
        "7:00 PM",
        "7:15 PM",
        "7:30 PM",
        "7:45 PM",
        "8:00 PM",
        "8:15 PM"
    ],
    "Thursday, June 12, 2025": [
        "8:00 AM",
        "8:15 AM",
        "8:30 AM",
        "8:45 AM",
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM",
        "4:30 PM",
        "4:45 PM",
        "5:00 PM",
        "5:15 PM",
        "5:30 PM",
        "5:45 PM",
        "6:00 PM",
        "6:15 PM",
        "6:30 PM",
        "6:45 PM",
        "7:00 PM",
        "7:15 PM",
        "7:30 PM",
        "7:45 PM",
        "8:00 PM",
        "8:15 PM"
    ],
    "Friday, June 13, 2025": [
        "8:00 AM",
        "8:15 AM",
        "8:30 AM",
        "8:45 AM",
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM"
    ],
    "Saturday, June 14, 2025": [
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM"
    ]
}

const esDates = {
    "sábado, 7 de junio de 2025": [
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM"
    ],
    "lunes, 9 de junio de 2025": [
        "7:00 AM",
        "7:15 AM",
        "7:30 AM",
        "7:45 AM",
        "8:00 AM",
        "8:15 AM",
        "8:30 AM",
        "8:45 AM",
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM",
        "4:30 PM",
        "4:45 PM",
        "5:00 PM",
        "5:15 PM",
        "5:30 PM",
        "5:45 PM",
        "6:00 PM",
        "6:15 PM",
        "6:30 PM",
        "6:45 PM",
        "7:00 PM",
        "7:15 PM",
        "7:30 PM",
        "7:45 PM",
        "8:00 PM",
        "8:15 PM"
    ],
    "martes, 10 de junio de 2025": [
        "7:00 AM",
        "7:15 AM",
        "7:30 AM",
        "7:45 AM",
        "8:00 AM",
        "8:15 AM",
        "8:30 AM",
        "8:45 AM",
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM",
        "4:30 PM",
        "4:45 PM",
        "5:00 PM",
        "5:15 PM",
        "5:30 PM",
        "5:45 PM",
        "6:00 PM",
        "6:15 PM",
        "6:30 PM",
        "6:45 PM",
        "7:00 PM",
        "7:15 PM",
        "7:30 PM",
        "7:45 PM",
        "8:00 PM",
        "8:15 PM"
    ],
    "miércoles, 11 de junio de 2025": [
        "7:00 AM",
        "7:15 AM",
        "7:30 AM",
        "7:45 AM",
        "8:00 AM",
        "8:15 AM",
        "8:30 AM",
        "8:45 AM",
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM",
        "4:30 PM",
        "4:45 PM",
        "5:00 PM",
        "5:15 PM",
        "5:30 PM",
        "5:45 PM",
        "6:00 PM",
        "6:15 PM",
        "6:30 PM",
        "6:45 PM",
        "7:00 PM",
        "7:15 PM",
        "7:30 PM",
        "7:45 PM",
        "8:00 PM",
        "8:15 PM"
    ],
    "jueves, 12 de junio de 2025": [
        "7:00 AM",
        "7:15 AM",
        "7:30 AM",
        "7:45 AM",
        "8:00 AM",
        "8:15 AM",
        "8:30 AM",
        "8:45 AM",
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM",
        "4:30 PM",
        "4:45 PM",
        "5:00 PM",
        "5:15 PM",
        "5:30 PM",
        "5:45 PM",
        "6:00 PM",
        "6:15 PM",
        "6:30 PM",
        "6:45 PM",
        "7:00 PM",
        "7:15 PM",
        "7:30 PM",
        "7:45 PM",
        "8:00 PM",
        "8:15 PM"
    ],
    "viernes, 13 de junio de 2025": [
        "7:00 AM",
        "7:15 AM",
        "7:30 AM",
        "7:45 AM",
        "8:00 AM",
        "8:15 AM",
        "8:30 AM",
        "8:45 AM",
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM",
        "4:30 PM",
        "4:45 PM",
        "5:00 PM",
        "5:15 PM",
        "5:30 PM",
        "5:45 PM",
        "6:00 PM",
        "6:15 PM",
        "6:30 PM",
        "6:45 PM",
        "7:00 PM",
        "7:15 PM",
        "7:30 PM",
        "7:45 PM",
        "8:00 PM",
        "8:15 PM"
    ],
    "sábado, 14 de junio de 2025": [
        "9:00 AM",
        "9:15 AM",
        "9:30 AM",
        "9:45 AM",
        "10:00 AM",
        "10:15 AM",
        "10:30 AM",
        "10:45 AM",
        "11:00 AM",
        "11:15 AM",
        "11:30 AM",
        "11:45 AM",
        "12:00 PM",
        "12:15 PM",
        "12:30 PM",
        "12:45 PM",
        "1:00 PM",
        "1:15 PM",
        "1:30 PM",
        "1:45 PM",
        "2:00 PM",
        "2:15 PM",
        "2:30 PM",
        "2:45 PM",
        "3:00 PM",
        "3:15 PM",
        "3:30 PM",
        "3:45 PM",
        "4:00 PM",
        "4:15 PM"
    ]
}*/


// ================================================= //
// Calendar Form //
// ================================================= //
export function Calendar_Form(props: CalendarFormProps) {

  // Determine locale //
  // ================================================= //
  const router = useRouter();
  const locale = router.locale === undefined ? 'en' : router.locale;

  // Use language Specific Text //
  // ================================================= //
  let question = props.currentQuestion_Data.question[locale];
  let noApptMessage = props.currentQuestion_Data.help_copy[locale];
  let continueButton = props.uiButtons_Data.nextBtn[locale];
  // ================================================= //

  // Main Props //
  // ================================================= //
  let onClickHandler = props.onClickHandler;

  // ================================================= //
  /* Get _Soonest_ Available Date + _Soonest_ Available Time */ 
  // ================================================= //
  const today = new Date();
  const [date, setDate] = useState(today);
  const key = date.toLocaleDateString('en-us', { weekday: "long", year: "numeric", month: "long", day: "numeric" });
  const todaysTimes = (props.dates && props.dates[key] != undefined) ? props.dates[key] : [];
  const [times, setTimes] = useState<any[]>(todaysTimes);
  const [selectedTime, setSelectedTime] = useState<string>('');

  const findEarliestDate = (datesObj: any) => {
    const dateKeys = Object.keys(datesObj);
    const parsedTimestamps = dateKeys.map(dateStr => new Date(dateStr).getTime());
    const earliestTimestamp = Math.min(...parsedTimestamps);
    return new Date(earliestTimestamp); 
  }

  function convertEnglishDateKeysToSpanish(dateStr: string) {
    const formatter = new Intl.DateTimeFormat('es-ES', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      timeZone: 'UTC',
    });

    /*const converted: Record<string, string[]> = {};

    for (const dateStr of Object.keys(dateMap)) {
      // Parse the English date string into a Date object
      const utcDate = new Date(dateStr);
      
      // Format it to Spanish
      const spanishDateStr = formatter.format(utcDate); // e.g., "sábado, 14 de junio de 2025"

      converted[spanishDateStr] = dateMap[dateStr];
    }*/

    const utcDate = new Date(dateStr);

    const spanishDateStr = formatter.format(utcDate); 

    return spanishDateStr;
  }


 function convertSpanishDateKeysToEnglish(dateMap: any) {
    const formatter = new Intl.DateTimeFormat('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      timeZone: 'UTC',
    });

    const monthMap = {
      enero: 0,
      febrero: 1,
      marzo: 2,
      abril: 3,
      mayo: 4,
      junio: 5,
      julio: 6,
      agosto: 7,
      septiembre: 8,
      octubre: 9,
      noviembre: 10,
      diciembre: 11,
    };

    const converted: Record<string, string[]> = {};


    for (const dateStr of Object.keys(dateMap)) {
      const normalized = dateStr.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
      const parts = normalized.split(',')[1].trim(); // e.g. "14 de junio de 2025"
      const [dayStr, , monthStr, , yearStr] = parts.split(' ');

      const day = parseInt(dayStr, 10);
      const month = monthMap[monthStr as keyof typeof monthMap];
      const year = parseInt(yearStr, 10);

      const utcDate = new Date(Date.UTC(year, month, day));
      const englishDateStr = formatter.format(utcDate);

      converted[englishDateStr] = dateMap[dateStr];
    }

    return converted;
  }

  // Set earliest available date
  useEffect(() => {
    let earliestDate;
    if (props.dates !== undefined && props.dates !== null) {
      earliestDate = locale === 'en' ? findEarliestDate(props.dates) : findEarliestDate(convertSpanishDateKeysToEnglish(props.dates));
    }
    setDate(props.dates ? earliestDate ?? new Date() : new Date());
  }, [props.dates]);


  // Set available times when date or dates change
  useEffect(() => {
    let key = date.toLocaleDateString('en-us', { weekday: "long", year: "numeric", month: "long", day: "numeric" });
    if (router.locale === 'es') {
      key = convertEnglishDateKeysToSpanish(key);
    }

    setTimes((props.dates && props.dates[key]) ? props.dates[key] : []);
  }, [props.dates, date]);

  // ================================================= //
  /* Get Current Month and the Following Month to 
     Toggle Month Nav Buttons ON or OFF */
  // ================================================= //
  let currentMonth: number = Number(today.toLocaleDateString('en-us', { month: "numeric" })) - 1;
  const currentDay: number = Number(today.toLocaleDateString('en-us', { day: "numeric" }));
  let currentYear: number = Number(today.toLocaleDateString('en-us', { year: "numeric" }));
  let followingMonth: number = 0;

  // Current Month = December? //
  // ================================================= //
  if (currentMonth == 12) {
    // Following Month = Janurary //
    followingMonth = 1;
    // Current Year = Following Year //
    currentYear = currentYear + 1;
   } else {
    // Following Month = Increment Current Month Numbe //
    followingMonth = currentMonth + 1;
   }

  // Limit Date Picking Range: Min and Max Dates //
  // ================================================= //
   let minDate = new Date(currentYear, currentMonth, currentDay);
   let maxDate = new Date(currentYear, followingMonth, currentDay);

  // ================================================= //
  // Continue Button Clicked //
  // ================================================= //
  const onClickEvent = () => {
    // No Appt Time: Prevent from moving forward //
    // ================================================= // 
    if('' == selectedTime){
      return false;
    }

    // Set Appointment //
    // ================================================= // 
    const day = date.toLocaleDateString('en-us', { weekday: "long", year: "numeric", month: "long", day: "numeric" });
    const appointment = day + ' ' + selectedTime;

    // ================================================= //
    // Send Answers and go to the Next Page //
    // ================================================= //
    onClickHandler({
      field: props.currentQuestion_Data.property,
      selectedAppointment: appointment,
      next: props.currentQuestion_Data.next,
      api: props.currentQuestion_Data.api
    });
  }

  // ================================================= //
  // Date Selected //
  // ================================================= //   
  const onDateSelect = (value: any) => {
    let key = value.toLocaleDateString('en-us', { weekday: "long", year: "numeric", month: "long", day: "numeric" });

    if (router.locale === 'es') {
      key = convertEnglishDateKeysToSpanish(key);
    }
    console.log(key);
    const times = props.dates !== undefined ? props.dates[key] : [];
    
    setDate(value);
    setSelectedTime('');
    setTimes(times);
  }

  // ================================================= //
  // Time Selected //
  // ================================================= //   
  const onTimeSelect = (time: string) => {
    setSelectedTime(time);
  }

  const capitalizeFirstLetter = (string: string) => {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }

  const formatMonthYear = (locale: string, date: string) => {
    let d = new Date(date);

    let filteredDate = d.toLocaleDateString(locale + '-US', {
      month: 'long',
      year: 'numeric',
    });

    return capitalizeFirstLetter(filteredDate.replace(' de ', ' ')); // change octubre de 2022 to Octubre 2022

  }

  return (
    <>
      {/* ================================================================
      // Question // 
      ================================================================ */}
      <div className={quitFormStyles.question_holder}>
        <p>{question}</p>
      </div>

      <div className={quitFormStyles.appointment_scheduler_container}>

        {/* ================================================================
        // Calendar // 
        ================================================================ */} 
        <CalendarContainer>
          <Calendar
            calendarType="US"
            locale={locale}
            formatMonthYear={formatMonthYear}
            onChange={onDateSelect}
            maxDetail="month"
            minDetail="month"
            view="month"
            value={date}
            minDate={minDate}
            maxDate={maxDate}
            nextLabel={<BsChevronRight size="16px" className={quitFormStyles.react_icons} />}
            next2Label={null}
            next2AriaLabel={null}
            prevLabel={<BsChevronLeft size="16px" className={quitFormStyles.react_icons}/>}
            prev2Label={null}
            prev2AriaLabel={null}
            showNeighboringMonth={false}
          />
        </CalendarContainer>

        <div className={quitFormStyles.spacer}></div>
        
        {/* ================================================================
        // Available Times // 
        ================================================================ */}
        <AvailableTimesContainer>
          <>
          {props.dates && props.dates.length == 0 && <h3 style={{color:"#ffffff"}}>Loading...</h3>}

          {times != undefined ? 
            times.map((time: any, index: any) => (
              <div key={index} className={`${quitFormStyles.appointment_time} ${(time == selectedTime) ? quitFormStyles.active : ''}`} onClick={() => {onTimeSelect(time)}}>{time}</div>
            ))
            :
            // No Available Times Message //
            // ================================================= //
            <p>{noApptMessage}</p>
          }

          {/* No Available Times Message // 
          ================================================================ */}
          {(times != undefined && times.length < 1) && <p>{noApptMessage}</p>}
          </>
        </AvailableTimesContainer>
          
      </div>

      {/* ================================================================
      // Next Button // 
      ================================================================ */}
      <div className={quitFormStyles.button_holder}>
        <button className={quitFormStyles.next_btn} onClick={onClickEvent}>{continueButton}</button>
      </div>
    </>
  )
};
// ================================================= //


// ================================================= //
// Message Form //
// ================================================= //
export function Message_Form(props: MessageFormProps) {

  // Determine locale //
  // ================================================= //
  const router = useRouter();
  const locale = router.locale === undefined ? 'en' : router.locale;
  
  // Use language Specific Text //
  // ================================================= //
  let main_message = props.currentQuestion_Data.question[locale];
  let appt_false_message = props.currentQuestion_Data.options[0].value[locale];
  let appt_true_message = props.currentQuestion_Data.options[1].value[locale];
  let closeButton = props.uiButtons_Data.exitBtn[locale];

  // Get Scheduled Appointment Date //
  // ================================================= //
  const formatAppointmentDate = (dateString: string) => {
    if(locale == 'en') return dateString; // english is fine from server, only need to update for ES

    let msec = Date.parse(dateString);
    let d = new Date(msec);

    let weekdays = [
      'domingo',
      'lunes',
      'martes',
      'miércoles',
      'jueves',
      'viernes',
      'sábado'
    ];

    let months = [
      'enero', 
      'febrero', 
      'marzo', 
      'abril', 
      'mayo', 
      'junio', 
      'julio', 
      'agosto', 
      'septiembre', 
      'octubre', 
      'noviembre', 
      'diciembre'
    ];

    let day = weekdays[d.getDay()];
    let date = d.getDate();
    let month = months[d.getMonth()];
    let year = d.getFullYear();
    let h = d.getHours();
    let m = d.getMinutes();
    let minutes = (m < 10) ? '0'+m : String(m); // return 0-59, prefix with 0 if 1-9
    let ampm = (h>12)? 'pm' : 'am';
    let hours = (h>12) ? String(h - 12) : String(h);
    let time = hours+':'+minutes+ampm;

    // //  {day}, {date} de {year}, a la/las {time}.
    let esFormatDate = day + ', ' + date + ' de ' + month + ' de ' + year + ', a las ' + time;
    if(day == undefined) {
      esFormatDate = "";
    }
    return esFormatDate;
  }


  let appointmentDate = formatAppointmentDate(props.appointmentSchedule);

  // Add Scheulded Appointment Date to the end of the "Appointment True" Message //
  // ================================================= //
  appt_true_message = appt_true_message + "<br>" + appointmentDate;

  // ================================================= //
  /* Has the user Scheduled an Appointment? 
     Controls the Appointment Message */
  // ================================================= //
  let hasAppointment = false;
  if (appointmentDate !== "") {
    hasAppointment = true;
  }

  // ================================================= //
  // Exit Button Clicked //
  // ================================================= //
  const onClickEvent = () => {
    router.push('/');
  }

  return (
    <>
      {/* ================================================================
        // Message // 
        ================================================================ */}
      <div className={quitFormStyles.message_holder}>
        <p>
          {main_message}
        </p>
      </div>

      {/* ================================================================
        // Appointment Message // 
        ================================================================ */}
      <div className={quitFormStyles.appt_message_holder}>
        <p dangerouslySetInnerHTML={{__html: hasAppointment ? appt_true_message : appt_false_message}} />
      </div>

      {/* ================================================================
        // Exit Button // 
        ================================================================ */}
      <div className={quitFormStyles.button_holder}>
        <button className={quitFormStyles.next_btn} onClick={onClickEvent}>{closeButton}</button>
      </div>
    </>
  )
  
};
// ================================================= //


// ================================================= //
// Error Message Form //
// ================================================= //
export function Error_Message_Form(props: ErrorMessageFormProps) {

  // Determine locale //
  // ================================================= //
  const router = useRouter();
  const locale = router.locale === undefined ? 'en' : router.locale;
  
  // Use language Specific Text //
  // ================================================= //
  let error_title = props.currentQuestion_Data.question[locale];
  let error_message = props.currentQuestion_Data.options[0].value[locale];
  let closeButton = props.uiButtons_Data.exitBtn[locale];

  // ================================================= //
  // Exit Button Clicked //
  // ================================================= //
  const onClickEvent = () => {
    router.push('/');
  }

  return (
    <>
      {/* ================================================================
        // Title // 
        ================================================================ */}
      <div className={quitFormStyles.message_holder}>
        <p>
          {error_title}
        </p>
      </div>

      {/* ================================================================
        // Error Message // 
        ================================================================ */}
      <div className={quitFormStyles.message_holder}>
        <p dangerouslySetInnerHTML={{__html: error_message}} />
      </div>

      {/* ================================================================
        // Exit Button // 
        ================================================================ */}
      <div className={quitFormStyles.button_holder}>
        <button className={quitFormStyles.next_btn} onClick={onClickEvent}>{closeButton}</button>
      </div>
    </>
  )
  
};
// ================================================= //


// ================================================= //
// Server Error Message Form //
// ================================================= //
export function Server_Error_Message_Form(props: MessageFormProps) {

  // Determine locale //
  // ================================================= //
  const router = useRouter();
  const locale = router.locale === undefined ? 'en' : router.locale;
  
  // Use language Specific Text //
  // ================================================= //
  let main_message = props.currentQuestion_Data.question[locale];
  let appt_false_message = props.currentQuestion_Data.options[0].value[locale];
  let appt_true_message = props.currentQuestion_Data.options[1].value[locale];
  let closeButton = props.uiButtons_Data.exitBtn[locale];

  // Get Scheulded Appointment Date //
  // ================================================= //
  let appointmentDate = props.appointmentSchedule;

  // Add Scheulded Appointment Date to the end of the "Appointment True" Message //
  // ================================================= //
  appt_true_message = appt_true_message + "<br>" + appointmentDate;

  // ================================================= //
  /* Has the user Scheduled an Appointment? 
     Controls the Appointment Message */
  // ================================================= //
  let hasAppointment = false;
  if (appointmentDate !== "") {
    hasAppointment = true;
  }

  // ================================================= //
  // Exit Button Clicked //
  // ================================================= //
  const onClickEvent = () => {
    router.push('/');
  }

  return (
    <>
      {/* ================================================================
        // Message // 
        ================================================================ */}
      <div className={quitFormStyles.message_holder}>
        <p>
          {main_message}
        </p>
      </div>

      {/* ================================================================
        // Appointment Message // 
        ================================================================ */}
      <div className={quitFormStyles.appt_message_holder}>
        <p dangerouslySetInnerHTML={{__html: hasAppointment ? appt_true_message : appt_false_message}} />
      </div>

      {/* ================================================================
        // Exit Button // 
        ================================================================ */}
      <div className={quitFormStyles.button_holder}>
        <button className={quitFormStyles.next_btn} onClick={onClickEvent}>{closeButton}</button>
      </div>
    </>
  )
  
};
// ================================================= //


// ================================================= //
// Exit Form //
// ================================================= //
export function Exit_Form(props: ExitFormProps) {
  const router = useRouter();

  // Determine locale //
  // ================================================= //
  const locale = router.locale === undefined ? 'en' : router.locale;

  // Main Props //
  // ================================================= //
  let answerOption = props.currentQuestion_Data.options;

  // Use language Specific Text //
  // ================================================= //
  let question = props.currentQuestion_Data.question[locale];
  let noExit = answerOption[0].value[locale];
  let yesExit = answerOption[1].value[locale];
  let confirmButton = props.uiButtons_Data.confirmBtn[locale];

  // ================================================= //
  // Exit Button Clicked //
  // ================================================= //  
  const onClickEvent = () => {

    // Set Default Answer //
    // ================================================= // 
    let exitAnswer: string = "false";

    // Gather all the Answers //
    // ================================================= // 
    const radios = document.getElementsByName('exitFormAnswers');

    // Loop through the Radio Buttons to get the Selected Answer //
    // ================================================= // 
    for (var i = 0, length = radios.length; i < length; i++) {

      // If an answer is Selected / Checked, Get the Selected Answer Value //
      // ================================================= //
      if ((radios[i] as HTMLInputElement).checked) {
        exitAnswer = (radios[i] as HTMLInputElement).value; 
        
        if (exitAnswer == "true") {
          // Yes Exit: Send to Home Page //
          router.push('/');
        } else {
          // No Exit: Send Back //
          router.back();
        }
        
        break;
      }
    }
  }

  return(
    <>
      {/* ================================================================
      // Question // 
      ================================================================ */}
      <div className={quitFormStyles.question_holder}>
          <p dangerouslySetInnerHTML={{__html: question}} />
      </div>

      {/* ================================================================
      // Answers // 
      ================================================================ */}
      <div className={quitFormStyles.answers_holder}>
          <input type="radio" id="exitForm_no" name="exitFormAnswers" value="false" className={quitFormStyles.checkBox} />
          <label htmlFor="exitForm_no">{noExit}</label>
          
          <input type="radio" id="exitForm_yes" name="exitFormAnswers" value="true" className={quitFormStyles.checkBox} />
          <label htmlFor="exitForm_yes">{yesExit}</label>
      </div>

      {/* ================================================================
      // Next Button // 
      ================================================================ */}
      <div className={quitFormStyles.button_holder}>
          <button className={quitFormStyles.next_btn} onClick={onClickEvent}>{confirmButton}</button>
      </div>
    </>
  )
};
// ================================================= //