import React, { Component } from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";
import { AppContext } from "../../context/context";
import { Col, Row, Grid } from "react-native-easy-grid";
import MyHeader from "../components/header";
import moment from "moment";
import firebase from "react-native-firebase";
import ScheduleList from "./components/scheduleList";
import CircularProgress from "../settings/setProfile/components/circularProgress";
import { Query } from "react-apollo";
import gql from "graphql-tag";
const query =gql`
    query Query($userID:String!,$employeeID:String!,$salonID:String!,$day:Int!,$serviceTime:Int){
      hello
        listOfAppointments(
          userID: $userID
          employeeID: $employeeID
          salonID: $salonID
          day: $day
          serviceTime: $serviceTime
        ) {
          start
          end
          status
          disabled
        }
        employeeInfo(employeeID: $employeeID
          salonID: $salonID){
            token
            name
            ID
            notifyWhenCreated
            notifyWhenDeleted
            salonName
          }
      }
    `;
export default class Appointment extends Component<Props> {
  static contextType = AppContext;
  constructor() {
    super();
    this.unsubscribe = null;
  }
  state = {
    profile: []
  };

  render() {
    return (
      <AppContext.Consumer>
        {context => {
        const{  userID,employeeID,salonID,currentDay,serviceTime}=context.state
          return (
            <Query
              query={query}
              variables={{userID:userID,employeeID:employeeID,salonID:salonID,day:currentDay,serviceTime:serviceTime}}
            >
              {(response, error) => {
                console.log(`response: ${response.data.listOfAppointments}`);
                console.log(`EMPL: ${response.data.employeeInfo}`);
                console.log(`\helo: ${response.data.hello}`);
                return (
                  <Grid>
                    <Col>
                      <MyHeader
                        navigation={this.props.navigation}
                        title={context.state.currentDay
                          .format("DD.MM.YYYY")
                          .toString()}
                      />
                      {!response.data.listOfAppointments? (
                        <CircularProgress />
                      ) : (
                        <ScheduleList data={response.data.listOfAppointments} />
                      )}
                    </Col>
                  </Grid>
                );
              }}
            </Query>
          );
        }}
      </AppContext.Consumer>
    );
  }
}