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

const ChangeHardwareAccount = () => {
  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 changeAccountHandle = () => {
    if (!oldPwd || oldPwd.length < 6) {
      return Taro.showToast({
        title: '请输入6-20位登录密码',
        icon: 'none',
      });
    }
    if (!pwd || pwd.length !== 4) {
      return Taro.showToast({
        title: '请输入4位新密码',
        icon: 'none',
      });
    }
    if (!checkPwd || checkPwd.length !== 4 || pwd !== checkPwd) {
      return Taro.showToast({
        title: '请确认输入密码和新密码完全一致',
        icon: 'none',
      });
    }

    Taro.showLoading();
    changeDevicePassword({
      password: pwd,
      oldPassword: oldPwd,
      customerId: customerId,
    })
      .then(res => {
        Taro.hideLoading();
        Taro.showToast({
          title: '修改成功',
        });
        setTimeout(() => {
          Taro.navigateBack();
        }, 2000);
      })
      .catch(err => {
        Taro.hideLoading();
        Taro.showToast({
          title: err.msg || '修改成功',
          icon: 'none',
        });
      });
  };

  return (
    <View className='ChangeHardwareAccount 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'
            type='number'
            password={!showPwd}
            placeholder='设备密码由4位数字组成'
            maxLength={4}
            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'
            type='number'
            password={!showCheckPwd}
            placeholder='确认密码'
            maxLength={4}
            value={checkPwd}
            onInput={({ detail: { value } }) => setCheckPwd(value)}
          />
          <Image
            className='registerBox-pwdIcon'
            src={showCheckPwd ? pwdShowIcon : pwdHideIcon}
            onClick={setShowCheckPwd}
          />
        </View>

        <Button className='ChangePwd-btn' onClick={changeAccountHandle}>
          确定
        </Button>
      </View>
    </View>
  );
};

ChangeHardwareAccount.config = {
  navigationBarTitleText: '设备密码修改',
};

export default ChangeHardwareAccount;
