import React, { PropTypes } from 'react'
import { NavBar, TableView, Icon, Input } from '../../../index'
import styles from './index.css'

const propTypes = {
  className: PropTypes.string,
}

const CustomTableView = () =>
  <div className={`${styles.container}`}>
    <NavBar title="TableView">
      <NavBar.Item to="/home">
        <Icon type="chevron-left" />MeetUI
      </NavBar.Item>
    </NavBar>

    <TableView header="presetStyle">
      <TableView.Cell presetStyle="basic" title="Basic" hr />
      <TableView.Cell
        presetStyle="rightDetail"
        title="Right Detail"
        detail="Detail"
        hr
      />
      <TableView.Cell
        presetStyle="leftDetail"
        title="Left Detail"
        detail="Detail"
        hr
      />
      <TableView.Cell
        presetStyle="subTitle"
        title="SubTitle"
        detail="Detail"
        hr
      />
    <TableView.Cell height="88px">
        <Input type="checkbox" /> Custom
      </TableView.Cell>
    </TableView>

    <TableView header="accessory" footer="footer of accessory">
      <TableView.Cell
        presetStyle="basic"
        title="Disclosure Indicator"
        accessory="disclosureIndicator"
        hr
      />
      <TableView.Cell
        presetStyle="basic"
        title="Checkmark"
        accessory="checkmark"
        hr
      />
      <TableView.Cell
        presetStyle="basic"
        title="Detail"
        accessory="detail"
      />
    </TableView>
  </div>

CustomTableView.propTypes = propTypes

export default CustomTableView