import PropTypes from 'prop-types';
import React from 'react';
import Card from '../components/Card';
import {isHomeroomMeaningful} from '../helpers/PerDistrict';
import Homeroom from '../components/Homeroom';
import StudentPhotoCropped from '../components/StudentPhotoCropped';
import {gradeText} from '../helpers/gradeText';


// Render a card in the feed for an EventNote
// Pure UI, like a template.
export default class FeedCardFrame extends React.Component {
  render() {
    const {style, student, byEl, whereEl, whenEl, children, iconsEl, badgesEl} = this.props;
    const {homeroom, school} = student;
    const shouldShowHomeroom = homeroom && isHomeroomMeaningful(school.school_type);
    const shouldShowPhoto = (student.has_photo && window.location.search.indexOf('photo') !== -1);
    return (
      <Card className="FeedCardFrame" style={style}>
        <div style={styles.header}>
          <div style={{display: 'flex'}}>
            {shouldShowPhoto && <StudentPhotoCropped studentId={student.id} />}
            <div style={styles.studentHeader}>
              <div>
                <a style={styles.person} href={`/students/${student.id}`}>{student.first_name} {student.last_name}</a>
              </div>
              <div>{gradeText(student.grade)}</div>
              <div>
                {shouldShowHomeroom && <Homeroom
                  id={homeroom.id}
                  name={homeroom.name}
                  educator={homeroom.educator} />}
              </div>
            </div>
          </div>
          <div style={styles.by}>
            <div>{byEl}</div>
            <div>{whereEl}</div>
            <div>{whenEl}</div>
          </div>
        </div>
        <div style={styles.body}>
          {children}
        </div>
        <div className="FeedCardFrame-footer" style={styles.footer}>
          {/* so flex layout stays the same, regardless */}
          {iconsEl || <div />}
          {badgesEl || <div />}
        </div>
      </Card>
    );
  }
}
FeedCardFrame.contextTypes = {
  nowFn: PropTypes.func.isRequired
};
FeedCardFrame.propTypes = {
  student: PropTypes.shape({
    id: PropTypes.number.isRequired,
    first_name: PropTypes.string.isRequired,
    last_name: PropTypes.string.isRequired,
    grade: PropTypes.string.isRequired,
    house: PropTypes.string,
    has_photo: PropTypes.bool,
    school: PropTypes.shape({
      local_id: PropTypes.string.isRequired,
      school_type: PropTypes.string.isRequired
    }),
    homeroom: PropTypes.shape({
      id: PropTypes.number.isRequired,
      name: PropTypes.string.isRequired,
      educator: PropTypes.object
    })
  }).isRequired,
  children: PropTypes.node.isRequired,
  byEl: PropTypes.node,
  whereEl: PropTypes.node,
  whenEl: PropTypes.node,
  badgesEl: PropTypes.node,
  iconsEl: PropTypes.node,
  style: PropTypes.object
};


const styles = {
  header: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start'
  },
  studentHeader: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'flex-start'
  },
  body: {
    marginBottom: 20,
    marginTop: 20
  },
  by: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-end'
  },
  footer: {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: 5
  },
  person: {
    fontWeight: 'bold'
  }
};

@@ -548,16 +548,27 @@
 badgesEl
+, hidePhoto
 %7D = this
@@ -575,16 +575,16 @@
 .props;%0A
-
     cons
@@ -704,107 +704,8 @@
 e);%0A
-    const shouldShowPhoto = (student.has_photo && window.location.search.indexOf('photo') !== -1);%0A
     
@@ -857,26 +857,21 @@
        %7B
-shouldShow
+!hide
 Photo &&
@@ -2716,16 +2716,45 @@
 s.node,%0A
+  hidePhoto: PropTypes.bool,%0A
   style:

Remove querystring flag for photos on home feed