import type { ReactNode } from 'react'

import styled from 'styled-components/macro'

import isUndefined from 'lodash/isUndefined'

import { secondsToHms } from 'helpers'
import { T9n } from 'features/T9n'
import { LiveBtn as LiveBtnBase } from 'features/StreamPlayer/styled'

import { Button, Title } from '../../styled'

type Props = {
  active?: boolean,
  children: ReactNode,
  className?: string,
  disabled?: boolean,
  duration?: number,
  leftContent?: ReactNode,
  live?: boolean,
  onClick: () => void,
}

type TLiveBtn = {
  isActive?: boolean,
}

export const Duration = styled(Title)`
  margin-left: 10px;
  font-weight: normal;
`

export const LiveBtn = styled(LiveBtnBase)<TLiveBtn>`
  margin-left: 10px;
  background-color: ${({ isActive }) => (
    isActive
      ? 'transparent'
      : '#CC0000')};
`

export const PlayButton = ({
  active,
  children,
  className,
  disabled,
  duration,
  leftContent,
  live,
  onClick,
}: Props) => (
  <Button
    className={className}
    onClick={onClick}
    active={active}
    disabled={disabled}
  >
    {leftContent}
    <Title>
      {children}
    </Title>
    {!isUndefined(duration) && (
      (live && !duration)
        ? (
          <LiveBtn isActive={active}>
            <T9n t='live' />
          </LiveBtn>
        )
        : <Duration>{secondsToHms(duration)}</Duration>
    )}
  </Button>
)
