import React, { PropTypes } from 'react'
import { Link } from 'react-router'
import Icon from '../Icon'
import styles from './index.css'

const propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
  height: PropTypes.string,
  hr: PropTypes.bool,
  presetStyle: PropTypes.string,
  title: PropTypes.string,
  detail: PropTypes.string,
  image: PropTypes.string,
  accessory: PropTypes.string,
  to: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
  ]),
}

const defaultProps = {
  className: '',
  to: '',
}

const presetStyles = {
  basic: 'basic',
  rightDetail: 'rightDetail',
  leftDetail: 'leftDetail',
  subTitle: 'subTitle',
}

const accessories = {
  disclosureIndicator: 'disclosureIndicator',
  checkmark: 'checkmark',
  detail: 'detail',
}

const TableViewCell = ({
  className,
  children,
  height,
  hr,
  presetStyle,
  title,
  detail,
  image,
  accessory,
  to,
  ...other,
}) => {
  let imageContent =
    image ? <div className={styles.image} style={{ backgroundImage: `url(${image})` }}></div> : null

  let cellContent = null
  switch (presetStyle) {
    case presetStyles.basic:
      cellContent = <div className={styles.basic}>{title}</div>
      break
    case presetStyles.rightDetail:
      cellContent = (
        <div className={styles.rightDetail}>
          {title}<span className={styles.detailContent}>{detail}</span>
        </div>
      )
      break
    case presetStyles.leftDetail:
      cellContent = (
        <div className={styles.leftDetail}>
          {title}<span className={styles.detailContent}>{detail}</span>
        </div>
      )
      break
    case presetStyles.subTitle:
      cellContent = (
        <div className={styles.subTitle}>
          {title}<br /><span className={styles.detailContent}>{detail}</span>
        </div>
      )
      break
    default:
      cellContent = null
      break
  }

  let accessoryContent = null
  switch (accessory) {
    case accessories.disclosureIndicator:
      accessoryContent = <Icon className={styles.disclosureIndicator} type="angle-right" />
      break
    case accessories.checkmark:
      accessoryContent = <Icon className={styles.checkmark} type="check" />
      break
    case accessories.detail:
      accessoryContent = <Icon className={styles.detail} type="info-circle" />
      break
    default:
      break
  }

  function handleClick(e) {
    e.preventDefault()
  }

  return (
    <li>
      <Link onClick={to === '' ? handleClick : null}
        className={`${styles.tableViewCell} ${className}`} style={{ height }} to={to} {...other}
      >
        {imageContent}{cellContent}{accessoryContent}
        { presetStyle === undefined ? children : null }
      </Link>
      {hr !== undefined ? <hr className={styles.hr} /> : null}
    </li>
  )
}

TableViewCell.propTypes = propTypes
TableViewCell.defaultProps = defaultProps
TableViewCell.defaultProps = defaultProps

export default TableViewCell