import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { changePwd } from '@/services/wxma'; 
import Captcha from './components/Captcha';
import ResetPwd from './components/ResetPwd';
import './index.less';

export default (props) => {

  const [direct, setDirect] = React.useState();
  const transClass = direct == 'right' ? 'form-wrapper to-right' : 'form-wrapper';
  const formData = React.useRef();

  const onNext = (data) => {
    formData.current = data;
    setDirect('right');
  }

  const onSubmit = (data) => {
    formData.current = {
      ...formData.current,
      ...data,
    }

    return changePwd(formData.current)
  }
  
  return (
    <View>
      <View className="reset-password-box">
        <View className={transClass}>
          <View>
            <Captcha onNext={onNext} />
          </View>
          <View>
            <ResetPwd onPrev={() => setDirect()} onSubmit={onSubmit} />
          </View>
        </View>
      </View>
    </View>
  )
}
