import React, { PureComponent } from 'react';
import { Alert, Share, FlatList, ListRenderItemInfo, InteractionManager, BackHandler } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { withNavigation, NavigationInjectedProps } from 'react-navigation';
import { ChildProps } from 'react-apollo';

import Question, { QuestionProps } from '~/components/Question';
import QuestionPagination from '~/components/Question/Pagination';
import PageHeader from '~/components/PageHeader';

import { ChildDataProps, graphql } from "react-apollo";
import { ALL_QUESTIONS } from '~/graphQL/queries';
// import mock from '~/assets/questoes.mock';

interface QuestionsPageState {
  favorited: boolean;
  answered: boolean;
  currentItem: number;
  questions: QuestionProps[];
}

@withNavigation
// @graphql<NavigationInjectedProps, QueryResult>(QUESTIONS_QUERY)
class QuestionsPage extends PureComponent<ChildProps<NavigationInjectedProps, QuestionsPageState>> {
  private listRef: FlatList<QuestionProps> | null = null;

  public state = {
    favorited: false,
    answered: false,
    currentItem: 0,
    questions: null,
  };

  public componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.exit);
  }

  public componentWillUnmount() {
    this.listRef = null;
    BackHandler.removeEventListener('hardwareBackPress', this.exit);
  }

  private share = (message: string) => {
    InteractionManager.runAfterInteractions(async () => {
      try {
        await Share.share({ message });
      } catch (error) {
        Alert.alert('Erro ao compartilhar a questão', error.message);
      }
    });
  };

  private renderItem = (question: ListRenderItemInfo<QuestionProps>) => (
    <Question
      {...question.item}
      onChooseAlternative={() => this.handleAlternative()}
      comments={question.item.comments}
      onChooseMoreComments={() => this.props.navigation.navigate('Comments', { comments: question.item.comments.data })}
    />
  );

  private fetchQuestions = () => {
    const allQuestions = graphql<{}, Response, ChildProps>(ALL_QUESTIONS);

    InteractionManager.runAfterInteractions(() => {
      this.setState((state: QuestionsPageState) => {
        const needMoreQuestions = state.currentItem + 2 >= state.questions.length;

        if (!needMoreQuestions) {
          return null;
        }

        return {
          // questions: [...state.questions, data],
        };
      });
    });
  };

  private handleAlternative = () => {
    this.setState((state: QuestionsPageState) => {
      this.fetchQuestions();
      return {
        answered: true,
      };
    });
  };

  private handleNextItem = () => {
    this.setState((state: QuestionsPageState) => {
      const nextItem = state.currentItem + 1;

      this.fetchQuestions();

      if (this.listRef) {
        this.listRef.scrollToIndex({ index: nextItem });
      }

      return {
        currentItem: nextItem,
        favorited: false,
        answered: false,
      };
    });
  };

  private exit = () => {
    Alert.alert('Tem certeza que deseja parar seus estudos?', '', [
      { text: 'Não' },
      { text: 'Sim', onPress: () => this.props.navigation.goBack() },
    ]);
  };

  public render() {
    const { navigation } = this.props;
    const { currentItem, questions, favorited, answered } = this.state;
    const hasNextQuestion = currentItem + 1 < questions.length;
    const label = navigation.getParam('label', '');

    return (
      <>
        <PageHeader
          label={label}
          leftAction={{
            title: 'Back',
            icon: <Icon name="arrow-left" size={hp(4)} color="#BABABA" />,
            onPress: () => this.exit(),
          }}
          rightActions={[
            {
              title: 'Favoritar',
              icon: (
                <Icon
                  name={favorited ? 'heart' : 'heart-outline'}
                  size={hp(4)}
                  color={favorited ? '#00D8A7' : '#BABABA'}
                />
              ),
              onPress: () => this.setState({ favorited: true }),
            },
            {
              title: 'Compartilhar com um amigo',
              icon: <Icon name="share-variant" size={hp(4)} color="#00D8A7" />,
              onPress: () => this.share(mock[currentItem].statement),
            },
            {
              title: 'Reportar erro na questão',
              icon: <Icon name="alert-circle-outline" size={hp(4)} color="#FF4350" />,
              onPress: () => navigation.navigate('QuestionReport', mock[currentItem]),
            },
          ]}
        />
        <FlatList
          horizontal
          pagingEnabled
          scrollEnabled={false}
          data={questions}
          extraData={questions}
          initialScrollIndex={currentItem}
          renderItem={this.renderItem}
          keyExtractor={(question: QuestionProps) => `question-${question.id}`}
          ref={(ref: FlatList<QuestionProps>) => (this.listRef = ref)}
        />
        <QuestionPagination
          onSkipPress={() => this.handleNextItem()}
          onNextPress={() => this.handleNextItem()}
          allowNext={hasNextQuestion && answered}
          allowSkip={hasNextQuestion}
        />
      </>
    );
  }
}

export default QuestionsPage;