import { Fragment, h } from 'preact'
import { bool, string } from 'prop-types'
import styled from 'styled-components'

import Logo from '../Logo'
import { H2, P } from '../Text'
import { InfoButton, OverlayWrapper, TopLeft } from './styles'

const StyledP = styled(P)`
  &:first-of-type {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  &:last-of-type {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
`

const renderTitles = titles =>
  titles.split('\\n').map(title => (
    <StyledP key={title} size={18}>
      {title}
    </StyledP>
  ))

const VideoOverlay = ({
  active,
  title,
  org,
  setInfoActive,
  onClick,
  onClickFullscreen,
  isFullscreen,
}) => (
  // const displayTitle = `${title}${org ? ` — ${org}` : ''}`

  <Fragment>
    <OverlayWrapper onClick={onClick}>
      <TopLeft $active={active}>
        {/* <Logo active={active} /> */}
        {title ? renderTitles(title) : null}
      </TopLeft>
    </OverlayWrapper>
    <InfoButton $active={active} onClick={() => setInfoActive(true)}>
      INFO
    </InfoButton>
    <InfoButton $active={active} onClick={onClickFullscreen} postition="bl">
      {isFullscreen ? 'EXIT FULLSCREEN' : 'FULLSCREEN'}
    </InfoButton>
  </Fragment>
)

VideoOverlay.propTypes = {
  active: bool,
  title: string.isRequired,
  org: string,
}

export default VideoOverlay
