import React, { useState } from 'react'
import { Steps, Button } from 'tdesign-react'
import { useNavigate } from 'react-router-dom'
import MeasurementStep from '../../components/Steps/MeasurementStep'
import '../../assets/css/talking.css'

const { StepItem } = Steps

const problems = [
  {
    ques: '忙碌了一天回到家中，已经很疲惫了，你会',
    options: ['再累也要收拾整齐了再去睡', '扔下包倒头就睡下']
  },
  {
    ques: '我常会站在对方角度去思考而模糊了自己的立场',
    options: ['是的', '不是']
  },
  {
    ques: '若我有时间和金钱，我的朋友邀请我到国外或者异地度假，并且在一天前才通知，我会',
    options: ['必须先检查我的时间表', '立即收拾行装']
  }
]

export default function Talking() {
  const [count, setCount] = useState(0);

  const navigate = useNavigate()

  const changeProblems = (type) => {
    if (count < problems.length && type == 'add') {
      setCount(count + 1)
    } else if (count > 0 && type == 'reduce') {
      setCount(count - 1)
    }
  }

  let pro = problems[count];

  return (
    <div style={{ padding: '10px 20px' }}>
      <MeasurementStep current={0} />
      {
        count === problems.length ? (<>

          <div className='question-box question-result'>这是测试结果</div>

          <Button block variant="base" style={{ width: '30%', margin: '40px auto' }}
            onClick={() => {
              navigate('/diagnosis_m', {
                replace: true
              })
            }}
          > 下一步 </Button>
        </>) : (
          <>
            <div className='question-box'>
              <h3>{pro.ques}?</h3>
              <div className='question-option'>
                {problems[count].options.map((tag, index) => (
                  <span key={index} onClick={() => changeProblems('add')}>{tag}</span>
                ))}
              </div>
            </div>

            <div className='question-bar'>
              <span onClick={() => changeProblems('reduce')}>上一题</span>
              <span>{count + 1}/{problems.length}</span>
              <span></span>
            </div>
          </>
        )
      }
    </div>
  )

}
