import React, { Fragment } from "react";
import { SafeAreaView } from "react-native";
import { Query } from "react-apollo";
import { scheduleQuery } from "src/modules/Schedule/graphql/queries";

import { Header, HeaderConfig } from "src/modules/shared/components";
import { ScheduleFull } from "src/modules/Schedule/components";

export default class ScheduleScreen extends React.PureComponent {
  static navigationOptions = ({ navigation }) => {
    return {
      // foo.title here should be `null` while loading and "bar" after data loaded
      // Receiver might be moved into the Header component as well, shouldn't really matter      
      header: () => <Receiver>{foo => (<Header showBack navigation={navigation} title={foo.title} />)}</Receiver>,
    };
  };

  render() {
    const { navigation } = this.props;

    return (
      <SafeAreaView>
        <Query query={scheduleQuery} variables={{ id: navigation.getParam("scheduleId") }}>
          {({ data, loading }) => {
            if (loading) return null;
            return (
              <Fragment>
                <HeaderConfig title={"bar"} />
                <ScheduleFull schedule={data.schedule} navigation={navigation} />
              </Fragment>
            );
          }}
        </Query>
      </SafeAreaView>
    );
  }
}