import React from 'react'
import { getClassName, getMergedClassNames, SelectMenuProps } from '../../../common'
import zocksStyle from './AudioControlMenu.module.scss'

export const DefaultAudioControlMenu: React.FC<SelectMenuProps> = ({ styles, menuItems, onMenuItemClick }) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  return (
    <div className={getClassName('select-button__popover-container', mergedStyles)}>
      <ul className={getClassName('select-button__popover-list', mergedStyles)}>
        <li
          className={`${getClassName('select-button__popover-item', mergedStyles)} ${getClassName(
            'audio-control-menu-item',
            mergedStyles
          )}`}
        >
          Microphone Settings
        </li>
        {menuItems.length > 0
          ? menuItems.map((item, i) => {
              return (
                <li
                  className={getClassName('select-button__popover-item', mergedStyles)}
                  key={i}
                  onClick={() => onMenuItemClick(item)}
                >
                  {item.label}
                  {item.selected ? <i className={getClassName('icon-check-mark', mergedStyles)} /> : null}
                </li>
              )
            })
          : null}
      </ul>
    </div>
  )
}

export const TranscriptionAudioControlMenu = (
  displayTranscriptions: boolean,
  toggleDisplayTranscription: () => void
): React.FC<SelectMenuProps> => {
  return ({ styles, menuItems, onMenuItemClick, hideMenu }) => {
    const onTranscriptionClick = async () => {
      hideMenu()
      toggleDisplayTranscription()
    }

    const mergedStyles = getMergedClassNames(zocksStyle, styles)

    return (
      <div className={getClassName('select-button__popover-container', mergedStyles)}>
        <ul className={getClassName('select-button__popover-list', mergedStyles)}>
          <li
            className={`${getClassName('select-button__popover-item', mergedStyles)} ${getClassName(
              'audio-control-menu-item',
              mergedStyles
            )}`}
          >
            Microphone Settings
          </li>
          {menuItems.length > 0
            ? menuItems.map((item, i) => {
                return (
                  <li
                    className={getClassName('select-button__popover-item', mergedStyles)}
                    key={i}
                    onClick={() => onMenuItemClick(item)}
                  >
                    {item.label}
                    {item.selected ? <i className={getClassName('icon-check-mark', mergedStyles)} /> : null}
                  </li>
                )
              })
            : null}
          <li
            className={`${getClassName('select-button__popover-item', mergedStyles)} ${getClassName(
              'transcription-menu-item',
              mergedStyles
            )}`}
            onClick={onTranscriptionClick}
          >
            {displayTranscriptions ? (
              <>
                <i className={getClassName('icon-close', mergedStyles)} />
                {'Hide Transcriptions'}
              </>
            ) : (
              <>
                <i className={getClassName('icon-message', mergedStyles)} />
                {'Show Transcriptions'}
              </>
            )}
          </li>
        </ul>
      </div>
    )
  }
}
