import { Fragment } from 'react'

import map from 'lodash/map'

import { OutsideClick } from 'features/OutsideClick'

import type { Props } from './hooks'
import { useSettings } from './hooks'
import {
  SettingsButton,
  QualitiesList,
  QualityItem,
} from './styled'

export const Settings = (props: Props) => {
  const { selectedQuality, videoQualities } = props
  const {
    close,
    isOpen,
    onItemClick,
    open,
  } = useSettings(props)
  return (
    <Fragment>
      <SettingsButton onClick={open} />
      {
        isOpen && (
          <OutsideClick onClick={close}>
            <QualitiesList>
              {
                map(videoQualities, (quality) => (
                  <QualityItem
                    key={quality}
                    active={quality === selectedQuality}
                    onClick={() => onItemClick(quality)}
                  >
                    {quality}
                  </QualityItem>
                ))
              }
            </QualitiesList>
          </OutsideClick>
        )
      }
    </Fragment>
  )
}