/* global React, Icon, Eyebrow, SCREENCONNECT_URL */
const { useState: useStateSupport, useRef: useRefSupport } = React;

function SupportPage({ go }) {
  const scUrl = (typeof SCREENCONNECT_URL !== 'undefined')
    ? SCREENCONNECT_URL
    : 'https://planetiware.screenconnect.com';

  const [code, setCode] = useStateSupport('');
  const [err, setErr] = useStateSupport(false);
  const [joined, setJoined] = useStateSupport(false);
  const frameRef = useRefSupport(null);

  const joinUrl = (c) => `${scUrl}/?Code=${encodeURIComponent(c)}&theme=embedded`;

  const submit = (e) => {
    e.preventDefault();
    const c = code.trim();
    if (!c) { setErr(true); return; }
    setErr(false);
    setJoined(true);
    if (frameRef.current) frameRef.current.src = joinUrl(c);
  };

  return (
    <main data-screen-label="Remote support">
      <section className="hero rs" data-screen-label="Remote support hero">
        <div className="wrap hero-grid">
          <div>
            <Eyebrow>Remote support</Eyebrow>
            <h1>
              Give your<br/>
              technician <em>access.</em>
            </h1>
            <p className="hero-sub">
              Already on the phone with us? Enter the code your technician gave you. Nothing installs until you approve it, and you can end the session at any time.
            </p>

            <div className="rs-alt">
              <div className="rs-alt-head">Not after a remote session?</div>
              <p>If you would rather talk to someone, or your issue needs more than a screen share.</p>
              <div className="rs-contact">
                <a className="rs-contact-item" href="tel:+61291998520">
                  <span className="ic"><Icon.phone /></span>
                  <span className="txt"><span className="k">PHONE</span><span className="v">(02) 9199 8520</span></span>
                </a>
                <a className="rs-contact-item" href="mailto:info@planetiware.com">
                  <span className="ic"><Icon.mail /></span>
                  <span className="txt"><span className="k">EMAIL</span><span className="v">info@planetiware.com</span></span>
                </a>
              </div>
              <button className="btn btn-ghost btn-arrow" onClick={() => go('contact')}>
                Send a message
                <Icon.arrow />
              </button>
            </div>

            <div className="hero-meta">
              <div className="hero-meta-item">
                <span className="k">NO INSTALL</span>
                <span className="v">Until you approve</span>
              </div>
              <div className="hero-meta-item">
                <span className="k">CONTROL</span>
                <span className="v">End anytime</span>
              </div>
              <div className="hero-meta-item">
                <span className="k">SECURE</span>
                <span className="v">Encrypted session</span>
              </div>
            </div>
          </div>

          <div className="rs-visual">
            <div className="rs-card">
              <div className="rs-card-head">
                <span className="dot" aria-hidden="true"></span>
                <div>
                  <div className="label">REMOTE SESSION</div>
                  <div className="val">{joined ? 'Follow the prompt to download' : 'Enter your support code'}</div>
                </div>
              </div>

              <form className="rs-join" onSubmit={submit}>
                <div className="rs-join-title"><strong>Join</strong> with a code</div>
                <label htmlFor="rs-code" className="rs-join-label">Support code</label>
                <div className="rs-join-row">
                  <input
                    id="rs-code"
                    type="text"
                    inputMode="numeric"
                    className={`rs-join-input${err ? ' err' : ''}`}
                    value={code}
                    onChange={(e) => { setCode(e.target.value); if (err) setErr(false); }}
                    placeholder="e.g. 4821"
                    autoComplete="off"
                  />
                  <button type="submit" className="rs-join-btn" aria-label="Join session"><Icon.arrow /></button>
                </div>
                {err && <span className="rs-join-err">Enter the code your technician gave you.</span>}
              </form>

              <div className={`rs-embed${joined ? ' on' : ''}`}>
                <iframe
                  ref={frameRef}
                  id="remote-support"
                  title="Join a remote support session"
                  className="rs-embed-frame"
                  scrolling="yes"
                  frameBorder="0"
                ></iframe>
              </div>

              {joined ? (
                <p className="rs-embed-fallback">
                  Nothing happening? <a href={joinUrl(code.trim())} target="_blank" rel="noopener">Open the download in a new tab →</a>
                </p>
              ) : (
                <ul className="rs-card-reassure">
                  <li><span className="tick"><Icon.check /></span>You approve before anyone connects</li>
                  <li><span className="tick"><Icon.check /></span>Nothing is left installed afterwards</li>
                  <li><span className="tick"><Icon.check /></span>Session is encrypted end to end</li>
                </ul>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { SupportPage });