import * as React from 'react'

import { VerticalCol } from './vertical-col'
import { HorizontalCol } from './horizontal-col'
import { fetchColDetail } from './actions'

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

import { Props, State, ColDetail } from './type'
import { 
  Container,
  EditorTip,
  Title,
  ListContainer
} from './index.style'

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

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

  componentDidMount() {
    this.fetch()
  }

  fetch = () => {
    const {
      cols
    } = this.props
    let colIds = [...cols].map(col => col.colId || 0)
    if (!colIds.length) return
    return fetchColDetail(
      colIds
    ).then(res => {
      this.setState({
        colDetails: res.data.collections
      })
    })
  }

  componentDidUpdate(preProps: any) {
    if (this.props.cols !== preProps.cols) {
      this.fetch()
    }
  }

  render() {
    const {
      isEdit,
      title,
      type,
      style,
      width,
      marginTop,
      marginBottom,
      cols
    } = this.props

    const {
      colDetails
    } = this.state

    const finalColDetails = !isEdit ? (
      colDetails.map((item, index) => {
        let newItem = {...item}
        // @ts-ignore
        newItem.index = index
        return newItem
      }).filter(item => (item.id && item.name) || (typeof item.id !== 'number' && !item.name) )
    ) : colDetails
    let finalCols = !isEdit ? finalColDetails.map(item => {
      // @ts-ignore
      return cols[item.index]
    }) : cols

    return (
      <BaseComponent {...this.props}>
        <div style={{ overflow: 'hidden' }}>
          <Container 
            style={{
              ...style,
              width: null
            }}
            conStyle={{
              width,
              marginTop,
              marginBottom,
            }}
          >
            {
              title && <Title>{title}</Title>
            }
            <ListContainer
              type={type}
            >
              {
                isEdit && colDetails.length === 0 
                  && <EditorTip>请在右侧编辑添加合集</EditorTip>
              }
              {
                finalColDetails.map((col, index) => {
                  return (
                    <>
                      {
                        type === 'vertical' && (
                          <VerticalCol 
                            className="col-item"
                            key={col.id} 
                            colDetail={col}
                            config={finalCols[index]}
                          />
                        )
                      }
                      {
                        type === 'horizontal' && (
                          <HorizontalCol 
                            className="col-item"
                            key={col.id} 
                            colDetail={col}
                            config={finalCols[index]}
                          />
                        )
                      }
                    </>
                  )
                })
              }
            </ListContainer>
          </Container>
        </div>
      </BaseComponent>
    )
  }
}