import * as React from 'react';
import styled from 'styled-components';
import {
  rem,
  zIndex
} from '../../style/function.style';
import {
  imgResize
} from '../../utils/imgResize';

import {
  PostErrorTip,
  skeletonOneLine,
  skeletonTwoLine,
  skeletonImage,
  mode,
} from '../index.style';
import { PostCardConfig, AllDetail } from '../type';
import { formatDescription } from './utils';

const COVER_SIZE = {
  1: {
    width: 127,
    height: 172
  },
  2: {
    width: 177,
    height: 100
  }
}
export const Container = styled.div`
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: ${rem(16)} 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
`;

export const CoverHorizontal = styled.div<{ src: string, skeleton?: boolean }>`
  flex: 0 0 auto;
  display: block;
  margin-right: ${rem(24)};
  width: ${rem(COVER_SIZE[1].width)};
  height: ${rem(COVER_SIZE[1].height)};
  border-radius: ${rem(16)};
  background-image: url(${({ src }) => src});
  background-repeat: no-repeat;
  background-size: cover;

  ${({ skeleton }) => (
    skeleton ? skeletonImage : ''
  )}
`;

export const CoverVertical = styled.div<{ src: string, skeleton?: boolean }>`
  flex: 0 0 auto;
  display: block;
  margin-left: ${rem(24)};
  width: ${rem(COVER_SIZE[2].width)};
  height: ${rem(COVER_SIZE[2].height)};
  border-radius: ${rem(16)};
  background-image: url(${({ src }) => src});
  background-repeat: no-repeat;
  background-size: cover;

  ${({ skeleton }) => (
    skeleton ? skeletonImage : ''
  )}
`;

export const Info = styled.div`
  flex: 1 1 auto;
  overflow: hidden;
`;

export const Title = styled.div<{ skeleton?: boolean }>`
  height: ${rem(40)};
  font-size: ${rem(28)};
  line-height: ${rem(40)};
  color: #2e2e2e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  ${({ skeleton }) => (
    skeleton ? `
      width: 60%;
      ${skeletonOneLine}
    ` : ''
  )}
  .nw-dark-mode &{
    color: #CCC;
  }
`;
export const Description = styled.div<{ skeleton?: boolean }>`
  height: ${rem(62)};
  margin-top: ${rem(12)};
  margin-bottom: ${rem(2)};
  font-size: ${rem(24)};
  line-height: ${rem(34)};
  color: #b3b3b3;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  ${({ skeleton }) => (
    skeleton ? skeletonTwoLine : ''
  )}
  .nw-dark-mode &{
    color: #888;
  }
`;
export const AuthorName = styled.div<{ skeleton?: boolean }>`
  margin-top: ${rem(12)};
  height: ${rem(34)};
  font-size: ${rem(24)};
  line-height: ${rem(34)};
  color: #b3b3b3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  ${({ skeleton }) => (
    skeleton ? `
      width: 30%;
      ${skeletonOneLine}
    ` : ''
  )}
  .nw-dark-mode &{
    color: #888;
  }
`;

export class LofterPostRowCard extends React.Component<{
  postCardConfig: PostCardConfig,
  coverType?: 1 | 2,
  showCover?: boolean,
  post?: false | AllDetail,
}> {

  render() {
    const {
      post,
      postCardConfig,
      coverType = 1
    } = this.props;
    const {
      postId,
      cover,
      title,
      description
    } = postCardConfig;

    const skeleton = !post;

    const customCover = cover && cover.url;
    const resizedCover = imgResize(
      customCover || (post && post.firstImage && post.firstImage.orign) || '',
      COVER_SIZE[coverType].width,
      COVER_SIZE[coverType].height,
      1
    );

    return (
      <Container
        onClick={() => {
          if (post) {
            window.location.href = post.postPageUrl;
          }
        }}
      >
        {
          coverType === 1 && (
            <CoverHorizontal
              src={resizedCover}
            />
          )
        }
        <Info>
          <Title
            skeleton={(!title) && skeleton}
          >{title || (post && post.title)}</Title>
          <Description
            skeleton={(!description) && skeleton}
            dangerouslySetInnerHTML={{
              __html: formatDescription(description || (post && post.digest))
            }}
          />
          <AuthorName
            skeleton={skeleton}
          >{post && post.blogInfo?.blogNickName}</AuthorName>
        </Info>
        {
          coverType === 2 && (
            <CoverVertical
              src={resizedCover}
              skeleton={skeleton}
            />
          )
        }
        {
          post === false && (
            <PostErrorTip>文章状态异常</PostErrorTip>
          )
        }
        {
          (!postCardConfig.postId) && (
            <PostErrorTip>未指定文章/合集/推集</PostErrorTip>
          )
        }
      </Container>
    )
  }
}