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

@Radium
export class List extends Component {
  static propTypes = {
    data: PropTypes.array,
    render: PropTypes.func.isRequired,
  }

  render() {
    const { data, render } = this.props

    return (
      <Box
        border={{ width: sizeInfo.listBorderWidth, color: colorInfo.listBorder }}
        radius={sizeInfo.formBoxRadius} style={{
          position: 'absolute',
          overflowY: 'hidden',
          fontSize: fontInfo.size.large,
          fontFamily: fontInfo.family,
          overflow: 'scroll',
        }}>
        {data ? data.map(render) : null}
      </Box>
    )
  }
}

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={{
        width: '100%',
        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={{
        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={{
        color: fontInfo.color.normal,
        align: 'left',
        textAlign: 'left',
        cursor: 'default',
      }}>{children}</span>
    )
  }
})