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

import {
  Props,
  State
} from './type'
import { TemplateActivityContext } from '../common/template-context'
import PostList from './post-list'
import { deepClone } from '../utils/deepclone'


export class TemplateActivityPostList extends React.Component<Props, State> {
  static defaultProps = new Props()

  state = new State()

  static contextType = TemplateActivityContext
  context: React.ContextType<typeof TemplateActivityContext>

  public render() {
    const {
      isEdit,
      style,
      backgroundColor,
      postConfigs: propsPostConfigs
    } = this.props
    const data = this.context?.activityInfo?.actEventInfo.postsConfig
    // 设置 postConfig 默认值
    let postConfigs = deepClone(propsPostConfigs)
    if (data && (postConfigs.length < data.length)) {
      postConfigs = postConfigs.concat(new Array(data.length - postConfigs.length).fill({}))
    }
    // 配置 default 值
    postConfigs.forEach(item => {
      if (!item.descImgHeight) {
        item.descImgHeight = 1.33
      }
      if (!item.theme) {
        item.theme = 'theme-1'
      }
      if (!item.maxLine) {
        item.maxLine = 3
      }
      if (!item.maxPostCount) {
        item.maxPostCount = 25
      }
    })
    return (
      <div style={style}>
        {
          this.context === null && isEdit
            ? (
              <Styled.EmptyContainer>
                请添加该组件至 [模板活动-容器]中
              </Styled.EmptyContainer>
            )
            : this.context?.activityInfo?.actEventInfo.postsConfig || !isEdit
              ? (
                <PostList
                  backgroundColor={backgroundColor}
                  data={this.context?.activityInfo?.actEventInfo.postsConfig}
                  postConfigs={postConfigs}
                  isEdit={isEdit}
                  loading={this.context?.isLoading}
                />
              )
              : (
                <Styled.EmptyContainer>
                  该模板活动未配置作品展示模块
                </Styled.EmptyContainer>
              )
        }
      </div>
    )
  }
}