import React from 'react'
import PropTypes from 'prop-types'
import {
  StackView,
  Typography,
  useThemeTokens,
  selectSystemProps,
  Icon
} from '@telus-uds/components-base'
import styled from 'styled-components'
import videoText from '../../../videoText'
import { htmlAttrs } from '../../../../utils'

const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])

const MenuContainer = styled.div(({ padding, background }) => ({
  width: 114,
  padding,
  backgroundColor: background,
  borderRadius: 5
}))

const MenuButton = styled.button({
  background: 'none',
  border: 'none',
  padding: 0,

  width: '100%',
  cursor: 'pointer',
  display: 'flex',
  justifyContent: 'space-between',
  verticalAlign: 'middle'
})

const CheckmarkContainer = styled.div(
  ({
    isSelectedItem,
    checkMarkWidth,
    checkMarkHeight,
    checkMarkSelectedColor,
    checkMarkHoverColor,
    checkMarkFocusColor,
    checkMarkUnselectedColor
  }) => ({
    width: checkMarkWidth,
    height: checkMarkHeight,
    marginTop: 2,
    outline: 'none',

    [`${MenuButton} && svg`]: {
      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkUnselectedColor
    },
    [`${MenuButton}:hover && svg`]: {
      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkHoverColor
    },
    [`${MenuButton}:focus && svg`]: {
      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkFocusColor
    }
  })
)

const VideoMenu = ({
  menuLabel,
  menuOptions,
  setSelection,
  selectedItem,
  copy,
  tokens,
  variant,
  ...rest
}) => {
  const {
    padding,
    background,
    checkMarkWidth,
    checkMarkHeight,
    checkMarkSelectedColor,
    checkMarkHoverColor,
    checkMarkFocusColor,
    checkMarkUnselectedColor,
    checkMarkIcon
  } = useThemeTokens('VideoMenu', tokens, variant)

  const getMenuItems = () => {
    return menuOptions.map((option) => {
      if (option.name) {
        return (
          <MenuButton
            aria-haspopup="true"
            role="menuitem"
            aria-label={`${option.name} ${menuLabel}. ${
              selectedItem === option.value
                ? videoText[copy].itemSelected
                : videoText[copy].itemUnselected
            }`}
            selectedItem={selectedItem}
            itemValue={option.value}
            onClick={() => {
              if (selectedItem !== option.value) {
                setSelection(option.value)
              }
            }}
            key={option.value}
          >
            <Typography variant={{ bold: true, inverse: true }}>{option.name}</Typography>
            <CheckmarkContainer
              isSelectedItem={option.value === selectedItem}
              checkMarkWidth={checkMarkWidth}
              checkMarkHeight={checkMarkHeight}
              checkMarkSelectedColor={checkMarkSelectedColor}
              checkMarkHoverColor={checkMarkHoverColor}
              checkMarkFocusColor={checkMarkFocusColor}
              checkMarkUnselectedColor={checkMarkUnselectedColor}
            >
              <Icon icon={checkMarkIcon} />
            </CheckmarkContainer>
          </MenuButton>
        )
      }
      return null
    })
  }

  const handleOnKeyDown = (event) => {
    const key = event.key || event.keyCode

    // Disables playing by space bar, as that can be used to click a button
    if (key === ' ' || key === 32) {
      event.stopPropagation()
    }
  }

  return (
    <MenuContainer
      onKeyDown={handleOnKeyDown}
      padding={padding}
      background={background}
      {...selectProps(rest)}
    >
      <StackView space={2} divider>
        <Typography variant={{ bold: true, inverse: true }}>{menuLabel}</Typography>
        <div role="menu">{getMenuItems()}</div>
      </StackView>
    </MenuContainer>
  )
}

VideoMenu.propTypes = {
  ...selectedSystemPropTypes,
  menuLabel: PropTypes.string.isRequired,
  menuOptions: PropTypes.array.isRequired,
  setSelection: PropTypes.func.isRequired,
  selectedItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  copy: PropTypes.oneOf(['en', 'fr']).isRequired
}

export default VideoMenu