import * as React from 'react';
import styled from 'styled-components';

import { BlogInfo } from '../type';
import {
  rem,
  zIndex
} from '../../style/function.style';

import {
  skeletonOneLine,
  skeletonImage
} from '../index.style';

const Container = styled.a`
  width: 100%;
  display: flex;
  flex-direction: row;
`;

const AuthorAvatar = styled.div<{ src: string, skeleton?: boolean }>`
  display: block;
  flex: 0 0 auto;
  width: ${rem(32)};
  height: ${rem(32)};
  border-radius: 50%;
  margin-right: ${rem(8)};
  background-image: url(${({ src }) => src});
  background-repeat: no-repeat;
  background-size: cover;

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

const AuthorName = styled.span<{ skeleton?: boolean }>`
  display: block;
  flex: 0 1 auto;
  color: #B3B3B3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  ${({ skeleton }) => (
    skeleton ? `
      width: 20%;
      ${skeletonOneLine}
    ` : ''
  )}
  .nw-dark-mode &{
    color: #888;
  }
`;


export class LofterPostAuthor extends React.Component<{
  blogInfo?: BlogInfo
}> {
  render () {
    const {
      blogInfo
    } = this.props;
    const skeleton = !blogInfo;
    return (
      <Container
        href={`https://${blogInfo ? blogInfo.blogName : 'www'}.lofter.com/`}
      >
        <AuthorAvatar
          skeleton={skeleton}
          src={blogInfo?.bigAvaImg}
        />
        <AuthorName
          skeleton={skeleton}
        >{blogInfo?.blogNickName}</AuthorName>
      </Container>
    )
  }
}