import styled, { css } from "styled-components";

const SectionHeader = styled.div<{ isRecentSites?: boolean }>`
  display: flex;
  justify-content: space-between;
  margin: 0 ${(p) => (p.isRecentSites ? p.theme.spacing.s : p.theme.spacing.m)};
  margin-top: ${(p) => p.theme.spacing.m};
`;

const Title = styled.h1<{ isActive?: boolean }>`
  margin: 0;
  margin-right: ${(p) => p.theme.spacing.m};
  ${(p) => p.theme.textStyle.headingM};
  color: ${(p) => (p.isActive ? p.theme.colors.textHighEmphasis : p.theme.colors.textMediumEmphasis)};
`;

const CollapseButton = styled.div`
  display: flex;
  align-items: center;
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.colors.textMediumEmphasis};
  padding: 0;
  margin: 0;
  cursor: pointer;
`;

const Label = styled.span`
  margin-right: 14px;
`;

const RecentSites = styled.div<{ fullWidth: boolean }>`
  display: ${(p) => (p.fullWidth ? "block" : "inline-block")};
  padding-bottom: ${(p) => p.theme.spacing.s};
  border-radius: ${(p) => p.theme.radii.s};
  background: ${(p) => p.theme.color.uiBackground02};
  min-height: 56px;
  overflow: hidden;
  margin: ${(p) => p.theme.spacing.m};
  margin-bottom: 0;
  flex-shrink: 0;

  h1 {
    padding-left: 0;
  }
`;

const RecentSitesItemsWrapper = styled.div<{ isHidden: boolean }>`
  display: grid;
  grid-auto-flow: column;
  overflow: auto;
  grid-gap: ${(p) => p.theme.spacing.m};
  padding: ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.s} 0px ${(p) => p.theme.spacing.s};
  overflow: hidden;

  div {
    min-width: 100%;
  }

  ${(props) =>
		props.isHidden &&
		css`
      height: 0;
      padding: 0;
      padding-left: ${(p) => p.theme.spacing.s};
      padding-top: ${(p) => p.theme.spacing.xs};
    `};

  @media (min-width: 1200px) {
    div:nth-child(6),
    div:nth-child(7) {
      display: none;
    }
  }

  @media (min-width: 1600px) {
    div:nth-child(6) {
      display: block;
    }
    div:nth-child(7) {
      display: none;
    }
  }

  @media (min-width: 1750px) {
    div:nth-child(6),
    div:nth-child(7) {
      display: block;
    }
  }
`;

export { SectionHeader, Title, CollapseButton, Label, RecentSites, RecentSitesItemsWrapper };
