import React from 'react';
import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import { ActionSheet } from '@antmjs/vantui';
import ResetPwd from '../ResetPwd';
import styles from './style.module.less';

export default (props) => {

  const { name, avatar, onChangePwd, onExit } = props;
  const [show, setShow] = React.useState(false);
  const [show2, setShow2] = React.useState(false);

  const actions =[
    { name: '重置密码', value: 'reset-pwd' },
    { name: '退出', value: 'exit' },
  ]

  const onAction = (e) => {
    const { value } = e.detail;

    if (value === 'reset-pwd') {
      setShow(false);
      setShow2(true);
    }

    if (value === 'exit') {
      onExit();
    }
  }
  
  return (
    <View className={styles['my-head-box']}>
      <View className={styles['profile-box']}>
        <View className={styles['profile-avatar']} onClick={() => setShow(true)}>
          <Image src={avatar} />
        </View>
        <View className={styles['profile-name']}>{name}</View>
      </View>
      <ActionSheet
        show={show}
        actions={actions}
        onClose={() => setShow(false)}
        onSelect={onAction}
      />
      <ResetPwd
        show={show2}
        onClose={() => setShow2(false)}
        onSubmit={onChangePwd}
      />
    </View>
  )
}
