import './Common.scss';
import './ChangePwd.scss';
import { View, Image, Input, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import pwdHideIcon from '../../images/login/setting_invisible_icon@2x.png';
import pwdShowIcon from '../../images/login/setting_see_icon@2x.png';
import { changeAppPassword } from '@/api/customer';
import usePasswordInput from './usePasswordInput';
import { useSelector } from '@tarojs/redux';
import { Customer } from '@/types/Customer/Customer';

const ChangePwd = () => {
  const customerId = useSelector(
    (state: { userinfo: Customer }) => state.userinfo.customerId,
  );

  const { pwd, setPwd, showPwd, setShowPwd } = usePasswordInput();
  const {
    pwd: oldPwd,
    setPwd: setOldPwd,
    showPwd: showOldPwd,
    setShowPwd: setShowOldPwd,
  } = usePasswordInput();
  const {
    pwd: checkPwd,
    setPwd: setCheckPwd,
    showPwd: showCheckPwd,
    setShowPwd: setShowCheckPwd,
  } = usePasswordInput();

  const changePasswordHandle = () => {
    if (!oldPwd || oldPwd.length < 6) {
      return Taro.showToast({
        title: '请输入6-20位旧密码',
        icon: 'none',
      });
    }
    if (!pwd || pwd.length < 6) {
      return Taro.showToast({
        title: '请输入6-20位新密码',
        icon: 'none',
      });
    }

    if (!checkPwd || checkPwd.length < 6 || pwd !== checkPwd) {
      return Taro.showToast({
        title: '请确认输入密码和新密码完全一致',
        icon: 'none',
      });
    }
    Taro.showLoading();
    changeAppPassword({
      password: pwd,
      oldPassword: oldPwd,
      customerId: customerId,
    })
      .then(res => {
        Taro.hideLoading();
        Taro.showToast({
          title: '修改成功',
        });
        setTimeout(() => {
          Taro.reLaunch({
            url: '/pages/Login/Login',
          });
        }, 2000);
      })
      .catch(err => {
        Taro.hideLoading();
        Taro.showToast({
          title: err.msg || '修改成功',
          icon: 'none',
        });
      });
  };

  const goResetpwd = () => {
    Taro.navigateTo({
      url: '/pages/Password/ResetPwd',
    });
  };

  return (
    <View className='ChangePwd Password'>
      <View className='Password-form'>
        <View className='Password-title'>旧密码</View>
        <View className='registerBox-item'>
          <Input
            className='loginBox-input'
            placeholderClass='loginBox-placeholder'
            password={!showOldPwd}
            placeholder='请输入当前登录密码'
            maxLength={20}
            value={oldPwd}
            onInput={({ detail: { value } }) => setOldPwd(value)}
          />
          <Image
            className='registerBox-pwdIcon'
            src={showOldPwd ? pwdShowIcon : pwdHideIcon}
            onClick={setShowOldPwd}
          />
        </View>
        <View className='Password-title'>设置新密码</View>
        <View className='registerBox-item'>
          <Input
            className='loginBox-input'
            placeholderClass='loginBox-placeholder'
            password={!showPwd}
            placeholder='输入6-20位新密码'
            maxLength={20}
            value={pwd}
            onInput={({ detail: { value } }) => setPwd(value)}
          />
          <Image
            className='registerBox-pwdIcon'
            src={showPwd ? pwdShowIcon : pwdHideIcon}
            onClick={setShowPwd}
          />
        </View>
        <View className='registerBox-item'>
          <Input
            className='loginBox-input'
            placeholderClass='loginBox-placeholder'
            password={!showCheckPwd}
            placeholder='确认6-20位新密码'
            maxLength={20}
            value={checkPwd}
            onInput={({ detail: { value } }) => setCheckPwd(value)}
          />
          <Image
            className='registerBox-pwdIcon'
            src={showCheckPwd ? pwdShowIcon : pwdHideIcon}
            onClick={setShowCheckPwd}
          />
        </View>
        <View className='ChangePwd-forget' onClick={goResetpwd}>
          忘记密码?
        </View>
        <Button className='ChangePwd-btn' onClick={changePasswordHandle}>
          确定
        </Button>
      </View>
    </View>
  );
};

ChangePwd.config = {
  navigationBarTitleText: '登陆密码修改',
};

export default ChangePwd;
