import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import cx from 'classnames';
import Button from '/imports/ui/components/button/component';
import { defineMessages, injectIntl, intlShape } from 'react-intl';
import Dropdown from '/imports/ui/components/dropdown/component';
import DropdownTrigger from '/imports/ui/components/dropdown/trigger/component';
import DropdownContent from '/imports/ui/components/dropdown/content/component';
import DropdownList from '/imports/ui/components/dropdown/list/component';
import DropdownListItem from '/imports/ui/components/dropdown/list/item/component';
import { styles } from './styles';

const intlMessages = defineMessages({
  videoMenu: {
    id: 'app.video.videoMenu',
    description: 'video menu label',
  },
  videoMenuDesc: {
    id: 'app.video.videoMenuDesc',
    description: 'video menu description',
  },
  videoMenuDisabled: {
    id: 'app.video.videoMenuDisabled',
    description: 'video menu label',
  },
});


const propTypes = {
  intl: intlShape.isRequired,
  isSharingVideo: PropTypes.bool.isRequired,
  videoItems: PropTypes.arrayOf(PropTypes.object).isRequired,
};

const JoinVideoOptions = ({
  intl,
  isSharingVideo,
  videoItems,
  videoShareAllowed,
}) => {
  const menuItems = videoItems
    .filter(item => !item.disabled)
    .map(item => (
      <DropdownListItem
        key={_.uniqueId('video-menu-')}
        className={styles.item}
        description={item.description}
        onClick={item.click}
        tabIndex={-1}
        id={item.id}
      >
        <img src={item.iconPath} className={styles.imageSize} alt="video menu icon" aria-hidden />
        <span className={styles.label}>{item.label}</span>
      </DropdownListItem>
    ));
  return (
    <Dropdown
      autoFocus
    >
      <DropdownTrigger tabIndex={0}>
        <Button
          label={!videoShareAllowed
            ? intl.formatMessage(intlMessages.videoMenuDisabled)
            : intl.formatMessage(intlMessages.videoMenu)
          }
          className={cx(styles.button, isSharingVideo || styles.ghostButton)}
          onClick={() => null}
          hideLabel
          aria-label={intl.formatMessage(intlMessages.videoMenuDesc)}
          color={isSharingVideo ? 'primary' : 'default'}
          icon={isSharingVideo ? 'video' : 'video_off'}
          ghost={!isSharingVideo}
          size="lg"
          circle
          disabled={!videoShareAllowed}
        />
      </DropdownTrigger>
      <DropdownContent placement="top">
        <DropdownList horizontal>
          {menuItems}
        </DropdownList>
      </DropdownContent>
    </Dropdown>
  );
};
JoinVideoOptions.propTypes = propTypes;
export default injectIntl(JoinVideoOptions);