import * as React from 'react'
import smoothscroll from 'smoothscroll-polyfill'

import { Props, State, ColDetail } from './type'

import { CollectionItem } from './collection-item'
import { InviteButton } from './invite-button'

import { BaseComponent } from '../base-component'

import { fetchInviteColList, fetchMyInviteColList } from './actions'

import {
  Container,
  InviteContainer,
  InviteListContainer,
  Title,
  RefreshButton
} from './index.style'

smoothscroll.polyfill()

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

  state = new State()

  listContainerRef: any = null

  static getDerivedStateFromProps(props: Props, state: State) {
    let arr: ColDetail[] = []
    arr.length = props.colShowCount
    arr.fill({} as ColDetail)
    if (state.loading) {
      return {
        inviteColList: arr
      }
    }
  }

  getInviteList = (type?: string) => {
    this.setState({
      loading: true
    })
    // loading
    fetchInviteColList({
      limit: this.props.colShowCount,
      lastTime: this.props.isEdit ? 0 : this.state.lastTime,
      activityId: this.props.activityId
    }).then(res => {
      this.setState({
        inviteColList: res.data.collections,
        lastTime: res.data.lastTime,
        loading: false
      })
      if (type === 'refresh') {
        this.listContainerRef.scrollIntoView({ behavior: 'smooth' })
      }
    })
  }

  getMyInviteList = () => {
    fetchMyInviteColList({
      activityId: this.props.activityId
    }).then(res => {
      this.setState({
        myInviteColList: res.data.collections,
      })
    })
  }

  componentDidMount() {
    this.getInviteList()
    this.getMyInviteList()
  }

  componentDidUpdate(preProps: any) {
    if (
      preProps.colShowCount !== this.props.colShowCount
        || preProps.activityId !== this.props.activityId
    ) {
      this.getInviteList()
    }
  }

  refresh = () => {
    this.getInviteList()
    this.getMyInviteList()
  }

  render() {
    const {
      isEdit,
      style,
      marginTop,
      marginBottom
    } = this.props

    const {
      inviteColList,
      myInviteColList
    } = this.state

    return (
      <BaseComponent {...this.props}>
        <div
          style={{  overflow: 'hidden' }}
        >
          <Container 
            style={{
              ...style,
              width: null
            }}
            conStyle={{
              marginTop,
              marginBottom,
            }}
          >
            <InviteContainer
              ref={ref => this.listContainerRef = ref}
            >
              <Title>
                找到你志同道合的共创好友！
                <InviteButton
                  refresh={this.refresh}
                  myInviteLength={myInviteColList.length}
                  activityId={this.props.activityId}
                />
              </Title>
              <InviteListContainer>
                {
                  inviteColList.map(item => {
                    return (
                      <CollectionItem
                        key={item.id}
                        colDetail={item}
                        className="col-item"
                        type="other"
                        refresh={this.refresh}
                      />
                    )
                  })
                }
              </InviteListContainer>
              <RefreshButton
                onClick={this.getInviteList.bind(this, 'refresh')}
              >
                <img
                  className="icon"
                  src="https://lofter.lf127.net/1637236300994/action_icon_refresh_medium_normal_light.png"
                />
                换一批
              </RefreshButton>
            </InviteContainer>
            {
              myInviteColList.length
                ? (
                  <InviteContainer>
                    <Title>
                      我发布的邀请 {myInviteColList.length}/3
                    </Title>
                    <InviteListContainer>
                      {
                        myInviteColList.map(item => {
                          return (
                            <CollectionItem
                              key={item.id}
                              colDetail={item}
                              className="col-item"
                              type="me"
                              refresh={this.refresh}
                            />
                          )
                        })
                      }
                    </InviteListContainer>
                  </InviteContainer>
                ) : null
            }
          </Container>
        </div>
      </BaseComponent>
    )
  }

}