import React from 'react';
import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux';
import { useRouter } from 'next/router';
import MenuButton from 'components/common/MenuButton';
import Icon from 'components/common/Icon';
import User from 'assets/user.svg';
import Chevron from 'assets/chevron-down.svg';
import styles from './UserButton.module.css';
import { removeItem } from 'lib/web';
import { AUTH_TOKEN } from 'lib/constants';

export default function UserButton() {
  const user = useSelector(state => state.user);
  const router = useRouter();

  const menuOptions = [
    {
      label: (
        <FormattedMessage
          id="label.logged-in-as"
          defaultMessage="Logged in as {username}"
          values={{ username: <b>{user.username}</b> }}
        />
      ),
      value: 'username',
      className: styles.username,
    },
    { label: <FormattedMessage id="label.profile" defaultMessage="Profile" />, value: 'profile' },
    { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: 'logout' },
  ];

  function handleSelect(value) {
    if (value === 'logout') {
      removeItem(AUTH_TOKEN);
      router.push('/login');
    } else if (value === 'profile') {
      router.push('/settings/profile');
    }
  }

  return (
    <MenuButton
      icon={<Icon icon={<User />} size="large" />}
      value={<Icon icon={<Chevron />} size="small" />}
      options={menuOptions}
      onSelect={handleSelect}
    />
  );
}