import React from "react";
import { StaticQuery, graphql, Link } from "gatsby";
import { DefundUtils } from "../../DefundUtils";
import { FooterProps } from "../../types/PropTypes";

/**
 * The site footer, containing issue request and contact information.
 *
 * _This is meant to be internal to this file and should
 * probably not be exported._
 */
class _Footer extends React.Component<FooterProps> {
  /**
   * Initialize the component.
   * @param {FooterProps} props
   */
  constructor(props: FooterProps) {
    super(props);
  }

  /**
   * React render method.
   * @return {React.ReactNode} the rendered component
   */
  render() {
    const url = typeof window !== "undefined" ? window.location.href : "";
    const isLetterPage = url.includes("/letters");

    return (
      <>
        <aside className="sticky">
          <div>
            <span className="city-request-link">
              <span className="emojicon emojicon-city"></span>
              <span
                className="react-inserted"
                dangerouslySetInnerHTML={{
                  __html: DefundUtils.markdownToHTML(this.props.footerTextPr),
                }}
              ></span>
            </span>
            {isLetterPage ? (
              <span className="email-link">
                <span className="emojicon">📧</span>
                <Link to="/">Send an email</Link>
              </span>
            ) : (
              <span className="snail-mail-link">
                <span className="emojicon">📬</span>
                <Link to="/letters">Send a letter</Link>
                <span className="beta-bubble">BETA</span>
              </span>
            )}
          </div>
        </aside>
        <footer className="footerMain">
          {/* TODO: determine if this is something we want to keep around
            <span
            className="react-inserted"
            dangerouslySetInnerHTML={{
              __html: DefundUtils.markdownToHTML(
                this.props.footerTextInstructions
              ),
            }}
          ></span> */}
          <span
            className="divider footer react-inserted"
            dangerouslySetInnerHTML={{
              __html: DefundUtils.markdownToHTML(this.props.contactEmailFooter),
            }}
          ></span>
        </footer>
      </>
    );
  }
}

/**
 * The site footer, containing issue request and contact information.
 * @return {React.ReactNode}
 */
export default function Footer(): JSX.Element {
  return (
    <StaticQuery
      query={graphql`
        query FooterQuery {
          siteConfig {
            footerTextPr
            footerTextInstructions
            contactEmailFooter
          }
        }
      `}
      render={(data: { siteConfig: FooterProps }) => (
        <_Footer {...data.siteConfig} />
      )}
    />
  );
}