import { FC } from 'react';
import { Button, Dropdown, Menu } from 'antd';
import { EllipsisOutlined, HeartOutlined, BellOutlined } from '@ant-design/icons';
import styles from './ActionButtonMenu.module.scss';
import { ExternalAction } from '../../../interfaces/external-action';

const NOTIFY_KEY = 'notify';
const FOLLOW_KEY = 'follow';

export type ActionButtonMenuProps = {
  actions: ExternalAction[];
  showFollowItem?: boolean;
  showNotifyItem?: boolean;
  externalActionSelected: (action: ExternalAction) => void;
  notifyItemSelected: () => void;
  followItemSelected: () => void;
};

export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
  actions,
  externalActionSelected,
  notifyItemSelected,
  followItemSelected,
  showFollowItem,
  showNotifyItem,
}) => {
  const onMenuClick = a => {
    if (a.key === NOTIFY_KEY) {
      notifyItemSelected();
      return;
    }
    if (a.key === FOLLOW_KEY) {
      followItemSelected();
      return;
    }
    const action = actions.find(x => x.url === a.key);
    externalActionSelected(action);
  };

  const items = actions.map(action => ({
    key: action.url,
    label: (
      <span className={styles.item}>
        {action.icon && <img className={styles.icon} src={action.icon} alt={action.title} />}{' '}
        {action.title}
      </span>
    ),
  }));

  if (showFollowItem) {
    items.unshift({
      key: FOLLOW_KEY,
      label: (
        <span className={styles.item}>
          <HeartOutlined className={styles.icon} /> Follow this stream
        </span>
      ),
    });
  }

  if (showNotifyItem) {
    items.unshift({
      key: NOTIFY_KEY,
      label: (
        <span className={styles.item}>
          <BellOutlined className={styles.icon} />
          Notify when live
        </span>
      ),
    });
  }

  const menu = <Menu items={items} onClick={onMenuClick} />;

  return (
    <Dropdown overlay={menu} placement="bottomRight" trigger={['click']} className={styles.menu}>
      <div className={styles.buttonWrap}>
        <Button
          type="default"
          onClick={e => e.preventDefault()}
          size="large"
          icon={<EllipsisOutlined size={6} style={{ rotate: '90deg' }} />}
        />
      </div>
    </Dropdown>
  );
};