import React from "react";
import Radium from "radium";
import Flex from "../framework/flex";
import Button from "../framework/moderate-button";

const styles = {
  card: {
    margin: "10px 20px 10px 20px",
    backgroundColor: "rgb(253,253,253)",
    borderRadius: 3,
    padding: 10,
    WebkitBoxShadow: "3px 3px 6px -1px rgba(220,220,220,1)",
    BoxShadow: "3px 3px 6px -1px rgba(220,220,220,1)"
  },
}

@Radium
class Comment extends React.Component {
  static propTypes = {
    dispatch: React.PropTypes.func,
    params: React.PropTypes.object,
    acceptButton: React.PropTypes.bool,
    rejectButton: React.PropTypes.bool,
    acceptClickHandler: React.PropTypes.func,
    rejectClickHandler: React.PropTypes.func,
  }
  onAcceptClicked() {
    this.props.acceptClickHandler(this.props.comment)
  }
  onRejectClicked() {
    this.props.rejectClickHandler(this.props.comment)
  }
  makeAcceptButton() {
    return (
      <Button
        style={{
          backgroundColor: "#03a9f4",
          color: "white",
          marginTop: 20,
        }}
        onClick={this.onAcceptClicked.bind(this)}>
        accept
      </Button>
    )
  }
  makeRejectButton() {
    return (
      <Button
        style={{
          backgroundColor: "#03a9f4",
          color: "white",
          marginTop: 20,
        }}
        onClick={this.onRejectClicked.bind(this)}>
        reject
      </Button>
    )
  }
  render() {
    return (
      <div style={styles.card}>
        <Flex
          justifyContent="space-between"
          align={"top"}>
          <p>{ this.props.comment.txt }</p>
          <Flex>
            { this.props.acceptButton ? this.makeAcceptButton() : "" }
            { this.props.rejectButton ? this.makeRejectButton() : "" }
          </Flex>
        </Flex>
      </div>
    );
  }
}

export default Comment;

/*
  todo
    show stats per comment
    sort by number of votes time submitted etc
*/

@@ -124,16 +124,15 @@
 ork/
-moderate
+generic
 -but
@@ -141,271 +141,61 @@
 n%22;%0A
-%0Aconst styles = %7B%0A  card: %7B%0A    margin: %2210px 20px 10px 20px%22,%0A    backgroundColor: %22rgb(253,253,253)%22,%0A    borderRadius: 3,%0A    padding: 10,%0A    WebkitBoxShadow: %223px 3px 6px -1px rgba(220,220,220,1)%22,%0A    BoxShadow: %223px 3px 6px -1px rgba(220,220,220,1)%22%0A  %7D,%0A%7D
+import ParticipantHeader from %22./participant-header%22;
 %0A%0A@R
@@ -507,24 +507,439 @@
 s.func,%0A  %7D%0A
+  getStyles() %7B%0A    return %7B%0A      card: %7B%0A        margin: %2210px 20px 10px 20px%22,%0A        backgroundColor: %22rgb(253,253,253)%22,%0A        borderRadius: 3,%0A        padding: 10,%0A        WebkitBoxShadow: %223px 3px 6px -1px rgba(220,220,220,1)%22,%0A        BoxShadow: %223px 3px 6px -1px rgba(220,220,220,1)%22%0A      %7D,%0A      commentBody: %7B%0A        maxWidth: 550,%0A        fontWeight: 300,%0A        marginLeft: 10%0A      %7D%0A    %7D%0A  %7D%0A
   onAcceptCl
@@ -1221,33 +1221,8 @@
 e%22,%0A
-          marginTop: 20,%0A
     
@@ -1455,33 +1455,8 @@
 e%22,%0A
-          marginTop: 20,%0A
     
@@ -1563,24 +1563,61 @@
  render() %7B%0A
+    const styles = this.getStyles();%0A
     return (
@@ -1677,76 +1677,299 @@
     
-justifyContent=%22space-between%22%0A          align=%7B%22top%22%7D%3E%0A          %3Cp
+direction=%22column%22%0A          wrap=%22wrap%22%0A          justifyContent=%22space-between%22%0A          alignItems=%7B%22baseline%22%7D%3E%0A          %7Bthis.props.comment.social ? %3CParticipantHeader %7B...this.props.comment.social%7D /%3E : %22Anonymous%22%7D%0A          %3CFlex grow=%7B1%7D%3E%0A            %3Cp style=%7Bstyles.commentBody%7D
 %3E%7B t
@@ -1996,16 +1996,35 @@
 t %7D%3C/p%3E%0A
+          %3C/Flex%3E%0A%0A
         

Comment cards now instantiate participant header