import * as React from 'react'

import * as Styled from './index.style'

import { PostData } from '../index'
import { PostConfig } from '../../type'
import { DEFAULT_IMG, formatVideoDuration, navigate } from '../utils'
import Image from '../image'


interface Props {
  data?: PostData[];
  postConfig: PostConfig;
}

class Theme2 extends React.Component<Props> {
  public render() {
    const {
      data,
      postConfig
    } = this.props
    return (
      <Styled.ListContainer>
        {
          data?.map((item, index) => (
            <Styled.ListItem
              key={index}
              onClick={navigate.bind(this, item.link)}
            >
              {
                item.type === 1 && !item.imageUrl
                  ? (
                    <>
                      <Styled.ListItemTextContainer>
                        <Styled.ListItemTextTitle>
                          {item.title}
                        </Styled.ListItemTextTitle>
                        <Styled.ListItemTextContent 
                          maxLine={
                            postConfig.maxLine
                              ? postConfig.maxLine
                              : item.title ? 4 : 7
                          }
                        >
                          {item.digest}
                        </Styled.ListItemTextContent>
                      </Styled.ListItemTextContainer>
                      {
                        !postConfig.hideUser
                          ? (
                            <Styled.ListItemInfoUser>
                              <Image
                                className="img"
                                src={item.blogInfo?.bigAvaImg} 
                                width={32}
                                height={32}
                              />
                              <div className="nickName">{item.blogInfo?.blogNickName}</div>
                            </Styled.ListItemInfoUser>
                          )
                          : (
                            // 空元素，占位
                            <Styled.ListItemInfoUser />
                          )
                      }
                    </>
                  )
                  : (
                    <>
                      <Styled.ListItemImageContainer>
                        <Image
                          className="img"
                          src={item.imageUrl} 
                          defaultImg={DEFAULT_IMG[item.type]}
                          width={300}
                          height={300}
                        />
                        {
                          item.type === 3 || item.type === 4
                            ? (
                              <img
                                className="player"
                                src="https://lofter.lf127.net/1618683892189/player.png"
                                alt="play"
                              />
                            )
                            : null
                        }
                        {
                          item.extraData?.duration
                            ? (
                              <span
                                className="duration"
                              >
                                {formatVideoDuration(item.extraData?.duration)}
                              </span>
                            )
                            : null
                        }
                      </Styled.ListItemImageContainer>
                      <Styled.ListItemInfo>
                        {
                          !postConfig.hideUser
                            ? (
                              <Styled.ListItemInfoUser>
                                <Image
                                  className="img"
                                  src={item.blogInfo?.bigAvaImg} 
                                  width={32}
                                  height={32}
                                />
                                <div className="nickName">{item.blogInfo?.blogNickName}</div>
                              </Styled.ListItemInfoUser>
                            )
                            : (
                              // 空元素，占位
                              <Styled.ListItemInfoUser />
                            )
                        }
                        <Styled.ListItemInfoTitle maxLine={postConfig.maxLine}>
                          {item.title}
                        </Styled.ListItemInfoTitle>
                      </Styled.ListItemInfo>
                    </>
                  )
              }
            </Styled.ListItem>
          ))
        }
      </Styled.ListContainer>
    )
  }
}

export default React.memo(Theme2)
