import * as React from 'react'

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


import Tab from '../tab'

import { PostsShowConfig } from '../../template-activity-container/type'
import { PostConfig } from '../type'

import { getPostListByApi, getPostListByFile } from '../post-list/fetch-post'
import Theme1 from './theme1'
import Theme2 from './theme2'
import Theme3 from './theme3'

export interface PostData {
  imageUrl?: string;
  title?: string;
  link?: string;
  blogInfo?: {
    blogNickName?: string;
    bigAvaImg?: string;
  },
  /** 1文章 2图文 3音乐 4视频 5问答 6长文章 */
  type?: number;
  digest?: string;
  extraData?: {
    duration: number;
  }
}

interface Props {
  /** 作品展示模块数据 */
  data?: PostsShowConfig[];
  backgroundColor: string;
  /** 作品展示配置数据 */
  postConfigs: PostConfig[];
  isEdit?: boolean;
  loading?: boolean;
}

class PostList extends React.Component<Props> {
  state: {
    active: number;
    postData: PostData[];
    postDataLoading: boolean;
  } = {
    active: 0,
    postData: [],
    postDataLoading: true
  }

  handleTabChange = (index: number) => {
    this.setState({
      active: index
    })
    // 点击 tab 更新数据
    this.fetchPostData(index)
  }

  fetchPostData = async (index: number) => {
    if (!this.props.data) return
    const config = this.props.data[index]
    const showConfig = this.props.postConfigs[index]
    this.setState({
      postDataLoading: true
    })
    try {
      if (config.postsGenType === 'auto') {
        let res = await getPostListByApi({
          tag: config.showTag,
          type: config.autoType === 'day' ? 'date' : config.autoType,
          limit: showConfig.maxPostCount
        })
        this.setState({
          postData: res,
          postDataLoading: false
        })
      } else {
        let res = await getPostListByFile(
          config.activityId,
          config.id
        )
        this.setState({
          postData: res,
          postDataLoading: false
        })
      }
    } catch {
      this.setState({
        postDataLoading: false
      })
    }
  }

  componentDidMount() {
    this.fetchPostData(this.state.active)
  }

  componentDidUpdate(preProps) {
    const showCount = this.props.postConfigs.map(item => item.maxPostCount)
    const preShowCount = preProps.postConfigs.map(item => item.maxPostCount)
    let showCountDiff = false
    showCount.forEach((item, index) => {
      if (item !== preShowCount[index]) {
        showCountDiff = true
      }
    })
    if (
      this.props.data !== preProps.data
      || showCountDiff
    ) {
      this.fetchPostData(this.state.active)
    }
  }

  renderLoading() {
    const temp = new Array(8).fill(6)
    const { postConfigs } = this.props
    const { active } = this.state
    if (postConfigs[active]?.theme === 'theme-1') {
      return (
        <Styled.LoadingContainerTheme1
        >
          {
            temp.map((_item, index) => (
              <div className="item" key={index}>
                <div className="img" />
                <div className="info">
                  <div className="title" />
                  <div className="user">
                    <div className="avatar" />
                    <div className="nickName" />
                  </div>
                </div>
              </div>
            ))
          }
        </Styled.LoadingContainerTheme1>
      )
    } else {
      return (
        <Styled.LoadingContainerTheme2
        >
          {
            temp.map((_item, index) => (
              <div className="item" key={index}>
                <div className="img" />
                <div className="info">
                  <div className="user">
                    <div className="avatar" />
                    <div className="nickName" />
                  </div>
                  <div className="title" />
                </div>
              </div>
            ))
          }
        </Styled.LoadingContainerTheme2>
      )
    }
  } 

  public render() {
    const {
      backgroundColor,
      data,
      postConfigs,
      isEdit,
      loading
    } = this.props
    const {
      postData,
      active,
      postDataLoading
    } = this.state
    return (
      <Styled.Container backgroundColor={backgroundColor}>
        <Tab
          tabList={data?.map(item => item.cname)}
          onChange={this.handleTabChange}
        />
        <Styled.ListContainer>
          {
            data && data.length
              ? (
                <Styled.ListItem>
                  {
                    postConfigs[active]?.descImgUrl
                      ? (
                        <Styled.ListItemDescImg
                          height={postConfigs[active]?.descImgHeight}
                          src={postConfigs[active]?.descImgUrl.url}
                          alt="header"
                        />
                      )
                      : null
                  }
                  {
                    !postDataLoading
                      ? (
                        <>
                          {
                            postConfigs[active]?.theme === 'theme-1'
                              ? <Theme1 data={postData} postConfig={postConfigs[active]} />
                              : postConfigs[active]?.theme === 'theme-2'
                                ? <Theme2 data={postData} postConfig={postConfigs[active]} />
                                : postConfigs[active]?.theme === 'theme-3'
                                  ? <Theme3 data={postData} postConfig={postConfigs[active]} />
                                  : null
                          }
                        </>
                      )
                      : this.renderLoading()
                  }
                </Styled.ListItem>
              )
              : isEdit
                ? (
                  <Styled.EmptyContainer>
                    未配置作品展示模块
                  </Styled.EmptyContainer>
                )
                : this.renderLoading()
          }
        </Styled.ListContainer>
      </Styled.Container>
    )
  }
}

export default React.memo(PostList)