/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React from 'react';
import clsx from 'clsx';
import Link from '@theme/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';

const styles = {};

function FooterLink({ to, href, label, prependBaseUrlToHref, ...props }) {
  const toUrl = useBaseUrl(to);
  const normalizedHref = useBaseUrl(href, {
    forcePrependBaseUrl: true,
  });
  return (
    <Link
      className="footer__link-item"
      {...(href
        ? {
            target: '_blank',
            rel: 'noopener noreferrer',
            href: prependBaseUrlToHref ? normalizedHref : href,
          }
        : {
            to: toUrl,
          })}
      {...props}
    >
      {label}
    </Link>
  );
}

const FooterLogo = ({ url, alt }) => <img className="footer__logo" alt={alt} src={url} />;

function Footer() {
  const context = useDocusaurusContext();
  const { siteConfig = {} } = context;
  const { themeConfig = {} } = siteConfig;
  const { footer } = themeConfig;
  const { copyright, links = [], logo = {} } = footer || {};
  const logoUrl = useBaseUrl(logo.src);

  if (!footer) {
    return null;
  }

  return (
    <footer
      className={clsx('footer', {
        'footer--dark': footer.style === 'dark',
      })}
    >
      <div className="container">
        {links && links.length > 0 && (
          <div className="row footer__links">
            {links.map((linkItem, i) => (
              <div key={i} className="col footer__col">
                {linkItem.title != null ? <h4 className="footer__title">{linkItem.title}</h4> : null}
                {linkItem.items != null && Array.isArray(linkItem.items) && linkItem.items.length > 0 ? (
                  <ul className="footer__items">
                    {linkItem.items.map((item, key) =>
                      item.html ? (
                        <li
                          key={key}
                          className="footer__item" // Developer provided the HTML, so assume it's safe.
                          // eslint-disable-next-line react/no-danger
                          dangerouslySetInnerHTML={{
                            __html: item.html,
                          }}
                        />
                      ) : (
                        <li key={item.label} className="footer__item">
                          <FooterLink {...item} />
                        </li>
                      ),
                    )}
                  </ul>
                ) : null}
              </div>
            ))}
          </div>
        )}
        {(logo || copyright) && (
          <div className="text--center">
            {logo && logo.src && (
              <div className="margin-bottom--sm">
                {logo.href ? (
                  <a
                    href={logo.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className={styles.footerLogoLink}
                  >
                    <FooterLogo alt={logo.alt} url={logoUrl} />
                  </a>
                ) : (
                  <FooterLogo alt={logo.alt} url={logoUrl} />
                )}
              </div>
            )}

            <div // Developer provided the HTML, so assume it's safe.
              // eslint-disable-next-line react/no-danger
              dangerouslySetInnerHTML={{
                __html: copyright,
              }}
            />
          </div>
        )}
      </div>
    </footer>
  );
}

export default Footer;

/*

        <footer className="site-foot bg-gray-5">
          <div className="wrap-last frame py-m">
            <div className="chain pb-m bd-gray-1" style={{ "--bd-bottom-width": "1px" }}>
              <p className="trim f-sans-xs">
                <span className="fw-bold">Join our Community Newsletter</span>
                <br />
                <span>Stay up to date with the latest news from the Rasa community</span>
              </p>
              <div className="ml-auto f-sans-s">
                <form action="">
                  <label htmlFor="">
                    <input type="text" placeholder="Your email address" />
                  </label>
                  <button>Subscribe</button>
                </form>
              </div>
            </div>
            <div className="stop pt-m pb-l">
              <div className="mcol-grid-l mcol-2 s__mcol-3 ml__mcol-4">
                <Link
                  to="/"
                  onClick={handleFooterLink({ to: "home" })}
                  className="d-block"
                  style={{ width: 100 }}
                >
                  <Ph aspect={1} width={100} text="RASA" />
                </Link>
                {footerLinks.map(({ heading, items }, i) => (
                  <div className="stack-s f-sans-s" key={i}>
                    <h3 className="trim ">{heading.toUpperCase()}</h3>
                    <ul className="stack-xs">
                      {items.map((item, i) => (
                        <li className="trim" key={i}>
                          <a href="" onClick={handleFooterLink({ to: "page" }, true)}>
                            {item}
                          </a>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            </div>
            <div className="chain pt-xs bd-gray-1 f-sans-xs" style={{ "--bd-top-width": "1px" }}>
              <p className="ml-auto">
                © <a href="https://www.gatsbyjs.org">Rasa Technologies Inc</a> - {new Date().getFullYear()} |{" "}
                <a href="">Imprint</a> | <a href="">Privacy Policy</a>
              </p>
            </div>
          </div>
        </footer>
 */