import React from 'react';
import Taro from '@tarojs/taro';
import { View, Image, Button } from '@tarojs/components';
import { ActionSheet, Cell } from '@antmjs/vantui';
import { ROLES, ROLE_CITIZEN } from '@/utils/user';
import logo from '@/assets/image/logo.png';
import Icon from '@/assets/icons/avatar.png';
import style from './head.module.less';

export default (props) => {
  const { userModel } = props;
  const { user, person, duty, updateDuty, authProfile } = userModel || {};
  const { dutyList = [] } = user || {};
  const role = ROLES[duty || ROLE_CITIZEN];

  const [show, setShow] = React.useState(false);

  const [name, avatar] = React.useMemo(() => {
    return [
      user?.name || person?.name || '市民',
      user?.avatar || person?.avatar || logo,
    ];
  }, [user, person]);

  const actions = React.useMemo(() => {
    return dutyList.map(x => ({ name: ROLES[x], value: x }));
  }, [dutyList]);

  const onClick = () => {
    if (dutyList.length < 2) return;
    setShow(true);
  }

  const onSelect = (e) => {
    updateDuty(e.detail.value)
  }

  const onGetUserProfile = () => {
    // 新版本小程序已开始不支持获取头像, 昵称了
    // Taro.getUserProfile({
    //   desc: '用于完善您的资料',
    //   success: res => {
    //     authProfile(res);
    //   }
    // })
  }

  return (
    <View className={style.head}>
      <View className={style.profile}>
        <View style={{ letterSpacing: '2px' }}>Hi, {name}!</View>
        <View className={style.badge} onClick={onClick}>
          <View className={style.icon}>
            <Image src={Icon} />
          </View>
          <View>{role}</View>
        </View>
        <ActionSheet
          title="请选择身份"
          position="bottom"
          show={show}
          actions={actions}
          onClose={() => setShow(false)}
          onSelect={onSelect}
        />
      </View>
      <View className={style.avatar}>
        <Button onClick={onGetUserProfile}>
          <Image mode="scaleToFill" src={avatar}></Image>
        </Button>
      </View>
    </View>
  )
}
