import React from "react";
import { connect } from "react-redux";
import { dataFont, medGrey } from "../../globalStyles";
import computeResponsive from "../../util/computeResponsive";
import Flex from "./flex";
import Radium from "radium";
import d3 from "d3";

@connect((state) => {
  return {
    tree: state.tree,
    browserDimensions: state.browserDimensions.browserDimensions
  };
})
@Radium
class Footer extends React.Component {
  constructor(props) {
    super(props);
  }
  static propTypes = {
    style: React.PropTypes.object.isRequired
  }
  getStyles() {
    return {
      footer: {
        textAlign: "justify",
        marginLeft: "30px",
        marginBottom: "30px",
        padding: "0px",
        fontFamily: dataFont,
        fontSize: 16,
        fontWeight: 300,
        color: medGrey
      },
      citationList: {
        marginTop: "10px"
      },
      citationItem: {
        paddingLeft: "0px",
        paddingRight: "10px",
        paddingTop: "1px",
        paddingBottom: "0px"
      },
      line: {
        marginTop: "20px",
        marginBottom: "20px",
        borderBottom: "1px solid #CCC"
      }
    };
  }
  getCitations(styles) {
    // traverse tree.nodes
    // check if !hasChildren
    // in each node there is attr.authors and attr.url
    // construct array of unique author strings
    let authorsSet = d3.set();
    let authorsToURL = {};
    if (this.props.tree) {
      if (this.props.tree.nodes) {
        this.props.tree.nodes.forEach((node) => {
          if (node.children) { return; }
          if (node.attr.authors !== "" && node.attr.authors !== "?") {
            authorsSet.add(node.attr.authors);
            authorsToURL[node.attr.authors] = node.attr.url;
          }
        });
      }
    }
    const authorsListItems = authorsSet.values().sort().map((authors, index) => {
        return (
          <div key={index} style={styles.citationItem}>
            <a href={authorsToURL[authors]} target="_blank">{authors}</a>
          </div>
        );
      });
    return (
      <Flex wrap="wrap" justifyContent="flex-start" alignItems="center" style={styles.citationList}>
        {authorsListItems}
      </Flex>
    );
  }
  drawFooter(styles, width) {
    return (
      <div style={{width: width}}>
        <div style={styles.line}/>
        This work is made possible by the open sharing of genetic data by research groups from all
        over the world. We gratefully acknowledge their contributions. For data reuse (particularly
        for publication), please contact the original authors:
        {this.getCitations(styles)}
      </div>
    );
  }
  render() {
    const styles = this.getStyles();
    const responsive = computeResponsive({
      horizontal: 1,
      vertical: .3333333,
      browserDimensions: this.props.browserDimensions,
      sidebar: this.props.sidebar
    })
    const width = responsive.width - 30; // need to subtract margin when calculating div width
    return (
      <div style={styles.footer}>
        {this.props.tree && this.props.browserDimensions ? this.drawFooter(styles, width) : "Waiting on citation data"}
      </div>
    );
  }
}

export default Footer;

@@ -310,16 +310,55 @@
 e.tree,%0A
+    metadata: state.metadata.metadata,%0A
     brow
@@ -414,16 +414,16 @@
 ensions%0A
-
   %7D;%0A%7D)%0A
@@ -1164,16 +1164,65 @@
 d #CCC%22%0A
+      %7D,%0A      fineprint: %7B%0A        fontSize: 14%0A
       %7D%0A
@@ -2277,16 +2277,298 @@
  );%0A  %7D%0A
+  getUpdated(styles) %7B%0A    let updated = null;%0A    if (this.props.metadata.updated) %7B%0A      updated = this.props.metadata.updated;%0A    %7D%0A    return (%0A      updated ?%0A        %3CFlex style=%7Bstyles.fineprint%7D%3E%0A          Data updated %7Bupdated%7D%0A        %3C/Flex%3E :%0A        %3Cdiv/%3E%0A    )%0A  %7D%0A
   drawFo
@@ -2934,16 +2934,16 @@
 uthors:%0A
-
         
@@ -2970,16 +2970,85 @@
 tyles)%7D%0A
+        %3Cdiv style=%7Bstyles.line%7D/%3E%0A        %7Bthis.getUpdated(styles)%7D%0A
       %3C/

Include data updated data in footer