import _ from 'lodash';
import React, {Component, PropTypes} from 'react';
import Radium from 'radium';
import pureRender from 'pure-render-decorator';
import {Globalize} from '../../../globalize';
import TableCheckBox from './TableCheckBox.jsx';
import styles from './styles';

function getDescendantByDotNotation(obj, is, value) {
  if (typeof is == 'string')
    return getDescendantByDotNotation(obj, is.split('.'), value);
  else if (is.length==1 && value!==undefined)
    return obj[is[0]] = value;
  else if (is.length==0)
    return obj;
  else
    return getDescendantByDotNotation(obj[is[0]],is.slice(1), value);
}

@Radium @pureRender
class TableTd extends Component {
  render() {
    const {
      item,
      data,
      tableName,
      tableInfo,
      selectedItems,
      dataStyle
    } = this.props;
    let event = {};
    let value = getDescendantByDotNotation(data, item.key);
    let title;

    if(item.event) {
      event = _.mapValue(item.event, callback => callback(value, data));
    }

    if(item.dom) {
      const Dom = item.dom;
      value = (
        <Dom
          item={data}
          tableName={tableName}
          tableInfo={tableInfo}
          selectedItems={selectedItems}
        />
      );
    }
    else {
      if(item.key) {
        try {
          if(item.transformFunction) {
            value = item.transformFunction(data);
          }
          else {
            value = getDescendantByDotNotation(data, item.key);
            switch(item.globalize) {
              case 'msg':
                value = Globalize.formatMessage(value);
                break;
              case 'date':
                value = Globalize.formatDate(new Date(value), {datetime: 'short'});
                break;
              default:
            }
          }
        }
        catch(err) {
        }
        title = value;
        if(typeof value !== 'string' || value === '') {
          value = '--';
        }
      }
      else if(item.image) {
        value = (
          <img
            src={getDescendantByDotNotation(data, item.image)}
            style={styles.image}
          />
        );
      }
      if(item.link) {
        const href = getDescendantByDotNotation(data, item.link);
        if(href) {
          value = (
            <a
              href={href}
              target="_blank"
            >
              {value}
            </a>
          );
        }
      }
      if(item.dataInnerClassName || item.dataInnerStyle) {
        value = (
          <div
            title={title}
            className={item.dataInnerClassName}
            style={item.dataInnerStyle}
          >
            {value}
          </div>
        );
      }
    }

    return (
      <td
        className={item.dataClassName}
        style={[
          styles.thtd,
          dataStyle,
          item.dataStyle
        ]}
        {...event}
      >
        {value}
      </td>
    );
  }
}

@pureRender
class TableRow extends Component {
  render() {
    const {
      hasCheckbox,
      data,
      tableName,
      tableInfo,
      selectedItems,
      toggleSelect,
      dataStyle,
      columns
    } = this.props;
    return (
      <tr>
        {hasCheckbox &&
          <TableCheckBox
            item={data}
            tableName={tableName}
            tableInfo={tableInfo}
            selectedItems={selectedItems}
            toggleSelect={toggleSelect}
            style={dataStyle}
            key="table-checkbox"
          />
        }
        {columns.map((item, index) => (
          <TableTd
            item={item}
            data={data}
            tableName={tableName}
            tableInfo={tableInfo}
            selectedItems={selectedItems}
            dataStyle={dataStyle}
            key={index}
          />
        ))}
      </tr>
    );
  }
}

class TableBody extends Component {
  static propTypes = {
    tableInfo: PropTypes.object.isRequired,
    columns: PropTypes.array.isRequired,
  }

  render() {
    const {
      tableInfo,
      tableName,
      columns,
      hasCheckbox,
      selectedItems,
      toggleSelect,
      dataStyle
    } = this.props;
    return (
      <tbody>
        {tableInfo.data.map((item, index) => (
          <TableRow
            data={item}
            tableName={tableName}
            tableInfo={tableInfo}
            columns={columns}
            hasCheckbox={hasCheckbox}
            selectedItems={selectedItems}
            toggleSelect={toggleSelect}
            dataStyle={dataStyle}
            key={item.id}
          />
        ), this)}
      </tbody>
    );
  }
}

export default TableBody;