import React from "react"
import PropTypes from "prop-types"
import { Column, List, Button } from "ui"
import { sizeInfo } from "ui/style"

export class MasterList extends React.Component {
  static propTypes = {
    capitalizedName: PropTypes.string,
    items: PropTypes.array,
    listData: PropTypes.func,
    onItemListClick: PropTypes.func,
    selectedItem: PropTypes.object,
    selectionModified: PropTypes.bool,
    onAddNewItem: PropTypes.func,
  }

  constructor(props) {
    super(props)
    this.state = {
      items: null,
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.items !== this.props.items) {
      this.setState({ items: nextProps.items })
    }
  }

  render() {
    const { selectedItem, selectionModified, capitalizedName } = this.props
    const { items } = this.state

    return (
      <Column fillParent>
        <Column.Item grow>
          <List
            items={items}
            render={(item, index) => {
              const data = item._id
                ? this.props.listData(item)
                : {
                    icon: "blank",
                    text: `[New ${capitalizedName}]`,
                  }
              return (
                <List.Item
                  key={item._id || "0"}
                  onClick={(e) => this.props.onItemListClick(e, index)}
                  open={item === this.props.selectedItem}>
                  <List.Icon name={data.icon} size={sizeInfo.listIcon} />
                  <List.Text>{data.text}</List.Text>
                  {item === selectedItem && selectionModified ? (
                    <List.Icon name="edit" size={sizeInfo.listIcon} />
                  ) : null}
                </List.Item>
              )
            }}
          />
        </Column.Item>
        <Column.Item height={sizeInfo.formColumnSpacing} />
        <Column.Item height={sizeInfo.buttonHeight}>
          <Button
            width="100%"
            color="inverse"
            onClick={this.props.onAddNewItem}
            text={`Add New ${capitalizedName}`}
          />
        </Column.Item>
      </Column>
    )
  }
}