import React from 'react'
import { VirtualBackgroundType } from '@zocks-communications/client-sdk-js'
import { getClassName, getMergedClassNames, SelectMenuProps } from '../../../common'
import zocksStyle from './VideoControlMenu.module.scss'

export const DefaultVideoControlMenu: 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(
            'video-control-menu-item',
            mergedStyles
          )}`}
        >
          Camera 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 VirtualBackgroundVideoControlMenu =
  (
    currentVirtualBackground: VirtualBackgroundType | null,
    toggleBlur: () => Promise<void>
  ): React.FC<SelectMenuProps> =>
  ({ styles, menuItems, onMenuItemClick, hideMenu }) => {
    const mergedStyles = getMergedClassNames(zocksStyle, styles)

    const onBlurClick = async () => {
      hideMenu()
      await toggleBlur()
    }

    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(
              'video-control-menu-item',
              mergedStyles
            )}`}
          >
            Camera 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(
              'blur-menu-item',
              mergedStyles
            )}`}
            onClick={onBlurClick}
          >
            {currentVirtualBackground ? (
              <>
                <i className={getClassName('icon-virtual-background', mergedStyles)} />
                Unblur My Background
              </>
            ) : (
              <>
                <i className={getClassName('icon-background-blur', mergedStyles)} />
                Blur My Background
              </>
            )}
          </li>
        </ul>
      </div>
    )
  }
