import React from "react";
import { useSelector } from "react-redux";
import styled from "@emotion/styled";
import { defaultTheme } from "@nimles/react-web-components";
import { NavLink } from "./Link";
const StyledBrand = styled(NavLink) `
  color: ${({ theme }) => { var _a, _b, _c; return (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.onColor) !== null && _c !== void 0 ? _c : defaultTheme.colors.primary.onColor; }};
  font-weight: 800;
  font-size: 30px;
  line-height: 32px;
  height: 48px;
  letter-spacing: 1px;
  text-align: left;
  text-decoration: none;
  padding: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #fff;
  font-family: "Lato", sans-serif;
  margin-bottom: 0;

  @media (min-width: ${(props) => getThreshold(props.theme, "sm")}px) {
    padding: 8px 32px;
  }
`;
const Logo = styled.img `
  height: 32px;
`;
export const Brand = ({ showLogo, showName }) => {
    const tenant = useSelector(({ publicTenants }) => publicTenants.selected);
    const organization = useSelector(({ publicOrganizations }) => publicOrganizations.selected);
    const logoId = organization ? organization.logoId : tenant.logoId;
    const logoUrl = logoId && `https://media.nimles.com/file/${tenant.id}/${logoId}`;
    const name = organization ? organization.name : tenant.name;
    if (!showLogo && !showName) {
        if (logoUrl) {
            showLogo = true;
        }
        else {
            showName = true;
        }
    }
    return (<StyledBrand to="/">
      {showLogo && <Logo src={logoUrl} alt={name}/>}
      {showName && <span>{name}</span>}
    </StyledBrand>);
};
function getThreshold(theme, size) {
    var _a, _b;
    return (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.thresholds) === null || _a === void 0 ? void 0 : _a[size]) !== null && _b !== void 0 ? _b : defaultTheme.thresholds[size];
}
//# sourceMappingURL=Brand.jsx.map