import gql from 'graphql-tag'
import { Icon, Search, Segment, Dropdown, Header } from 'semantic-ui-react/dist/commonjs'

import { graphql, compose, Query, withApollo } from 'react-apollo'

export const GET_PATIENTS_BY_USER_ID = gql`
  query getPatientsByUser($pagination: PatientPagination!, $filter: ListFilter) {
    doctorPatients(pagination: $pagination, filter:$filter) {
      totalCount
      perPage
      page
      items {
        patientResearches {
          research {
            id
            title
          }
        }
        updatedAt
      }
    }

    userResearches {
      activeResearches {
        ...ResearchBasicInfoParts
      }
    }
  }
  ${RESEARCH_BASIC_INFO_FRAGMENT}
`
class PatientList extends React.Component

  constructor(props) {
    super(props)

    this.state = {
      value: '',

    }
  }



  handleSearchChange = ({value}) => {
    this.setState({
      value
    })

  }
render(){

    const {value} = this.state

    return (
      <Query query={GET_PATIENTS_BY_USER_ID}
        variables={{
          filter: {
            sortBy: value
          },
          pagination: {
            perPage: 2,
            page: 1
          }
        }}>
        {({ loading, data, refetch, error }) => {
          if (loading) return <LoadingView />
          if (error) {
            return <ErrorView />
          }


          const { doctorPatients, userResearches } = data
          const { items: patients, page, perPage, totalCount} = doctorPatients
          console.log(doctorPatients)
          return (
 {
                      patients.map(patient => (
                        <Table.Row
                          onClick={this.handleClickPatient(patient.id)}
                          style={{cursor: 'pointer'}}
                          key={`${patient.id}`}
                          verticalAlign='middle'
                        >
                          <PatientListItem
                            {...patient}
                          />
                        </Table.Row>
                      ))
                    }

          </Query>
    )
  }

}


export default compose(
  withApollo,
  graphql(ADD_PATIENT, {
    name: 'addPatient'
  })
)(withRouter(PatientList))