import React, { useState, useEffect } from 'react';
import classnames from 'classnames';

import { AnswerStatus, WordSection } from '../components/AnswerResult';
import Audio from '../components/Audio';
import { replaceToBright, replaceToWrap, queryStrToParse } from '../utils';

import { getSingleQuestionReport } from '../services';

interface IProps {
  env?: string;
  className?: string;
  prefixCls?: string;
  reportId: string | number;
  snapStepId: string | number;
  detailId: string | number;
  platform: number;
  children?: React.ReactNode;
  onNext: () => void;
  isLast: boolean; // 是否是最后一题
  loadingNode?: any; // 加载component
}

const Answer: React.FC<IProps> = ({
  env = 'prod',
  className = '',
  prefixCls = 'ewt-homework-words-answer-result',
  reportId,
  snapStepId,
  detailId,
  platform,
  children,
  onNext,
  isLast,
  loadingNode = null,
}) => {
  const [answerResult, setAnswerResult] = useState<any>({});
  const [loading, setLoading] = useState(true);

  // 视频播放
  const onVideo = (info: any) => {
    const homeworkId = queryStrToParse('homeworkId', window.location.hash);

    // PC 跳转
    if (platform === 1) {
      // 面包屑
      let breadCrume:any = [{title:'我的假期',url:''}];
      try {
        let breadUrl = '';
        const matchStr = 'holiday/student/special-plan/test';
        const breadTitle = sessionStorage.getItem('breadTitle');
        if (window.location.href.indexOf(matchStr) && breadTitle) {
          breadUrl = window.location.href.replace(matchStr, 'holiday/student/special-plan/detail');
          breadCrume = [...breadCrume, { title: breadTitle, url: breadUrl ||'#'}];
        }
      } catch (err) {
        console.log(err)
      }
      window.open(`${info.url}&homeworkId=${homeworkId}&fromPage=${encodeURIComponent(JSON.stringify(breadCrume))}`, '_blank');
      return;
    }
    // h5 native
    const schoolId = localStorage.getItem('schoolId');
    try {
      if (window.mstJsBridge) {
        window.mstJsBridge.openNative({
          domain: 'media',
          action: 'commonPlayer',
          params: {
            schoolId,
            playVideoId: info.lessonId,
            isOffLineMode: false,
            functions: '2',// 1：视频课程打点，2：认真度检测
            videoType: 3,
            homeworkId,
          },
        });
      }
    } catch (error) {
      console.error(`mstJsBridge error: ${error}`);
    }
  }

  useEffect(() => {
    const getQuestionAnswer = async () => {
      const { data } = await getSingleQuestionReport({
        reportId,
        snapStepId,
        detailId,
      }, env);
      setAnswerResult(data);
      setLoading(false);
    }
    getQuestionAnswer();
  }, [reportId, snapStepId, detailId])

  if (loadingNode && loading) {
    return loadingNode;
  }

  return (
    <section
      className={classnames(
        { [`${prefixCls}`]: true },
        { [`${className}`]: !!className },
      )}
    >
      {answerResult?.answerStatus && (
        <AnswerStatus
          answerStatus={answerResult?.answerStatus}
          rightAnswer={answerResult?.rightAnswer || []}
        />
      )}

      <WordSection title="单词学习">
        {(answerResult?.words || []).length > 0 && (
          <div className="words-list">
            {answerResult?.words.map((n: string, index: number) => <span key={index} className="word-text"> {n} </span>)}
          </div>
        )}
        {(answerResult?.wordStudyList || []).map((item: any, index: number) => (
          <div key={index}>
            {(item?.pronunciations || []).length > 0 && (
              <div className="phonetic-panel">
                {item?.pronunciations.map((n: any, index: number) => (
                  <div className="phonetic-item" key={index}>
                    <span className="phonetic-item-text">{n.phonetics}</span>
                    {!!n?.audioUrl && <span className="audio"><Audio src={n.audioUrl} /></span>}
                  </div>
                ))}
              </div>
            )}
            {(item?.chineseMeanings || []).length > 0 && (
              <div className="word-cn-panel">
                {item?.chineseMeanings.map((n: string, index: number) => (
                  <p key={index} className="text-cn" dangerouslySetInnerHTML={{ __html: replaceToWrap(n || '')}} />
                ))}
              </div>
            )}
          </div>
        ))}
      </WordSection>

      {answerResult?.wordDisassembly?.rootWord && (
        <WordSection title="单词拆解" >
          <div className="word-en" dangerouslySetInnerHTML={{ __html: replaceToWrap(replaceToBright(answerResult?.wordDisassembly?.rootWord || '')) }} />
          {/* <p className="text-cn">出去改变自己的学生是交换生。</p> */}
        </WordSection>
      )}

      {answerResult?.wordMnemonics && (
        answerResult?.wordMnemonics?.enMnemonics
        || answerResult?.wordMnemonics?.chMnemonics
        || answerResult?.wordMnemonics?.sourceMnemonics
        || answerResult?.wordMnemonics?.image
      ) && (
        <WordSection title="单词助记" className="words-help-understand">
          <div className="word-en" dangerouslySetInnerHTML={{ __html: replaceToBright(answerResult?.wordMnemonics?.enMnemonics) }} />
          {answerResult?.wordMnemonics?.chMnemonics && <p className="text-cn" dangerouslySetInnerHTML={{ __html: replaceToBright(answerResult?.wordMnemonics?.chMnemonics) }} />}
          {answerResult?.wordMnemonics?.sourceMnemonics && <p className="origin-text">例句来源：{answerResult?.wordMnemonics?.sourceMnemonics}</p>}
          {answerResult?.wordMnemonics?.image && <img src={`${answerResult.wordMnemonics.image}`} alt="" className={`help-pic-${platform}`} />}
        </WordSection>
      )}

      {(answerResult?.videoInfoList || []).length > 0 && (
        <WordSection title="讲解课堂" borderd={false} className="course-list">
          <div className={`course-group course-group-${platform}`}>
            {answerResult?.videoInfoList.map((n: any) => (
              <div className='course-item' key={n.lessonId} onClick={() => onVideo(n)}>
                <img src="//file.ewt360.com/file/1063209730967143109" alt="" className="course-pic" />
              </div>
            ))}
          </div>
        </WordSection>
      )}

      <div className={classnames('answer-footer', {'answer-footer-wap': platform === 2})}>
        <button
          type="button"
          className="next-button"
          onClick={onNext}
        >
          {!isLast ? '挑战下一词汇' : '阶段已结束，查看结果'}
        </button>
      </div>
      {children}
    </section>
  );
};


export default Answer;