import React from "react";
import styled from "styled-components";
import Text from "../Text/Text";
import { Flex } from "antd";

const StyledSubNavContainer = styled(Flex)`
  max-height: 51px;
  padding: 0 20px;
  border-bottom: 1px solid #d3dddc;
  background-color: #fff;
  position: sticky;
  top: ${(props) => props.offsetY}px;
  margin-bottom: 50px;
  z-index: 100;
`;

const StyledLayout = styled.div`
  background-color: #fff;
  margin: 0 auto;
  width: calc(100% - 16vw);
  font-family: "GilroyR";

  @media (max-width: 1200px) {
    width: calc(100% - 12vw);
  }

  @media (max-width: 992px) {
    width: calc(100% - 8vw);
  }

  @media (max-width: 768px) {
    width: calc(100% - 4vw);
  }

  @media (max-width: 576px) {
    width: 100%;
  }
`;

const StyledLinkContainer = styled.div`
  max-height: 50px;
  display: flex;
  flex-direction: column;
`;

const StyledLink = styled.a`
  display: inline;
  padding: 15px 15px 13px 15px;
  fontsize: 14px;
  fontweight: 600;
  text-align: center;
  color: ${(props) =>
    props.activePath === props.link || props.activePath.includes(props.link)
      ? props.theme?.antdToken?.colorPrimary
      : "#708E8C"};

  &:hover {
    color: ${(props) => props.theme?.antdToken?.colorPrimary};
  }
`;

const StyledLinkBorder = styled.div`
  height: 2px;
  width: 100%;
  background-color: ${(props) =>
    props.activePath === props.link || props.activePath.includes(props.link)
      ? props.theme?.antdToken?.colorPrimary
      : "transparent"};
`;

const SubNavbar = (props) => {
  const { activePath, onLinkClick = () => {}, ...rest } = props;
  const offsetY = document.getElementById("single-spa-application:navigation")?.offsetHeight || 64;

  return (
    <StyledSubNavContainer
      id="veris-sub-nav"
      align="center"
      justify="space-between"
      className="veris-sub-nav"
      offsetY={offsetY}
      {...rest}
    >
      <StyledLayout>
        <Flex align="center" gap="small">
          {props?.links.map((link, index) => (
            <StyledLinkContainer key={index}>
              <StyledLink
                href="/abc"
                className={`link-${link.key}`}
                activePath={activePath}
                link={link.to}
                onClick={(e) => {
                  e.preventDefault();
                  onLinkClick(link);
                }}
              >
                <Text variant="p">{link.label}</Text>
              </StyledLink>

              <StyledLinkBorder activePath={activePath} link={link.to} />
            </StyledLinkContainer>
          ))}
        </Flex>

        {/* [Firelist] */}
        <div style={{ position: "absolute", top: 12, right: 20 }}>
          <div style={{ marginLeft: 20, marginRight: 16 }}>
            {props?.renderFirelistBtn && typeof props.renderFirelistBtn === "function" && props.renderFirelistBtn()}
          </div>
        </div>
      </StyledLayout>
    </StyledSubNavContainer>
  );
};

export default SubNavbar;