import React, { FC, useEffect } from "react";
import getConfig from "next/config";

import showRecaptcha from "../helpers/recaptcha";
import { useStoreState } from "../store";
import { ColCenter } from "./Layout";
import ReCaptcha from "./ReCaptcha";
import ALink from "./ALink";
import Text from "./Text";

const { publicRuntimeConfig } = getConfig();

const Footer: FC = () => {
  const { isAuthenticated } = useStoreState(s => s.auth);

  const termsSection = isAuthenticated ? "Use" : "Service";

  useEffect(() => {
    showRecaptcha();
  }, []);

  return (
    <ColCenter
      as="footer"
      width={1}
      p={isAuthenticated ? 2 : 24}
      padding="30px 0"
    >
      {!isAuthenticated && <ReCaptcha />}
      <Text fontSize={[12, 13]} py={2}>
        <ALink href="/" title="Home">
          Home
        </ALink>
        {" | "}
        <ALink href="/terms" title="Terms of Use">
          Terms of {termsSection}
        </ALink>
        {" | "}
        <ALink href="/report" title="Report abuse">
          Report Abuse
        </ALink>
        {publicRuntimeConfig.CONTACT_EMAIL && (
          <>
            {" | "}
            <ALink
              href={`mailto:${publicRuntimeConfig.CONTACT_EMAIL}`}
              title="Contact us"
            >
              Contact Us
            </ALink>
          </>
        )}
        {" | "}
        <ALink href="https://www.sanger.k12.ca.us" title="Sanger Unified">
          Sanger Unified School District
        </ALink>
      </Text>
    </ColCenter>
  );
};

export default Footer;