import React, { useMemo } from "react";
/* -------------------------------------------------------------------------- */
/*                              Import Components                             */
/* -------------------------------------------------------------------------- */
import Typography from "components/typography/Typography";
import { SVGFacebook, SVGInstagram, SVGCircle } from "components/icons";
import { RouterLink } from "components/typography/RouterLink";
import Link from "components/typography/Link";

/* -------------------------------------------------------------------------- */
/*                                Define consts                               */
/* -------------------------------------------------------------------------- */

const mainLinks = [
  { label: "account settings", url: "/account/settings", disabled: false },
  { label: "about freeland", url: "/about", disabled: false },
  { label: "help", url: "/help", disabled: false },
  { label: "contact us", url: "/contact-us", disabled: false },
];

const secondaryLinks = [
  { index: 1, label: "Terms of Use", url: "/terms-of-use", disabled: false },
  {
    index: 2,
    label: "Privacy Policy",
    url: "/privacy-policy",
    disabled: false,
  },
  {
    index: 3,
    label: "Cookies Policy",
    url: "/cookies-policy",
    disabled: false,
  },
];

/* -------------------------------------------------------------------------- */
/*                           Difine parts of footer                           */
/* -------------------------------------------------------------------------- */

/* -------------------- Icons with social networks icons -------------------- */
const circleDivider = (
  <SVGCircle className="fill-gray-500 stroke-gray-500 w-1.5 h-1.5 mx-2" />
);

/* -------------------------------------------------------------------------- */
/*                           Define component footer                          */
/* -------------------------------------------------------------------------- */

export function Footer() {
  /* -------------------------- Part with main links -------------------------- */
  const mainLinksPart = useMemo(
    () =>
      mainLinks.map((link) => (
        <RouterLink
          key={link.url}
          className="py-1 md:py-2 text-gray-900 px-4"
          disabled={link.disabled}
          to={link.url}
        >
          <Typography className="" fontWeightVariant="semibold" htmlTag="p">
            {link.label.toUpperCase()}
          </Typography>
        </RouterLink>
      )),
    mainLinks
  );
  /* ------------------------ Part with secondary links ----------------------- */
  const secondaryLinksPart = useMemo(
    () =>
      secondaryLinks.map((link) => (
        <div className="flex flex-row items-center">
          {link.index != 1 && circleDivider}
          <Link key={link.url} disabled={link.disabled} to={link.url}>
            {link.label}
          </Link>
        </div>
      )),
    secondaryLinks
  );

  /* -------------------------------------------------------------------------- */
  /*                         Implement footer component                         */
  /* -------------------------------------------------------------------------- */
  return (
    <div className="lg:px-12 px-2 sm:px-8 md:px-4 pb-2 md:pt-4 pt-2 lg:pt-5 bg-gray-200">
      <section className="w-full grid grid-cols-2 md:grid-rows-2 sm:grid-flow-row-dense sm:grid-rows-2 justify-items-between md:justify-between mb-2 md: items-center md:flex-row md:flex">
        <div className="sm:col-span-1">
          <Link to="*">
            <Typography className="text-2xl" fontWeightVariant="semibold">
              Freeland
            </Typography>
          </Link>
        </div>
        <div className="order-last md:order-none justify-center justify-items-center items-center flex flex-col col-span-4 sm:flex sm:flex-row text-sm">
          {mainLinksPart}
        </div>
        <div className="flex flex-row sm:col-span-1 justify-end">
          <Link to="https://www.facebook.com">
            <SVGFacebook className="w-5 h-5 fill-gray-900 stroke-gray-900 mr-2" />
          </Link>
          <Link to="https://www.instagram/com">
            {" "}
            <SVGInstagram className="w-5 h-5 fill-gray-900 stroke-gray-900 ml-2 " />
          </Link>
        </div>
      </section>
      <section className="w-full flex flex-col md:flex-row text-gray-500 text-xs justify-between">
        <div className="flex flex-col md:flex-row justify-center items-center">
          <Typography>
            @ Copyright 2022 Freeland - All rights reserved
          </Typography>
          <div className="hidden md:flex">{circleDivider}</div>
          <div className="flex flex-row items-center">{secondaryLinksPart}</div>
        </div>
        <div className="flex flex-row justify-center md:justify-end">
          Supported by
          <Typography className="ml-1 lg:ml-2" fontWeightVariant="bold">
            Comfortel
          </Typography>
        </div>
      </section>
    </div>
  );
}