// @flow
import * as ICONS from 'constants/icons';
import * as MODALS from 'constants/modal_types';
import React from 'react';
import classnames from 'classnames';
import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
import Icon from 'component/common/icon';
import * as PAGES from 'constants/pages';
import { useHistory } from 'react-router';
import { formatLbryUrlForWeb } from 'util/url';
import { COLLECTIONS_CONSTS } from 'lbry-redux';

type Props = {
  inline?: boolean,
  doOpenModal: (string, {}) => void,
  collectionName?: string,
  collectionId: string,
  playNextUri: string,
  doSetPlayingUri: ({ uri: ?string }) => void,
  doToggleShuffleList: (string, string, boolean, boolean) => void,
};

function CollectionMenuList(props: Props) {
  const {
    inline = false,
    collectionId,
    collectionName,
    doOpenModal,
    playNextUri,
    doSetPlayingUri,
    doToggleShuffleList,
  } = props;
  const [doShuffle, setDoShuffle] = React.useState(false);

  const { push } = useHistory();

  React.useEffect(() => {
    if (playNextUri && doShuffle) {
      const collectionParams = new URLSearchParams();
      collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
      const navigateUrl = formatLbryUrlForWeb(playNextUri) + `?` + collectionParams.toString();
      setDoShuffle(false);
      doSetPlayingUri({ uri: playNextUri });
      push(navigateUrl);
    }
  }, [push, doSetPlayingUri, collectionId, playNextUri, doShuffle]);

  return (
    <Menu>
      <MenuButton
        className={classnames('menu__button', { 'claim__menu-button': !inline, 'claim__menu-button--inline': inline })}
        onClick={(e) => {
          e.stopPropagation();
          e.preventDefault();
        }}
      >
        <Icon size={20} icon={ICONS.MORE_VERTICAL} />
      </MenuButton>
      <MenuList className="menu__list">
        {collectionId && collectionName && (
          <>
            <MenuItem className="comment__menu-option" onSelect={() => push(`/$/${PAGES.LIST}/${collectionId}`)}>
              <a className="menu__link" href={`/$/${PAGES.LIST}/${collectionId}`}>
                <Icon aria-hidden icon={ICONS.VIEW} />
                {__('View List')}
              </a>
            </MenuItem>
            <MenuItem
              className="comment__menu-option"
              onSelect={() => {
                doToggleShuffleList('', collectionId, true, true);
                setDoShuffle(true);
              }}
            >
              <div className="menu__link">
                <Icon aria-hidden icon={ICONS.SHUFFLE} />
                {__('Shuffle Play')}
              </div>
            </MenuItem>
            <MenuItem
              className="comment__menu-option"
              onSelect={() => push(`/$/${PAGES.LIST}/${collectionId}?view=edit`)}
            >
              <div className="menu__link">
                <Icon aria-hidden icon={ICONS.PUBLISH} />
                {__('Publish List')}
              </div>
            </MenuItem>
            <MenuItem
              className="comment__menu-option"
              onSelect={() => doOpenModal(MODALS.COLLECTION_DELETE, { collectionId })}
            >
              <div className="menu__link">
                <Icon aria-hidden icon={ICONS.DELETE} />
                {__('Delete List')}
              </div>
            </MenuItem>
          </>
        )}
      </MenuList>
    </Menu>
  );
}

export default CollectionMenuList;