import React from "react";
import { useSelector } from "react-redux";
import styled from "@emotion/styled";
import { Container, Column, Row } from "@nimles/react-web-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPhone, faEnvelope, faCity } from "@fortawesome/free-solid-svg-icons";
import { Element } from "./Element";
import { NavLink } from "./Link";
const StyledFooter = styled.footer `
  padding-top: 20px;
  color: #fff;
  background-color: #0f2d4c;
  min-height: 20vh;
  position: relative;
  display: flex;
  flex-direction: row;
  box-shadow: ${({ theme }) => theme.footer.boxShadow};
  background-color: ${({ theme, backgroundColor }) => backgroundColor || theme.footer.background};
  color: ${({ theme, color }) => color || theme.footer.color};
`;
const Name = styled.h3 `
  color: #fff;
`;
const FieldIcon = styled(FontAwesomeIcon) `
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 16px;
  margin-right: 10px;
`;
const Field = styled.div `
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 10px;
`;
const FooterList = styled.ul `
  list-style: none;
  padding: 0;
  margin-top: 0;
`;
const FooterListItem = styled.li ``;
const FooterLink = styled(NavLink) `
  color: #fff;
`;
export const Footer = ({ children, layoutId, color, backgroundColor, }) => {
    const tenant = useSelector(({ publicTenants }) => publicTenants.selected);
    const organization = useSelector(({ publicOrganizations }) => publicOrganizations.selected);
    const pages = useSelector(({ publicPages }) => publicPages.values);
    const posts = useSelector(({ publicPosts }) => publicPosts.values);
    const layouts = useSelector(({ publicLayouts }) => publicLayouts.values);
    const layout = layouts &&
        ((layoutId && layouts.find((l) => l.id === layoutId)) ||
            layouts.find((l) => l.layoutType === "Footer"));
    const name = organization ? organization.name : tenant && tenant.name;
    const email = organization ? organization.email : tenant && tenant.email;
    const phoneNumber = organization
        ? organization.phoneNumber
        : tenant && tenant.phoneNumber;
    const addressStreet = organization
        ? organization.address && organization.address.street
        : tenant && tenant.address && tenant.address.street;
    const addressPostalCode = organization
        ? organization.address && organization.address.postalCode
        : tenant && tenant.address && tenant.address.postalCode;
    const addressCity = organization
        ? organization.city && organization.address.city
        : tenant && tenant.address && tenant.address.city;
    const addressCountry = organization
        ? organization.address && organization.address.country
        : tenant && tenant.address && tenant.address.country;
    return (<StyledFooter color={color} backgroundColor={backgroundColor}>
      {layout
            ? layout.elements &&
                layout.elements.map((element) => (<Element tenant={tenant} element={element} root="Footer"/>))
            : children || (<Container padding>
              <Row wrap justify="space-between">
                <Column>
                  <Name>{name}</Name>

                  {phoneNumber && (<Field>
                      <FieldIcon icon={faPhone}/>
                      {phoneNumber}
                    </Field>)}
                  {email && (<Field>
                      <FieldIcon icon={faEnvelope}/>
                      {email}
                    </Field>)}
                  {addressStreet && (<Field>
                      <FieldIcon icon={faCity}/>
                      <span>
                        <p>{addressStreet}</p>
                        <p>
                          {addressPostalCode} {addressCity}
                        </p>
                        <p>{addressCountry}</p>
                      </span>
                    </Field>)}
                </Column>
                <Column>
                  <Name>Links</Name>
                  <FooterList>
                    {pages
                    .filter((page) => page.uniqueName)
                    .map((page) => (<FooterListItem>
                          <FooterLink to={`/${page.uniqueName}/pg`}>
                            {page.title}
                          </FooterLink>
                        </FooterListItem>))}
                  </FooterList>
                </Column>
                <Column>
                  <Name>
                    <FooterLink to="/blog">Blog</FooterLink>
                  </Name>
                  <FooterList>
                    {posts
                    .filter((post) => post.uniqueName)
                    .map((post) => (<FooterListItem>
                          <FooterLink to={`/${post.uniqueName}/pt`}>
                            {post.title}
                          </FooterLink>
                        </FooterListItem>))}
                  </FooterList>
                </Column>
              </Row>
            </Container>)}
    </StyledFooter>);
};
//# sourceMappingURL=Footer.jsx.map