import * as React from 'react'

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

import { ColDetail, ColConfig } from '../type'

import {
  Container,
  Cover,
  HeaderImageBg2,
  HeaderImageBg1,
  HeaderImageBorder,
  Info,
  InfoTitle,
  InfoDescription,
  EmptyInfoDescription,
  InfoUser,
  LoadingCol
} from './index.style'

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

}


export const HorizontalCol = ({
  key,
  className,
  colDetail,
  config
}: Props) => {
  return (
    <Container key={key} className={className}>
      {
        colDetail?.name ? (
          <>
            <Cover
              onClick={() => {
                gotToCol(
                  colDetail?.blogInfo?.blogName,
                  colDetail.id
                )
              }}
            >
              <HeaderImageBg2 />
              <HeaderImageBg1 />
              <Image
                src={config?.cover?.url || colDetail?.coverUrl}
                width={160}
                height={160}
                className="cover-img"
              />
              <HeaderImageBorder />
            </Cover> 
            <Info>
              <InfoTitle
                onClick={() => {
                  gotToCol(
                    colDetail?.blogInfo?.blogName,
                    colDetail.id
                  )
                }}
              >
                {config?.title || colDetail?.name}
              </InfoTitle>
              {
                config?.description || colDetail?.description
                  ? (
                    <InfoDescription
                      onClick={() => {
                        gotToCol(
                          colDetail?.blogInfo?.blogName,
                          colDetail.id
                        )
                      }}
                    >
                      {config?.description || colDetail?.description}
                    </InfoDescription>
                  )
                  : <EmptyInfoDescription />
              }
              <InfoUser
                onClick={() => {
                  goToUserPage(colDetail?.blogInfo?.blogName)
                }}
              >
                <div className="user">
                  <Image
                    className="avatar"
                    width={32}
                    height={32}
                    src={colDetail.blogInfo.bigAvaImg}
                  />
                  <div className="name">
                    {colDetail.blogInfo.blogNickName}
                  </div>
                </div>
                <div className="count">
                  <span className="view">{formatNumber(colDetail.viewCount)}浏览</span>
                  <span className="post">{formatNumber(colDetail.postCount)}篇</span>
                </div>
              </InfoUser>
            </Info>
          </>
        ) : (
          <LoadingCol>
            <div className="cover">
              <span className="img" />
            </div>
            <div className="info">
              {
                colDetail.id 
                  ? (
                    <span className="tips">
                      { colDetail.id }无数据
                    </span>
                  )
                  : null
              }
              {
                colDetail.id === 0
                  ? (
                    <span className="tips">
                      请输入合集 id
                    </span>
                  )
                  : null
              }
              <div className="title" />
              <div className="desc" />
              <div className="user">
                <span className="avatar" />
                <span className="name" />
              </div>
            </div>
          </LoadingCol>
        )
      }
    </Container>
  )
}