import React, { Component } from 'react'
import { connect } from 'react-redux'
import numeral from 'numeral'
import { createHouseholdMeal } from '../redux/modules/HouseholdMeals/actions'
import NewHouseholdMember from '../components/NewHouseholdMember'
import { Card, Grid, List, Divider, Container } from 'semantic-ui-react'

class Household extends Component {

  handleOnChange = (id) => {
    const householdId = parseInt(this.props.match.params.id, 10)
    this.props.createHouseholdMeal(id, householdId)
  }

  render() {
    const { households, meals, members } = this.props
    const id = parseInt(this.props.match.params.id, 10)
    const household = households.find(h => h.id === id)

    if (household) {

      const mealsNotAssociated = meals.filter(m => !household.meal_ids.includes(m.id))
      const mealsAssociated = meals.filter(m => household.meal_ids.includes(m.id))
      return (
        <div>
          <Grid divided='vertically'>
            <Grid.Row textAlign='center' columns={3} stretched>
              <Grid.Column>
                <Card centered raised>
                  <Card.Content>
                    <Card.Header>
                      <h3>{household.name} Family</h3>
                    </Card.Header>
                    <Divider />
                    <p>{household.address}</p>
                    <p>{numeral(household.monthly_rate).format('$0,0.00')}</p>
                  </Card.Content>
                  <Card.Content>
                    <h2>Members</h2>
                    {members.map(m => {
                      return (
                        <div key={m.id}>
                          <h3>{m.first_name}</h3>
                        </div>
                      )
                    })}
                  </Card.Content>
                </Card>
              </Grid.Column>
              <Grid.Column>
                <Card centered raised>
                  <div>
                    <h2>Meals</h2>
                    {mealsAssociated.map(m => <p key={m.id}>{m.name}</p>)}
                  </div>
                </Card>
              </Grid.Column>
              <Grid.Column>
                <Card centered raised>
                  <Card.Content>
                    <Card.Header>
                      Meals Not Made
                    </Card.Header>
                    <List>
                      {mealsNotAssociated.map(m => (<List.Item key={m.id}><input onChange={() => this.handleOnChange(m.id)} type="checkbox" value={m.id} /><span>{m.name}</span></List.Item>))}
                    </List>
                  </Card.Content>
                </Card>
              </Grid.Column>
            </Grid.Row>
          </Grid>
          <Grid.Row columns={1}>
            <Grid.Column>
              <Container text>
                <Card centered raised fluid>
                  <Card.Content>
                    <NewHouseholdMember id={id} />
                  </Card.Content>
                </Card>
              </Container>
            </Grid.Column>
          </Grid.Row>
        </div>
      )
    } else {
      return null
    }
  }
}

export default connect((state, ownProps) => {
  const id = parseInt(ownProps.match.params.id, 10)
  const members = state.members.filter(m => m.household_id === id)
  return {
    households: state.households,
    meals: state.meals,
    members
  }
}, { createHouseholdMeal })(Household)
@@ -318,16 +318,53 @@
 i-react'
+%0Aimport format from 'date-fns/format'
 %0A%0Aclass 
@@ -2709,26 +2709,8 @@
 ow%3E%0A
-          %3C/Grid%3E%0A
     
@@ -2738,16 +2738,16 @@
 ns=%7B1%7D%3E%0A
+
         
@@ -3050,32 +3050,614 @@
     %3C/Grid.Row%3E%0A
+          %3CGrid.Row columns=%7B1%7D textAlign='center'%3E%0A            %3CGrid.Column%3E%0A              %3CContainer text%3E%0A                %3CCard centered raised fluid%3E%0A                  %3CCard.Content%3E%0A                    %3CCard.Header%3ENotes%3C/Card.Header%3E%0A                    %3CList%3E%0A                      %7Bhousehold.notes.map(n =%3E %3CList.Item%3E%7Bformat(new Date(n.created_at), 'MMMM Do, YYYY')%7D - %7Bn.content%7D%3C/List.Item%3E)%7D%0A                    %3C/List%3E%0A                  %3C/Card.Content%3E%0A                %3C/Card%3E%0A              %3C/Container%3E%0A            %3C/Grid.Column%3E%0A          %3C/Grid.Row%3E%0A        %3C/Grid%3E%0A
         %3C/div%3E%0A 
@@ -3957,16 +3957,16 @@
 ers%0A  %7D%0A
-
 %7D, %7B cre
@@ -3987,16 +3987,17 @@
 al %7D)(Household)
+%0A

add notes to household component