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

import {
  PostCardConfig,
  PostDetail,
  AllDetail
} from '../type';
import {
  FlexItem,
  PostErrorTip,
  skeletonOneLine,
  skeletonTwoLine,
  skeletonImage
} from '../index.style';
import {
  formatDescription,
  formatVideoDuration,
  isEventFromLink
} from './utils';
import { LofterPostAuthor } from './Author';
import { LofterPostLike } from './Like';

const COVER_SIZE = {
  1: {
    width: 335,
    height: 188
  },
  2: {
    width: 197,
    height: 267
  }
}
export const Container = styled.div<{ size: number }>`
  display: block;
  width: ${({ size }) => rem(COVER_SIZE[size].width)};
  margin-bottom: ${rem(32)};
  position: relative;

  ${({ size }) => (
    size === 2
      ? `
        &:not(:nth-child(3n+1)) {
          margin-left: ${rem(47.5)};
        }
      ` : `
        &:not(:nth-child(2n+1)) {
          margin-left: ${rem(16)};
        }
      `
  )}
`;

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

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

export const CoverBox = styled.div`
  position: relative;
`;

export const VideoCoverIconSvg = styled.svg`
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
`;
export const VideoCoverIcon = () => (
  <VideoCoverIconSvg
    width={rem(100)}
    height={rem(100)}
    viewBox="0 0 100 100"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle
      cx="50"
      cy="50"
      r="50"
      fill="black"
      fillOpacity="0.2"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M35 46.4453C35 38.8088 35 34.9905 36.5959 32.8588C37.9866 31.0012 40.1154 29.839 42.4301 29.6736C45.0861 29.4839 48.298 31.5487 54.7217 35.6782L60.2512 39.2329C65.8254 42.8163 68.6125 44.608 69.5751 46.8862C70.4162 48.8769 70.4162 51.1231 69.5751 53.1138C68.6125 55.392 65.8254 57.1837 60.2512 60.7671L54.7217 64.3218C48.298 68.4513 45.0861 70.5161 42.4301 70.3263C40.1154 70.161 37.9866 68.9988 36.5959 67.1412C35 65.0095 35 61.1912 35 53.5547V46.4453Z"
      fill="white"
    />
  </VideoCoverIconSvg>
);

export const VideoDuration = styled.div`
  position: absolute;
  right: ${rem(16)};
  bottom: ${rem(16)};
  padding: ${rem(3)} ${rem(13)};
  border-radius: ${rem(20)};
  font-size: ${rem(24)};
  line-height: ${rem(34)};
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
`;
export const Title = styled.div<{ skeleton?: boolean }>`
  margin-top: ${rem(16)};
  height: ${rem(40)};
  font-size: ${rem(28)};
  line-height: ${rem(40)};
  color: #2e2e2e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  ${({ skeleton }) => (
    skeleton ? skeletonOneLine : ''
  )}
  .nw-dark-mode &{
    color: #ccc;
  }
`;
export const Description = styled.div<{ skeleton?: boolean }>`
  margin-top: ${rem(8)};
  height: ${rem(34)};
  font-size: ${rem(24)};
  line-height: ${rem(34)};
  color: #b3b3b3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  ${({ skeleton }) => (
    skeleton ? skeletonOneLine : ''
  )}
  .nw-dark-mode &{
    color: #888;
  }
`;
export const MoreInfo = styled.div`
  margin-top: ${rem(12)};
  display: flex;
  flex-direction: row;
`;

export class LofterPostColumnCard extends React.Component<{
  postCardConfig: PostCardConfig,
  size?: 1 | 2,
  showAuthor?: boolean,
  showLike?: boolean,
  post?: false | AllDetail,
}> {
  render() {
    const {
      post,
      postCardConfig,
      showAuthor,
      showLike,
      size = 1
    } = this.props;
    const {
      cover,
      title,
      description
    } = postCardConfig;

    const skeleton = !post;

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

    return (
      <Container
        size={size}
        onClick={(event) => {
          if (
            post
            && !isEventFromLink(event)
          ) {
            window.location.href = post.postPageUrl;
          }
        }}
      >
        <CoverBox>
          <Cover
            size={size}
            src={resizedCover}
            skeleton={skeleton}
          />
          {
            post && post.videoPostView && (
              <div>
                <VideoCoverIcon />
                <VideoDuration>{formatVideoDuration(post.videoPostView.videoInfo.duration)}</VideoDuration>
              </div>
            )
          }
        </CoverBox>
        <Title
          skeleton={(!title) && skeleton}
        >{title || (post && post.title)}</Title>
        <Description
          skeleton={(!description) && skeleton}
          dangerouslySetInnerHTML={{
            __html: formatDescription(description || (post && post.digest))
          }}
        />
        {
          (showAuthor || showLike) && (
            <MoreInfo>
              {
                showAuthor && (
                  <FlexItem
                    flex={1}
                  >
                    <LofterPostAuthor
                      blogInfo={post && post.blogInfo}
                    />
                  </FlexItem>
                )
              }
              {
                showLike && post && (
                  <FlexItem
                    flex={0}
                  >
                    <LofterPostLike
                      post={post}
                    />
                  </FlexItem>
                )
              }
            </MoreInfo>
          )
        }
        {
          post === false && (
            <PostErrorTip>文章状态异常</PostErrorTip>
          )
        }
        {
          (!postCardConfig.postId) && (
            <PostErrorTip>未指定文章/合集/推集</PostErrorTip>
          )
        }
      </Container>
    )
  }
}