import { get, isEmpty, map } from '../../utils/lodash';
import React, { PropTypes } from 'react';

const isValidArray = (value) => (value && Array.isArray(value) && value.length);
const isValidChildren = (value) => {
  if (typeof value === 'undefined' || value === null || isEmpty(value)) return false;

  if (typeof value.type === 'function' &&
      typeof get(value, ['props', 'value']) === 'undefined') return false;

  return true;
};

const Link = ({ value }) => <a href={value}>{value}</a>;
Link.propTypes = { value: PropTypes.string.isRequired };

const ListItem = ({ value }) => (value ? <li>{value}</li> : null);
ListItem.propTypes = { value: PropTypes.string };

const AddressList = ({ value }) => {
  if (!isValidArray(value)) return null;

  const items = map(value, (item, i) => !isEmpty(item) && (
    <li key={i}>
      <ul>
        <ListItem value={item.address} />
        <ListItem value={item.city} />
        <ListItem value={item.state} />
        <ListItem value={item.post_code} />
        <ListItem value={item.country} />
      </ul>
    </li>
  ));
  if (isEmpty(items)) return null;

  return <ol className="explorer__result-item__addresses">{items}</ol>;
};
AddressList.propTypes = { value: PropTypes.array };

const IdentificationList = ({ value }) => {
  if (!isValidArray(value)) return null;

  const items = map(value, (item, i) => !isEmpty(item) && (
    <li key={i}>
      <table>
        <tbody>
          <Row label="Type">{item.type}</Row>
          <Row label="Number">{item.number}</Row>
          <Row label="Country">{item.country}</Row>
          <Row label="Issue Date">{item.issue_date}</Row>
          <Row label="Expiration Date">{item.expiration_date}</Row>
        </tbody>
      </table>
    </li>
  ));
  if (isEmpty(items)) return null;

  return <ol className="explorer__result-item__identifications">{items}</ol>;
};
IdentificationList.propTypes = { value: PropTypes.array };

const UnorderedList = ({ value }) => {
  if (!isValidArray(value)) return null;

  const items = map(value, (item, i) => !isEmpty(value) && (
    <ListItem key={i}>{item}</ListItem>
  ));
  if (isEmpty(items)) return null;
  return <ul>{items}</ul>;
};
UnorderedList.propTypes = { value: PropTypes.array };

const Row = ({ label, children }) => {
  if (!isValidChildren(children)) return null;

  return (
    <tr>
      <td>{label}</td>
      <td>{children}</td>
    </tr>
  );
};
Row.propTypes = { label: PropTypes.string.isRequired, children: PropTypes.any };

export {
  AddressList,
  IdentificationList,
  Link,
  ListItem,
  Row,
  UnorderedList,
};

@@ -1,16 +1,25 @@
 import %7B
+ compact,
  get, is
@@ -58,16 +58,16 @@
 odash';%0A
-
 import R
@@ -763,32 +763,40 @@
   const items = 
+compact(
 map(value, (item
@@ -1076,32 +1076,33 @@
 %3E%0A    %3C/li%3E%0A  ))
+)
 ;%0A  if (isEmpty(
@@ -1345,32 +1345,40 @@
   const items = 
+compact(
 map(value, (item
@@ -1768,24 +1768,25 @@
   %3C/li%3E%0A  ))
+)
 ;%0A  if (isEm
@@ -2049,16 +2049,24 @@
 items = 
+compact(
 map(valu
@@ -2127,29 +2127,28 @@
 =%7Bi%7D
-%3E%7Bitem%7D%3C/ListItem
+ value=%7Bitem%7D /
 %3E%0A  
+)
 ));%0A

fix unordered list