import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { Button } from '@antmjs/vantui';
import { warn } from '@/utils/message';
import QuSelect from '../QuSelect';
import style from './style.module.less';

export default (props) => {
  const { value, list, readonly, onChange, onSubmit } = props;

  const total = list?.length || 0;
  const [isPrev, isFinished] = React.useMemo(() => {

    return [
      value > 0,
      (value >= total - 1) && (total > 0),
    ]
  }, [value, total]);

  const onPrev = () => {
    onChange(value - 1);
  }

  const onNext = () => {
    if (isFinished) {
      onSubmit()
    } else {
      try {
        warn(total < 1, '找不到作答题目');
        onChange(value + 1);
      } finally {}
    }
  }
  
  return (
    <View className={style['qu-footer-wrapper']}>
      {
        !readonly && value > -1 && (
          <View className={style['qu-footer-sel']}>
            <QuSelect
              value={value}
              list={list}
              onChange={onChange}
            />
          </View>
        )
      }
      <View className={style['qu-footer-act']}>
        {
          isPrev && <Button type="primary" block plain hairline style={{flex: 1}} onClick={onPrev}>上一题</Button>
        }
        {
          value == -1 ? (
            <Button type="primary" block style={{flex: 1, marginLeft: isPrev ? '1em' : 0 }} onClick={onNext}>
              {readonly ? '查看测评' : '开始测评'}
            </Button>
          ) : (
            !(readonly && isFinished) && (
              <Button type="primary" block style={{flex: 1, marginLeft: isPrev ? '1em' : 0 }} onClick={onNext}>
                {isFinished ? '提交' : '下一题'}
              </Button>
              )
          )
        }
      </View>
    </View>
  )
}
