import React from 'react';
import { connect } from 'react-apollo';
import gql from 'graphql-tag';
import RLHeader from './RLHeader.jsx';
import TabBar from './TabBar.jsx';
import FirmRLTabContents from './FirmRLTabContents.jsx';
import ItemList from './ItemList.jsx';

function FirmRequestList(props) {
  if(props.data.loading) {
    return <h3>loading...</h3>
  } else if(props.data.errors) {
    return <p>{JSON.stringify(props.data.errors)}</p>
  } else {
    return (
      <div>
        <RLHeader data={props.data}/>
        <TabBar routeParams={props.routeParams}/>
        <FirmRLTabContents routeParams={props.routeParams}/>
        <ItemList data={props.data}/>
      </div>
    );
  }

}

const query = gql`
  query getRequestList($id:ID!){
    requestList(id:$id) {
      id,
      name,
      dateDue,
      hideUntil,
      hideDateDue,
      status,
      engagement {
        id,
        name,
        client {
          id,
          name
        }
      },
      items {
        id,
        requestText,
        status,
        order
      }
    }
  }
`;

const mapQueriesToProps = ({ ownProps, state }) => ({
  data: {
    query,
    variables: {
      id: ownProps.routeParams.id
    }
  }
});

export default connect({ mapQueriesToProps })(FirmRequestList);