import React from 'react'
import Vector from 'atoms/Vector'
import { ParagraphPlaceholderProps } from './typings'
import TextPlaceholder from '../TextPlaceholder'
import { stripMeasurement } from '../deps'

class ParagraphPlaceholder extends React.PureComponent<
  ParagraphPlaceholderProps
> {
  static defaultProps = {
    widthList: [97, 100, 94, 90, 98, 95, 98, 40],
    rows: 8,
    width: '100%',
    height: '100%',
    itemHeight: 24,
    lineSpacing: 10,
    isDynamicViewBox: true,
  }

  getRowStyle = (i: number) => {
    let { rows, widthList, height, itemHeight, lineSpacing } = this.props
    itemHeight = stripMeasurement(itemHeight)
    lineSpacing = stripMeasurement(lineSpacing)

    const lineYPosition = i * (itemHeight + lineSpacing)

    return {
      // maxHeight: `${100 / (rows * 2 - 1)}%`,
      width: `${widthList[(i + widthList.length) % widthList.length]}%`,
      height: itemHeight,
      transform: `translate(0, ${lineYPosition}px)`,
    }
  }

  getRows = () => {
    const { rows, lineSpacing } = this.props
    const range: undefined[] = Array.apply(undefined, Array(rows))
    return range.map((_, i) => (
      <TextPlaceholder
        nowrap={true}
        style={this.getRowStyle(i)}
        lineSpacing={i !== 0 ? lineSpacing : 0}
        key={i}
      />
    ))
  }

  render() {
    let {
      fill,
      widthList,
      rows,
      height,
      itemHeight,
      lineSpacing,
      ...remainingProps
    } = this.props

    // @note this
    itemHeight = stripMeasurement(itemHeight)
    lineSpacing = stripMeasurement(lineSpacing)
    height = stripMeasurement(height)

    // providing priority only to the rows
    let itemLength = rows ? rows : widthList.length
    height = itemLength * (itemHeight + lineSpacing)

    const viewBox = `0 0 100% ${height}`
    const attributes = {
      viewBox,
      height,
      ...remainingProps,
    }
    return <Vector {...attributes}>{this.getRows()}</Vector>
  }
}
export { ParagraphPlaceholder }
export default ParagraphPlaceholder