import { Fragment, h } from 'preact'
import { bool, string } from 'prop-types'
import styled from 'styled-components'
import { colours } from '../../../assets/theme'
import { useUiStore } from '../../../store'

import { InfoButton, PositionedCross as CrossSvg, 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,
  onClick,
  onClickFullscreen,
  isFullscreen,
  streamIsLive,
}) => {
  const setStreamActive = useUiStore(store => store.setStreamActive)
  const closeStream = () => setStreamActive(false)

  return (
    <Fragment>
      <OverlayWrapper onClick={onClick}>
        <TopLeft $active={active}>
          {title ? renderTitles(title) : null}
        </TopLeft>
      </OverlayWrapper>
      <CrossSvg colour={colours.white} size={32} $active={active} onClick={closeStream} />
      <InfoButton $active={active} onClick={onClickFullscreen} postition="bl" colour={colours.midnight} hoverColour={colours.offwhite}>
        {isFullscreen ? 'EXIT FULLSCREEN' : 'FULLSCREEN'}
      </InfoButton>

    </Fragment>
  )
}

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

export default VideoOverlay
