import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  width: 100%;
  height: 100%;
`;

const LeftColumn = styled.div`
  width: calc(${(p) => p.theme.spacing.m} * 8);
  padding: ${(p) => p.theme.spacing.m};
  background-color: ${(p) => p.theme.color.uiBackground01};
  overflow: auto;
  flex-shrink: 0;

  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 2px;
    height: 100%;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: ${(p) => p.theme.color.iconNonActive};
  }
`;

const MenuWrapper = styled.ul`
  li:last-child {
    margin-bottom: 0;
  }
`;

const NavLink = styled.a`
  text-transform: capitalize;
  &.selected {
    background-color: ${(p) => p.theme.color.overlayPressedDark};
  }
`;

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

const RightColumn = styled.div`
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: ${(p) => p.theme.color.uiBackground02};
`;

const Content = styled.div`
  display: flex;
  padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.s}`};
  overflow: auto;
  flex-grow: 1;
  flex-direction: column;
  position: relative;
  padding-bottom: ${(p) => p.theme.spacing.l};

  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
    height: 100%;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: ${(p) => p.theme.color.iconNonActive};
  }
`;

const ModalFooter = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: flex-end;
  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
  & > button {
    margin-right: ${(p) => p.theme.spacing.m};
  }
  border-radius: 0 0 4px 4px;
  z-index: 2;
`;

const DataWrapper = styled.div`
  display: flex;
  flex-direction: column;
  flex-grow: 2;
`;

const DataTitle = styled.div<{ hasBold: boolean }>`
  ${(p) => (p.hasBold ? p.theme.textStyle.headingM : p.theme.textStyle.headingS)};
  margin-bottom: ${(p) => p.theme.spacing.m};
`;

const DataContent = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: ${(p) => p.theme.spacing.s};
  margin-bottom: ${(p) => p.theme.spacing.m};
`;

const EmptyStateWrapper = styled.div`
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
`;

export {
	Wrapper,
	LeftColumn,
	RightColumn,
	MenuWrapper,
	NavLink,
	Link,
	Content,
	ModalFooter,
	DataWrapper,
	DataContent,
	DataTitle,
	EmptyStateWrapper,
};
