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 Theme3 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
                  ? (
                    <>
                      {
                        item.title
                          ? (
                            <Styled.ListItemTextTitle>
                              <span>
                                {item.title}
                              </span>
                            </Styled.ListItemTextTitle>
                          ) 
                          : null
                      }
                      <Styled.ListItemTextContent 
                        maxLine={
                          postConfig.maxLine
                            ? postConfig.maxLine
                            : item.title ? 3 : 6
                        }
                      >
                        {item.digest}
                      </Styled.ListItemTextContent>
                      {
                        !postConfig.hideUser
                          ? (
                            <Styled.ListItemInfoUser>
                              <Image
                                className="img"
                                src={item.blogInfo?.bigAvaImg} 
                                width={32}
                                height={32}
                              />
                              <div className="nickName">{item.blogInfo?.blogNickName}</div>
                            </Styled.ListItemInfoUser>
                          )
                          : null
                      }
                    </>
                  )
                  : (
                    <>
                      <Styled.ListItemImageContainer>
                        <Image
                          className="img"
                          src={item.imageUrl} 
                          defaultImg={DEFAULT_IMG[item.type]}
                          width={291}
                          height={163}
                        />
                        {
                          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>
                        <Styled.ListItemInfoTitle maxLine={postConfig.maxLine}>
                          {item.title}
                        </Styled.ListItemInfoTitle>
                        {
                          !postConfig.hideUser
                            ? (
                              <Styled.ListItemInfoUser>
                                <Image
                                  className="img"
                                  src={item.blogInfo?.bigAvaImg} 
                                  width={32}
                                  height={32}
                                />
                                <span className="nickName">{item.blogInfo?.blogNickName}</span>
                              </Styled.ListItemInfoUser>
                            )
                            : null
                        }
                      </Styled.ListItemInfo>
                    </>
                  )
              }
            </Styled.ListItem>
          ))
        }
      </Styled.ListContainer>
    )
  }
}

export default React.memo(Theme3)