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

export const DefaultVideoControlMenu: React.FC<SelectMenuProps<DeviceMenuItem>> = ({
  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 =
  (
    availableVirtualBackgrounds: VirtualBackgroundItem[] | null,
    currentVirtualBackground: VirtualBackgroundItem | null,
    toggleVirtualBackground: (
      virtualBackgroundType: VirtualBackgroundType,
      config?: VirtualBackgroundConfig
    ) => Promise<void>
  ): React.FC<SelectMenuProps<DeviceMenuItem>> =>
  ({ styles, menuItems, onMenuItemClick, hideMenu }) => {
    const mergedStyles = getMergedClassNames(zocksStyle, styles)
    const onVirtualBackgroundClick = async (item: VirtualBackgroundItem) => {
      hideMenu()
      await toggleVirtualBackground(item.type, { backgroundImageUrl: item.url })
    }

    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}
          {availableVirtualBackgrounds?.map((backgroundItem, idx) => {
            return (
              <li
                aria-label='Virtual Background'
                key={idx}
                className={`${getClassName('select-button__popover-item', mergedStyles)} ${getClassName(
                  `virtual-background-menu-item virtual-background-menu-item__${backgroundItem.type}`,
                  mergedStyles
                )}`}
                onClick={() => onVirtualBackgroundClick(backgroundItem)}
              >
                <>
                  {backgroundItem.type === VirtualBackgroundType.BLUR && (
                    <>
                      <i className={getClassName('icon-virtual-background', mergedStyles)} />
                      {currentVirtualBackground?.type === VirtualBackgroundType.BLUR
                        ? 'Unblur My Background'
                        : 'Blur My Background'}
                    </>
                  )}
                  {backgroundItem.type === VirtualBackgroundType.IMAGE && (
                    <>
                      <img src={backgroundItem.url} alt='' style={{ width: '24px' }} />
                      {currentVirtualBackground?.type === VirtualBackgroundType.IMAGE &&
                      currentVirtualBackground.url === backgroundItem.url
                        ? 'Disable Background'
                        : 'Enable Background'}
                    </>
                  )}
                </>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
