import './CustomerSetting.scss';
import Taro from '@tarojs/taro';
import { View, Text, Switch } from '@tarojs/components';
import { useSelector } from '@tarojs/redux';
import { Customer } from '@/types/Customer/Customer';
import useAccountLogin from '../Password/useAccountLogin';
import useBalanceState from '../Password/useBalanceState';

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

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

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

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

  const [accountLoginState, setAccountLoginState] = useAccountLogin(
    userinfo.customerId,
    userinfo.hardwareState,
  );
  const [balanceState, setBalanceState] = useBalanceState(userinfo.customerId);

  return (
    <View className='CustomerSetting'>
      <View className='CustomerSettingItem' onClick={goChangePwd}>
        <Text className='CustomerSettingItem-label'>登录密码修改</Text>
        <Text className='CustomerSetting-icon'>></Text>
      </View>
      <View className='CustomerSettingItem' onClick={goChangeAccount}>
        <Text className='CustomerSettingItem-label'>设备密码修改</Text>
        <Text className='CustomerSetting-icon'>></Text>
      </View>
      <View className='CustomerSettingItem' onClick={goChangePhoneAccount}>
        <Text className='CustomerSettingItem-label'>更换手机账户</Text>
        <Text className='CustomerSetting-icon'>></Text>
      </View>
      <View className='CustomerSetting-buttom'>
        <View className='CustomerSettingItem'>
          <Text className='CustomerSettingItem-label'>开启设备登录密码</Text>
          <Switch
            className='CustomerSettingItem-switch'
            color='#6180f4'
            checked={accountLoginState}
            onChange={e => setAccountLoginState(e.detail.value)}
          />
        </View>
        <View className='CustomerSettingItem'>
          <Text className='CustomerSettingItem-label'>开启系统自动扣费</Text>
          <Switch
            className='CustomerSettingItem-switch'
            color='#6180f4'
            checked={balanceState}
            onChange={e => setBalanceState(e.detail.value)}
          />
        </View>
      </View>
    </View>
  );
};

CustomerSetting.config = {
  navigationBarTitleText: '个人设置',
};

export default CustomerSetting;
