import imageUrlFor from '@/lib/imageUrlFor';
import { darkLine, lightSmoke, smoke } from '@/styles/colors';
import { BELOW_W_1024, BELOW_W_768 } from '@/styles/dimensions';
import { Post } from '@/types';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { Subtitle, Title } from './Typography';
import PostTitle from './PostTitle';

const fadeUp = keyframes`
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
`;

const Container = styled.div<{ index: number; fav?: boolean }>`
  height: 100%;
  color: ${smoke};
  animation: ${fadeUp} ${(props) => 50 * props.index + 400}ms;
  transition: all 0.2s;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;

  @media screen and (${BELOW_W_768}) {
    flex-direction: column;
    align-items: flex-start;
  }

  &:before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: -100vw;
    right: -100vw;
    border-top: 1px solid ${darkLine};
  }

  &:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    left: -100vw;
    right: -100vw;
    border-top: 1px solid ${darkLine};
  }

  p,
  i {
    padding: 0 5px;
    margin: 0;
  }
`;

const ThumbnailWrapper = styled.div`
  width: 40rem;
  height: 100%;
  padding: 48px;
  flex-shrink: 0;
  border-right: 1px solid ${darkLine};
  @media screen and (${BELOW_W_1024}) {
    padding: 24px;
  }
  @media screen and (${BELOW_W_768}) {
    padding-bottom: 0;
    border-right: none;
  }
`;

const Thumbnail = styled.img`
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 0 0;
`;

const Details = styled.div`
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 48px;
  @media screen and (${BELOW_W_1024}) {
    padding: 24px;
  }
`;

const Author = styled(Subtitle)`
  margin-bottom: 0;
  color: ${lightSmoke};
  font-size: 1.3rem;
`;

const PostCard = ({ post, onClick, index }: { post: Post; onClick?: () => void; index: number; fav?: boolean }) => {
  const publishedDate = new Date(post.publishedAt).toLocaleDateString(undefined, {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  });

  return (
    <Container key={post._id} onClick={onClick} index={index}>
      <ThumbnailWrapper>
        <Thumbnail src={imageUrlFor(post.mainImage.asset).ignoreImageParams().width(500) as unknown as string} />
      </ThumbnailWrapper>
      <Details>
        <PostTitle title={post.title} />
        <Author>
          {post.author.name}
          {!!post.publishedAt && ` / ${publishedDate}`}
        </Author>
      </Details>
    </Container>
  );
};

export default PostCard;