import React, { useState, useEffect } from 'react';
import MultiChoiceScreen from './Lessons/MultiChoices';
import FillWordScreen from './Lessons/Fillwords';
import Arrangement from './Lessons/Arrangement';
import { View, Text, TouchableOpacity, Alert } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { QUESTION_TYPES } from '../../utils/constants';
import _ from 'lodash';
import styles from './styles';
import ListFullOption from '../../components/ListFullOption';
import Header from '../../components/Header';
import { moderateScale, WIN_WIDTH } from '../../styles/common.variables';

export interface IProps {
  // route?: any;
  onPressFinish: any;
  navigation: any;
}
const Screen: React.FC<IProps> = (props) => {
  const { onPressFinish, navigation } = props;
  const listQuestion = useSelector((state) => state.lessons.currQuestions);
  const [idx, setIdx] = useState(0);
  const [isShowResult, setIsShowResult] = useState(false);
  const [rsQuiz, setRsQuiz] = useState(() => {
    return listQuestion.map((item, index) => {
      item.isChecking = index == 0 ? true : false;
      return item;
    });
  });
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity
          style={styles.rightBtn}
          onPress={() => {
            onFinish();
          }}>
          <Text style={{ color: '#FFF', textAlign: 'center' }}>Nộp bài </Text>
        </TouchableOpacity>
      ),
      headerLeft: () => (
        <TouchableOpacity
          style={{ marginLeft: moderateScale(15) }}
          onPress={() => {
            Alert.alert(
              'Thông báo',
              'Nếu bạn thoát sẽ mất hết dữ liệu làm bài, Bạn có muốn thoát ?',
              [
                {
                  text: 'Huỷ',
                  onPress: () => {},
                },
                { text: 'Thoát', onPress: () => onPressFinish() },
              ],
            );
          }}>
          <Text
            style={{
              color: '#FFF',
              textAlign: 'center',
              fontSize: moderateScale(16),
            }}>
            Thoát
          </Text>
        </TouchableOpacity>
      ),
    });
  }, [navigation]);
  const onCheckAnswer = (itemAnswer: any) => {
    const rs_tmp = rsQuiz.map((item, index) => {
      if (idx == index) {
        console.log('ook');
      }
      return {
        ...item,
        itemAnswer: idx == index ? itemAnswer : item.itemAnswer,
        checked: idx == index ? true : item.checked,
      };
    });
    setRsQuiz(rs_tmp);
  };
  console.log('rs_tmp rsQuiz', rsQuiz);
  const showResult = (correct: number) => {
    Alert.alert(
      'Thông báo',
      'Kết quả của bạn là ' + correct + '/' + listQuestion.length + ' câu đúng',
      [
        {
          text: 'Thoát',
          onPress: () => {
            onPressFinish();
          },
        },
        {
          text: 'Xem đáp án ',
          onPress: () => {
            setIdx(0);
            const rs_tmp = rsQuiz.map((item, index) => {
              item.isChecking = index == 0;
              return item;
            });
            setRsQuiz(rs_tmp);
            setIsShowResult(true);
          },
        },
      ],
    );
  };
  const onFinish = () => {
    const unCheckedArr = [];
    let correct = 0;
    rsQuiz.forEach((item, index) => {
      if (!item.checked) unCheckedArr.push(index + 1);
      if (item.itemAnswer && item.itemAnswer.isCorrect) correct++;
    });
    if (unCheckedArr.length > 0) {
      Alert.alert(
        'Thông báo',
        'Bạn còn câu ' +
          unCheckedArr.join(',') +
          ' chưa trả lời.  Bạn có muốn nộp bài không ?',
        [
          {
            text: 'Huỷ',
            onPress: () => console.log('Ask me later pressed'),
          },
          {
            text: 'Nộp bài',
            onPress: () => showResult(correct),
          },
        ],
      );
    } else {
      Alert.alert(
        'Thông báo',
        'Bạn có muốn kiểm tra lại bài tập trước khi nộp không ?',
        [
          {
            text: 'Huỷ',
            onPress: () => console.log('Ask me later pressed'),
          },
          {
            text: 'Nộp bài',
            onPress: () => showResult(correct),
          },
        ],
      );
    }
    // setIsShowResult(true);
  };
  const onNext = (next: boolean) => {
    let nextId = next ? idx + 1 : idx - 1;
    if (nextId >= 0 && nextId <= listQuestion.length - 1) {
      setIdx(nextId);
    } else if (nextId == listQuestion.length && !isShowResult) {
      onFinish();
      //Alert.alert();
    }
    const rs_tmp = rsQuiz.map((item, index) => {
      item.isChecking = index == nextId;
      return { ...item };
    });
    setRsQuiz([...rs_tmp]);
  };
  const renderQuestion = () => {
    switch (rsQuiz[idx].type) {
      case QUESTION_TYPES.MULTI_CHOICE_QUESTION:
        return (
          <MultiChoiceScreen
            question={rsQuiz[idx]}
            onCheckAnswer={onCheckAnswer}
            onNext={onNext}
          />
        );
      case QUESTION_TYPES.FILL_WORD:
        return (
          <FillWordScreen
            question={rsQuiz[idx]}
            onCheckAnswer={onCheckAnswer}
            onNext={onNext}
          />
        );
      case QUESTION_TYPES.ARRANGE:
        return (
          <Arrangement
            question={rsQuiz[idx]}
            onCheckAnswer={onCheckAnswer}
            onNext={onNext}
          />
        );
    }
  };

  const getAnswer = () => {
    let ans = '';
    switch (listQuestion[idx].type) {
      case QUESTION_TYPES.MULTI_CHOICE_QUESTION:
        ans = _.find(listQuestion[idx].answers, { isCorrect: true }).value;
        break;
      case QUESTION_TYPES.FILL_WORD:
        //const arrAnswer = JSON.parse(listQuestion[idx].answers[0].value);
        JSON.parse(listQuestion[idx].answers[0].value).forEach((el: any) => {
          ans += el.value + ',';
        });
        //  ans = arr.join(', ');
        break;
      case QUESTION_TYPES.ARRANGE:
        ans = JSON.parse(listQuestion[idx].answers[0].value)[0].value;
        break;
      default:
        ans = '';
    }
    return ans;
  };
  const renderModalResult = () => {
    return (
      <View
        style={[
          styles.resultModal,
          {
            backgroundColor:
              rsQuiz[idx].itemAnswer && rsQuiz[idx].itemAnswer.isCorrect
                ? 'green'
                : 'red',
          },
        ]}>
        <View style={styles.resultWrapper}>
          <Text style={styles.resultTxt}>
            {rsQuiz[idx].itemAnswer && rsQuiz[idx].itemAnswer.isCorrect
              ? 'Chính xác. Đáp án: !!!'
              : 'Đáp án đúng:'}
          </Text>
        </View>
        <View style={styles.explainWrapper}>
          <Text style={styles.answerTxt}>{getAnswer()}</Text>
          <Text style={[styles.answerTxt, { fontStyle: 'italic' }]}>
            {listQuestion[idx].questionExplain}
          </Text>
        </View>
      </View>
    );
  };
  const onPressItem = (id: number) => {
    setIdx(id);
    const rs_tmp = rsQuiz.map((item, index) => {
      item.isChecking = index == id;
      return { ...item };
    });
    setRsQuiz(rs_tmp);
  };
  const renderSubItem = (
    isFavorite: boolean,
    item: any,
    index: number,
    onPress: any,
  ) => {
    return (
      <TouchableOpacity
        style={[
          {
            height: moderateScale(40),
            width: moderateScale(40),
            borderRadius: moderateScale(20),
            margin: moderateScale(5),
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: item.isChecking ? 'green' : '#fff',
          },
        ]}
        onPress={() => {
          onPressItem(index);
        }}>
        <Text
          style={{
            color: item.isChecking ? '#fff' : item.checked ? 'green' : '#000',
          }}>
          {index + 1}
        </Text>
      </TouchableOpacity>
    );
  };
  const renderQuestionList = () => {
    console.log('renderQuestionList', rsQuiz);
    return (
      <ListFullOption
        data={rsQuiz}
        renderSubItem={renderSubItem}
        style={[
          {
            alignItems: 'center',
            alignContent: 'center',
          },
        ]}
        scrollEnabled={true}
        horizontal={true}
      />
    );
  };
  return (
    <View style={{ flex: 1 }}>
      {/* <Header title={'Bài kiểm tra'} /> */}
      <View
        style={{
          height: moderateScale(70),
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        {renderQuestionList()}
      </View>
      <View style={{ flex: 1 }}>{idx > -1 ? renderQuestion() : null}</View>
      {isShowResult ? renderModalResult() : null}
    </View>
  );
};
export default Screen;