import styled from "styled-components";

const Header = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.s} 0`};
`;

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

const Wrapper = styled.div<{ isOpen: boolean }>`
  position: relative;
  height: 100%;
  background: ${(p) => p.theme.colors.uiBackground01};
  box-shadow: ${(p) => p.theme.shadow.leftPanel};
  margin-left: ${(p) => (p.isOpen ? "0" : "-256px")};
  opacity: ${(p) => (p.isOpen ? "1" : "0")};
  z-index: 1000;
  width: 256px;
  flex-shrink: 0;
  transition: ${(p) =>
		!p.isOpen
			? "margin-left 0.5s ease-in-out 0s, opacity 0.1s ease 0.5s"
			: "opacity 0.1s ease, margin-left 0.5s ease-in-out"};
`;

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

const SearchWrapper = styled.div`
  width: 100%;
`;

const FloatingButtonWrapper = styled.div`
  position: absolute;
  right: -16px;
  top: 60px;
`;

const ClosedWrapper = styled.div<{ isOpen: boolean }>`
  position: relative;
  background-color: ${(p) => p.theme.colors.uiBackground02};
  width: ${(p) => p.theme.spacing.xs};
  border-right: ${(p) => `2px solid ${p.theme.colors.interactive01}`};
  height: 100vh;
  margin-left: ${(p) => (p.isOpen ? "0" : "-100px")};
  display: ${(p) => (p.isOpen ? "flex" : "none")};
  transition: display 0.1s ease 1s;
`;

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

const BreadCrumb = styled.div`
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  margin-bottom: ${(p) => p.theme.spacing.s};
`;

const BreadCrumbItem = styled.button<{ isLastItem: boolean }>`
  border: none;
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => (p.isLastItem ? p.theme.color.textMediumEmphasis : p.theme.color.interactive01)};
  background: transparent;
  padding: 0 ${(p) => p.theme.spacing.xxs};
  border-radius: ${(p) => p.theme.radii.s};
  cursor: ${(p) => (p.isLastItem ? "default" : "pointer")};
  border: 1px solid transparent;

  &:active,
  &:focus {
    outline: none;
  }

  &:focus {
    border: ${(p) => (p.isLastItem ? "none" : `1px solid ${p.theme.color.interactive01}`)};
    background: ${(p) => (p.isLastItem ? "none" : p.theme.color.overlayFocusPrimary)};
  }

  &:active {
    background: ${(p) => (p.isLastItem ? "none" : p.theme.color.overlayPressedPrimary)};
  }

  &:hover {
    background: ${(p) => (p.isLastItem ? "none" : p.theme.color.overlayHoverPrimary)};
  }
`;

const ModalContent = styled.div`
  width: 100%;
  height: 100%;
  overflow: auto;

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

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

export {
	Wrapper,
	Content,
	Header,
	ColumnsWrapper,
	SearchWrapper,
	FloatingButtonWrapper,
	ClosedWrapper,
	ClosedFloatingButtonWrapper,
	BreadCrumb,
	BreadCrumbItem,
	ModalContent,
};
