import styled, { css } from 'styled-components';
import PlaceHolder from '../../../assets/img/easyblog-square-placeholder.png';

import { mediaMin } from '../../theme/mixins';

export const PostImage = styled.div<{ image: string }>`
  background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)),
    url(${props => props.image || PlaceHolder});
  min-height: 170px;
  background-size: 0 ,cover;
  background-position: center center;
`;

export const Tag = styled.div`
  width: 125px;
  padding: 2px 0;
  border-radius: 4px;
  background-color: ${props => props.theme.default.colors.blue};
  color: ${props => props.theme.default.colors.white};
  font-size: ${props => props.theme.default.fonts.sizes[6]};
  text-transform: uppercase;
  text-align: center;
  ${props => props.theme.default.fonts.ubuntuBold}
`;

export const CardBaseStyle = css`
  min-height: 350px;
  background: white;
  text-decoration: none;
  box-shadow: ${props => props.theme.default.shadow};
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  
  position: relative;
  top: 0;
  transition: all .1s ease-in;

  &:focus-within,  
  &:hover {
    top: -2px;
    box-shadow: 0 0 16px 0 rgba(0, 30, 56, 0.2);
  }
  
  h3 {
    color: ${props => props.theme.default.colors.black};
    font-size: ${props => props.theme.default.fonts.sizes[4]};
  }
`;

export const CardPlaceholder = styled.div`
  ${CardBaseStyle};
  
  background-repeat: no-repeat;
  background-image: 
    linear-gradient(90deg, rgba(255 , 255, 255, 0) 0, rgba(255 , 255, 255, .1) 50%, rgba(255 , 255, 255, 0) 100%),
    linear-gradient(rgba(203,210,216,.7) 170px, transparent 0),
    linear-gradient(rgb(30,140,248,.4) 40px, transparent 0),
    linear-gradient(rgba(203,210,216,.7) 40px, transparent 0),
    linear-gradient(rgba(203,210,216,.7) 40px, transparent 0),
    linear-gradient(rgba(203,210,216,.7) 40px, transparent 0),
    linear-gradient(rgba(203,210,216,.7) 40px, transparent 0);
    
  background-size:
    30% 100%,
    100% 170px,  
    120px 20px,  
    200px 15px,  
    calc(100% - 40px) 13px,
    190px 13px,
    100px 13px;
    
  background-position:
    -100% 0,  
    0 0,  
    20px 190px,  
    20px 230px,  
    20px 265px,  
    20px 285px,  
    20px 315px;
    
  animation: loading 2s ease-out infinite;
    
  @keyframes loading {
    to {
      background-position:
        200% 0,  
        0 0,  
        20px 190px,  
        20px 230px,  
        20px 265px,  
        20px 285px,  
        20px 315px;
    }
  }
`;

export const Card = styled.a<{ main: boolean }>`
  ${CardBaseStyle};

  article {
    padding: 20px;
    flex: 1;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  
    > p {
      max-height: 65px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
  
  ${Tag} {
    margin-bottom: 15px;
  }
  
  p {
    flex: 1;
    color: ${props => props.theme.default.colors.darkGrey};
  }
  
  span {
    ${props => props.theme.default.fonts.ubuntuBold};
    color: ${props => props.theme.default.colors.blue};
  }
`;

export const List = styled.div<{ firstMain: boolean }>`
  margin: 40px 0 50px;
  display: grid;
  grid-template-rows: auto;
  grid-gap: 20px;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(100px, auto);
  ${mediaMin.small(css`
    grid-gap: 60px 20px;
    grid-template-columns: repeat(2, 1fr);
  `)}
  
  ${mediaMin.medium(css`
    grid-template-columns: repeat(3, 1fr);
  `)} 

   ${props => props.firstMain && css`
      ${mediaMin.small(css`
        ${Card}:first-child {
          grid-column: 1 / 3;
          background: none;

          h3 {
            font-size: ${props => props.theme.default.fonts.sizes[2]};
          }

          h3,
          p {
            color: ${props => props.theme.default.colors.white};
          }
          
          ${Tag} {
            background-color: ${props => props.theme.default.colors.white};
            color: ${props => props.theme.default.colors.black};
          }
          
          ${PostImage} {
            max-height: 450px;
            height: 50vw;
            background-size: cover;
          }
          
          article {
            bottom: 0;
            position: absolute;
            padding: 20px 40px;
          }
          
          span {
            display: none;
          }
        }
      `)}
      
      ${mediaMin.medium(css`
        ${Card}:first-child {
          grid-column: 1 / 4;
        }
      `)} 
   `}
`;