import FlexTableExample from '../FlexTable/FlexTable.example'
import Immutable from 'immutable'
import React, { Component } from 'react'
import styles from './Application.css'
import { generateRandomList } from './utils'
import { render } from 'react-dom'
import shouldPureComponentUpdate from 'react-pure-render/function'
import '../../styles.css'

const COMPONENTS = ['AutoSizer', 'Grid', 'FlexTable', 'InfiniteLoader', 'VirtualScroll']

// HACK Generate arbitrary data for use in example components :)
const list = Immutable.List(generateRandomList())

class Application extends Component {
  shouldComponentUpdate = shouldPureComponentUpdate

  constructor (props) {
    super(props)

    // Support deep links to specific components
    const matches = window.location.search.match('component=(.+)')
    const activeComponent = matches && COMPONENTS.includes(matches[1])
      ? matches[1]
      : 'VirtualScroll'

    this.state = {
      activeComponent
    }
  }

  render () {
    return (
      <FlexTableExample
        className={styles.column}
        list={list}
      />
    )
  }
}

render(
  <Application/>,
  document.getElementById('root')
)

// Import and attach the favicon
document.querySelector('[rel="shortcut icon"]').href = require('file!./favicon.png')
