import * as React from 'react';

import { Image } from '../image'
import { gotToCol, goToUserPage } from '../actions'
import { formatNumber } from '../../utils/format'
import { ColDetail, ColConfig } from '../type'

import {
  Container,
  Header,
  HeaderTag,
  HeaderImageBorder,
  HeaderView,
  HeaderPost,
  Title,
  Description,
  EmptyDescription,
  InfoContainer,
  HeaderImageBg1,
  HeaderImageBg2,
  UserInfo,
  LoadingCol
} from './index.style'

interface Props {
  colDetail: ColDetail;
  key: React.Key;
  className: string;
  config: ColConfig;
}

export const VerticalCol = ({
  key,
  colDetail,
  className,
  config
}: Props) => {
  
  return (
    <Container key={key} className={className}>
      {
        colDetail?.name ? (
          <>
            <Header
              onClick={() => {
                gotToCol(
                  colDetail?.blogInfo?.blogName,
                  colDetail.id
                )
              }}
            >
              <HeaderImageBg2 />
              <HeaderImageBg1 />
              <Image
                src={config?.cover?.url || colDetail?.coverUrl}
                width={307}
                height={307}
                className="header-img"
              />
              <HeaderImageBorder />
              {
                colDetail?.tags
                  ? (
                    <HeaderTag>
                      {`# ${colDetail.tags.split(',')[0]}`}
                    </HeaderTag>
                  ) : null
              }
              {
                colDetail?.viewCount
                  ? (
                    <HeaderView>
                      {formatNumber(colDetail.viewCount)}浏览
                    </HeaderView>
                  ) : null
              }
              {
                colDetail?.postCount
                  ? (
                    <HeaderPost>
                      {formatNumber(colDetail.postCount)}篇
                    </HeaderPost>
                  ) : null
              }
            </Header> 
            <InfoContainer>
              <Title
                onClick={() => {
                  gotToCol(
                    colDetail?.blogInfo?.blogName,
                    colDetail.id
                  )
                }}
              >
                {config?.title || colDetail?.name}
              </Title>
              {
                config?.description || colDetail?.description
                  ? (
                    <Description
                      onClick={() => {
                        gotToCol(
                          colDetail?.blogInfo?.blogName,
                          colDetail.id
                        )
                      }}
                    >
                      {config?.description || colDetail?.description}
                    </Description>
                  ) : <EmptyDescription />
              }
              <UserInfo
                onClick={() => {
                  goToUserPage(colDetail?.blogInfo?.blogName)
                }}
              >
                <Image
                  src={colDetail?.blogInfo?.bigAvaImg}
                  width={32}
                  height={32}
                  className="avatar"
                />
                <div className="name">
                  {colDetail?.blogInfo?.blogNickName}
                </div>
              </UserInfo>
            </InfoContainer>
          </>
        )
        : (
          <LoadingCol>
            {
              colDetail.id 
                ? (
                  <span className="tips">
                    { colDetail.id }无数据
                  </span>
                )
                : null
            }
            {
              colDetail.id === 0
                ? (
                  <span className="tips">
                    请输入合集 id
                  </span>
                )
                : null
            }
            <span className="img" />
            <div className="title" />
            <div className="desc" />
            <div className="user">
              <span className="avatar" />
              <span className="name" />
            </div>
          </LoadingCol>
        )
      }
    </Container>
  )
}