import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Box, Icon } from '.'
import { sizeInfo, colorInfo, fontInfo } from './style'

class List extends Component {
  static propTypes = {
    children: PropTypes.node
  }

  render() {
    const { children } = this.props

    return (
      <div style={{
        position: 'absolute',
        width: '100%',
        height: '100%',
        fontSize: fontInfo.size.large,
        fontFamily: fontInfo.family,
      }}>
        <Box
          border={{ width: sizeInfo.listBorderWidth, color: colorInfo.listBorder }}
          radius={sizeInfo.formBoxRadius}>
          <div style={{
            height: '100%',
            width: '100%',
            overflowY: 'scroll',
          }}>
            {children}
          </div>
        </Box>
      </div>
    )
  }
}

List.Item = Radium(class ListItem extends Component {
  static propTypes = {
    children: PropTypes.node,
    active: PropTypes.bool,
    onClick: PropTypes.func
  }

  render() {
    const { children, active, onClick } = this.props

    return (
      <div style={{
        display: 'table-row',
        background: active ? colorInfo.listBackgroundActive : 'transparent',
        ':hover': {
          background: colorInfo.listBackgroundHover
        },
      }} onClick={onClick}>
        {children}
      </div>
    )
  }
})

List.Icon = Radium(class ListIcon extends Component {
  static propTypes = {
    name: PropTypes.string,
    size: PropTypes.number,
  }

  render() {
    const { size, name } = this.props
    let source = Icon.svgs[name] || Icon.svgs['placeholder']

    return (
      <img src={source} style={{
        display: 'table-cell',
        verticalAlign: 'middle',
        width: size,
        height: size,
        margin: sizeInfo.listIconMargin,
      }} />
    )
  }
})
List.Text = Radium(class ListText extends Component {
  static propTypes = {
    children: PropTypes.node,
  }

  render() {
    const { children } = this.props

    return (
      <span style={{
        display: 'table-cell',
        width: '100%',
        color: fontInfo.color.normal,
        align: 'left',
        verticalAlign: 'middle',
        textAlign: 'left',
        cursor: 'default',
      }}>{children}</span>
    )
  }
})

export default Radium(List)