"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Footer = void 0;
const react_1 = __importDefault(require("react"));
const react_redux_1 = require("react-redux");
const styled_1 = __importDefault(require("@emotion/styled"));
const react_web_components_1 = require("@nimles/react-web-components");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const Element_1 = require("./Element");
const Link_1 = require("./Link");
const StyledFooter = styled_1.default.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_1.default.h3 `
  color: #fff;
`;
const FieldIcon = (0, styled_1.default)(react_fontawesome_1.FontAwesomeIcon) `
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 16px;
  margin-right: 10px;
`;
const Field = styled_1.default.div `
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 10px;
`;
const FooterList = styled_1.default.ul `
  list-style: none;
  padding: 0;
  margin-top: 0;
`;
const FooterListItem = styled_1.default.li ``;
const FooterLink = (0, styled_1.default)(Link_1.NavLink) `
  color: #fff;
`;
const Footer = ({ children, layoutId, color, backgroundColor, }) => {
    const tenant = (0, react_redux_1.useSelector)(({ publicTenants }) => publicTenants.selected);
    const organization = (0, react_redux_1.useSelector)(({ publicOrganizations }) => publicOrganizations.selected);
    const pages = (0, react_redux_1.useSelector)(({ publicPages }) => publicPages.values);
    const posts = (0, react_redux_1.useSelector)(({ publicPosts }) => publicPosts.values);
    const layouts = (0, react_redux_1.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_1.Element tenant={tenant} element={element} root="Footer"/>))
            : children || (<react_web_components_1.Container padding>
              <react_web_components_1.Row wrap justify="space-between">
                <react_web_components_1.Column>
                  <Name>{name}</Name>

                  {phoneNumber && (<Field>
                      <FieldIcon icon={free_solid_svg_icons_1.faPhone}/>
                      {phoneNumber}
                    </Field>)}
                  {email && (<Field>
                      <FieldIcon icon={free_solid_svg_icons_1.faEnvelope}/>
                      {email}
                    </Field>)}
                  {addressStreet && (<Field>
                      <FieldIcon icon={free_solid_svg_icons_1.faCity}/>
                      <span>
                        <p>{addressStreet}</p>
                        <p>
                          {addressPostalCode} {addressCity}
                        </p>
                        <p>{addressCountry}</p>
                      </span>
                    </Field>)}
                </react_web_components_1.Column>
                <react_web_components_1.Column>
                  <Name>Links</Name>
                  <FooterList>
                    {pages
                    .filter((page) => page.uniqueName)
                    .map((page) => (<FooterListItem>
                          <FooterLink to={`/${page.uniqueName}/pg`}>
                            {page.title}
                          </FooterLink>
                        </FooterListItem>))}
                  </FooterList>
                </react_web_components_1.Column>
                <react_web_components_1.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>
                </react_web_components_1.Column>
              </react_web_components_1.Row>
            </react_web_components_1.Container>)}
    </StyledFooter>);
};
exports.Footer = Footer;
//# sourceMappingURL=Footer.jsx.map