// @flow
import * as ICONS from 'constants/icons';
import classnames from 'classnames';
import React from 'react';
import ChannelThumbnail from 'component/channelThumbnail';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import ChannelTitle from 'component/channelTitle';
import Icon from 'component/common/icon';

type Props = {
  selectedChannelUrl: string, // currently selected channel
  channels: ?Array<ChannelClaim>,
  onChannelSelect: (url: string) => void,
};

type ListItemProps = {
  uri: string,
  isSelected?: boolean,
};

function ChannelListItem(props: ListItemProps) {
  const { uri, isSelected = false } = props;

  return (
    <div className={classnames('channel__list-item', { 'channel__list-item--selected': isSelected })}>
      <ChannelThumbnail uri={uri} />
      <ChannelTitle uri={uri} />
      {isSelected && <Icon icon={ICONS.DOWN} />}
    </div>
  );
}

function ChannelSelector(props: Props) {
  const { channels, selectedChannelUrl, onChannelSelect } = props;

  if (!channels || !selectedChannelUrl) {
    return null;
  }

  return (
    <Menu>
      <MenuButton className="">
        <ChannelListItem uri={selectedChannelUrl} isSelected />
      </MenuButton>
      <MenuList className="menu__list channel__list">
        {channels &&
          channels.map(channel => (
            <MenuItem
              key={channel.canonical_url}
              onSelect={() => {
                if (selectedChannelUrl !== channel.canonical_url) {
                  onChannelSelect(channel.canonical_url);
                }
              }}
            >
              <ChannelListItem uri={channel.canonical_url} />
            </MenuItem>
          ))}
      </MenuList>
    </Menu>
  );
}

export default ChannelSelector;