import React from 'react'
import { Label } from 'atoms/Text/Label'
import { Heading } from 'atoms/Text/Heading'
import { Paragraph } from 'atoms/Text/Paragraph'
import { LineBrokenText } from 'atoms/Text/LineBrokenText'
import { resetIndex, IconWrapper, createIconGrid } from '../GridList'

const listView = [
  { component: Label, storyTitle: 'Label', attr: { breedType: 'label' } },
  { component: Paragraph, storyTitle: 'Paragraph', attr: { breedType: 'paragraph' } },
  { component: LineBrokenText, storyTitle: 'Line Broken', attr: { breedType: 'line-broken' } },
  { component: Heading, storyTitle: 'Heading: H1', attr: { breedType: 'h1' } },
  { component: Heading, storyTitle: 'Heading: H2', attr: { breedType: 'h2' } },
  { component: Heading, storyTitle: 'Heading: H3', attr: { breedType: 'h3' } },
  { component: Heading, storyTitle: 'Heading: H4', attr: { breedType: 'h4' } },
  { component: Heading, storyTitle: 'Heading: H5', attr: { breedType: 'h5' } },
  { component: Heading, storyTitle: 'Heading: H6', attr: { breedType: 'h6' } },
].map(config => {
  const { component, storyTitle, attr } = config
  console.log({ storyTitle, attr })
  return createIconGrid(component, storyTitle, attr)
})

/**
 * ATOMS: TEXT
 */
export default class TextList extends React.Component {
  shouldComponentUpdate() {
    return false
  }
  render() {
    resetIndex()
    return <IconWrapper {...this.props}>{listView}</IconWrapper>
  }
}