import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';

import { I18nContext } from '../../../contexts/i18n';
import { Menu, MenuItem } from '../../../components/ui/menu';

const TokenOptions = ({ onRemove, onViewEtherscan, tokenSymbol }) => {
  const t = useContext(I18nContext);
  const [tokenOptionsButtonElement, setTokenOptionsButtonElement] = useState(
    null,
  );
  const [tokenOptionsOpen, setTokenOptionsOpen] = useState(false);

  return (
    <>
      <button
        className="fas fa-ellipsis-v token-options__button"
        data-testid="token-options__button"
        onClick={() => setTokenOptionsOpen(true)}
        ref={setTokenOptionsButtonElement}
        title={t('tokenOptions')}
      />
      {tokenOptionsOpen ? (
        <Menu
          anchorElement={tokenOptionsButtonElement}
          onHide={() => setTokenOptionsOpen(false)}
        >
          <MenuItem
            iconClassName="fas fa-external-link-alt token-options__icon"
            data-testid="token-options__etherscan"
            onClick={() => {
              setTokenOptionsOpen(false);
              onViewEtherscan();
            }}
          >
            {t('viewOnEtherscan')}
          </MenuItem>
          <MenuItem
            iconClassName="fas fa-trash-alt token-options__icon"
            data-testid="token-options__hide"
            onClick={() => {
              setTokenOptionsOpen(false);
              onRemove();
            }}
          >
            {t('hideTokenSymbol', [tokenSymbol])}
          </MenuItem>
        </Menu>
      ) : null}
    </>
  );
};

TokenOptions.propTypes = {
  onRemove: PropTypes.func.isRequired,
  onViewEtherscan: PropTypes.func.isRequired,
  tokenSymbol: PropTypes.string.isRequired,
};

export default TokenOptions;