import React from 'react';
import classnames from 'classnames';

import ChineseToEnglish from '../components/ChineseToEnglish';
import EnglishToChinese from '../components/EnglishToChinese';
import Dictation from '../components/Dictation';

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

interface IProps {
  className?: string;
  prefixCls?: string;
  dataSource: any;
  platform?: number; // 平台：PC：1  H5: 2
  align?: string;
  env?: string; // 编译环境
  onSubmit: (id: number) => void; // 提交回调
}

const Question: React.FC<IProps> = (props) => {
  const {
    className,
    prefixCls = 'ewt-homework-words-question',
    dataSource,
    platform = 1,
    align = 'center',
    env = 'prod',
    onSubmit,
    children,
  } = props;
  const { answerType, detailId, reportId, wordId } = dataSource;

  const onSubmitAnswer = async (values: string[]) => {
    try {
      const { success }: any = await submitAnswer({
        detailId,
        answerType,
        answer: values,
        wordId,
        reportId,
      }, env);
      if (success) {
        onSubmit(detailId);
      }
    } catch (error) {
      console.error(error || '答题失败，请稍后再试！');
    }
  }

  const wordsItemRender = (): React.ReactNode => {
    let wordsItem: React.ReactNode = null;
    switch (Number(answerType)) {
      case 1: // 汉译英
        wordsItem = (
          <ChineseToEnglish
            platform={platform}
            data={dataSource}
            onSubmit={onSubmitAnswer}
          />
        )
        break;
      case 2: // 英译汉
        wordsItem = (
          <EnglishToChinese
            platform={platform}
            data={dataSource}
            onSubmit={onSubmitAnswer}
          />
        )
        break;
      case 3: // 听写
        wordsItem = (
          <Dictation
            platform={platform}
            data={dataSource}
            onSubmit={onSubmitAnswer}
          />
        )
        break;
      default:
        wordsItem
        break;
    }
    return wordsItem;
  }

  return (
    <section
      className={classnames(
        { [`${prefixCls}`]: true },
        { [`${className}`]: !!className },
        [`${align}`],
      )}
    >
      {wordsItemRender()}
      {children}
    </section>
  );
}

export default Question;