import styled from "styled-components";

const placeRight = ["components", "headers", "footers"];

const Header = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: ${(p) => p.theme.spacing.xl};
  width: 100%;
  padding: ${(p) => `0 ${p.theme.spacing.m}`};
  background-color: ${(p) => p.theme.colors.uiBackground02};
  border-bottom: ${(p) => `1px solid ${p.theme.colors.uiLine}`};
  h6 {
    ${(p) => p.theme.textStyle.headingM}
    color: ${(p) => p.theme.colors.textHighEmphasis};
    text-transform: capitalize;
  }
`;

const FilterContent = styled.div`
  list-style: none;
  padding: ${(p) => p.theme.spacing.s};
  height: ${(p) => `calc(100vh - ${p.theme.spacing.xl})`};
  width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
  overflow: auto;
  border-right: 1px solid ${(p) => p.theme.colors.uiLine};
  &:last-child {
    border-right: 0;
    width: ${(p) => `calc(${p.theme.spacing.xl} * 4)`};
  }
`;

const Content = styled.div`
  list-style: none;
  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m}`};
  height: ${(p) => `calc(100vh - ${p.theme.spacing.xl})`};
  width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
  overflow: auto;
  border-right: 1px solid ${(p) => p.theme.colors.uiLine};
  &:last-child {
    border-right: 0;
    width: ${(p) => `calc(${p.theme.spacing.xl} * 4)`};
  }
`;

const Wrapper = styled.div<{ optionsType?: string; isOpen: boolean }>`
  position: fixed;
  left: ${(p) => (p.optionsType && placeRight.includes(p.optionsType) ? "unset" : p.isOpen ? 0 : "-999px")};
  right: ${(p) => (p.optionsType && placeRight.includes(p.optionsType) ? (p.isOpen ? 0 : "-999px") : "unset")};
  top: 0;
  z-index: 1000;
  margin-top: 0;
  height: 100vh;
  background: ${(p) => p.theme.colors.uiBackground01};
  box-shadow: ${(p) =>
		p.optionsType && placeRight.includes(p.optionsType) ? p.theme.shadow.rightPanel : p.theme.shadow.leftPanel};
  transition: all 0.5s ease-in-out;
`;

const Title = styled.h6`
  flex-shrink: 0;
`;

const ColumnsWrapper = styled.div`
  position: relative;
  display: flex;
`;

const NavLink = styled.a``;

const FeaturedWrapper = styled.div`
  border-bottom: 1px solid ${(p) => p.theme.colors.uiLine};
  padding-bottom: ${(p) => p.theme.spacing.xs};
  margin-bottom: ${(p) => p.theme.spacing.xs};
`;

const SearchWrapper = styled.div`
  width: 100%;
  margin-bottom: ${(p) => p.theme.spacing.s};
`;

const Link = styled.div<{ active: boolean }>`
  color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
`;

const ButtonWrapper = styled.div`
  margin: 0 0 0 auto;
`;

const FloatingButtonWrapper = styled.div`
  position: absolute;
  right: -16px;
  top: ${(p) => `-${p.theme.spacing.xs}`};
`;

const ClosedWrapper = styled.div<{ isOpen: boolean }>`
  position: fixed;
  background-color: ${(p) => p.theme.colors.uiBackground02};
  width: ${(p) => p.theme.spacing.xs};
  border-right: ${(p) => `2px solid ${p.theme.colors.interactive01}`};
  left: ${(p) => (p.isOpen ? "0" : "-999px")};
  top: 0;
  z-index: 1000;
  margin-top: ${(p) => p.theme.spacing.xl};
  height: 100vh;
  transition: ${(p) => (p.isOpen ? "left 1s ease-in-out" : "left 0s ease-out")};
`;

const ClosedFloatingButtonWrapper = styled.div`
  position: absolute;
  right: -77px;
  top: 56px;
`;

export {
	Wrapper,
	FilterContent,
	Content,
	Header,
	Title,
	ColumnsWrapper,
	NavLink,
	FeaturedWrapper,
	SearchWrapper,
	Link,
	ButtonWrapper,
	FloatingButtonWrapper,
	ClosedWrapper,
	ClosedFloatingButtonWrapper,
};
