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

const OpacityAnimation = keyframes`
  to {
    opacity: 1;
  }
}`;

const TranslateAnimation = keyframes`
  to {
    transform: translateY(0);
  }
}`;

const SitesListWrapper = styled.div`
  max-width: calc(100vw - calc(24px * 3));
  height: 100%;
  display: flex;
  flex-flow: column;

  &.animate {
    animation: ${OpacityAnimation} 1.5s ease-in 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
`;

const GridList = styled.div<{ isEmpty: boolean; fullWidth: boolean }>`
  padding-top: ${(p) => p.theme.spacing.s};
  padding-bottom: ${(p) => p.theme.spacing.m};
  margin: 0 ${(p) => p.theme.spacing.m};
  max-width: calc(100vw - calc(24px * 3));

  ${({ isEmpty, theme, fullWidth }) =>
		isEmpty
			? `
    display: flex;
    justify-content: center;
  `
			: `display: grid;
    grid-template-columns: ${
			fullWidth ? "repeat(auto-fit, minmax(270px, 1fr))" : "repeat(auto-fit, minmax(270px, 270px))"
		};
    grid-gap: ${theme.spacing.m};
  `}
`;

const EmptyStateWrapper = styled.div`
  text-align: center;
  margin-top: 100px;
`;

const ImageWrapper = styled.div<{ borderRadius?: boolean; height: number }>`
  width: 100%;
  overflow: hidden;
  img {
    max-width: 100%;
    width: 100%;
    display: block;
    border-radius: ${(p) => (p.borderRadius ? p.theme.spacing.xs : 0)};
    object-fit: cover;
    height: ${(p) => (p.height ? p.height : 199)}px;
  }
`;

const Thumbnail = styled.div<{ backgroundUrl: string; height: number; width?: number; borderRadius?: boolean }>`
  background: url(${(p) => p.backgroundUrl}) no-repeat center;
  background-size: cover;
  height: ${(p) => p.height}px;
  width: ${(p) => (p.width ? `${p.width}px` : "100%")};
  border-radius: ${(p) => (p.borderRadius ? p.theme.spacing.xs : 0)};
`;

const ItemName = styled.span``;

const PaginationWrapper = styled.div`
  display: flex;
  justify-content: flex-end;
  padding-bottom: ${(p) => p.theme.spacing.m};
  padding-right: ${(p) => p.theme.spacing.m};
`;

const AllSitesListWrapper = styled.div`
  &.animate {
    transform: translateY(50px);
    animation: ${TranslateAnimation} 1s ease-out 1.5s;
    animation-fill-mode: forwards;
  }
`;

const SearchTags = styled.div`
  & > div:nth-child(1) {
    margin-bottom: ${(p) => p.theme.spacing.xs};
  }
  & > div:nth-child(2) {
    margin-bottom: ${(p) => p.theme.spacing.xs};
  }
`;

const SearchTagsGrid = styled.div`
  margin: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
`;

export {
	SitesListWrapper,
	GridList,
	EmptyStateWrapper,
	ImageWrapper,
	Thumbnail,
	ItemName,
	PaginationWrapper,
	AllSitesListWrapper,
	SearchTags,
	SearchTagsGrid,
};
