import type { CSSProperties } from 'react';
import { useIntl, useRequest } from 'umi';
import UserLink from '../UserInfo/link';

const styles: Record<'span', CSSProperties> = {
  span: {
    color: 'red',
    fontSize: 12,
  },
};

export interface UserSuperiorNameProps {
  children?: React.ReactNode;
}

const UserSuperiorName = (props: UserSuperiorNameProps) => {
  const { children } = props;

  const { formatMessage } = useIntl();

  const { data } = useRequest({
    url: '/goapi/user/homeInfo',
    method: 'POST',
  });

  const { superiorEn, superiorState, superior } = data || {};

  if (!superiorEn) {
    return (
      <span style={styles.span}>
        {formatMessage({ id: 'component.UserSuperior.unset.superior' })}
      </span>
    );
  }

  const user = {
    account: superiorEn,
    state: superiorState,
    name: superior,
  };

  return (
    <>
      <UserLink user={user} />

      {superiorState === 0 && (
        <span style={styles.span}>
          {formatMessage({ id: 'component.UserSuperior.superior.dimission' })}
        </span>
      )}

      {children}
    </>
  );
};

export default UserSuperiorName;