import React from 'react'
import {
  getClassName,
  getMergedClassNames,
  JoinPage,
  JoinPageLocalStreams,
  JoinPageLocalStreamsProps,
  StyledComponent,
} from '../../../components'
import { JoinButtonProps, OneOnOneJoinPageProps } from './models'
import zocksStyle from './OneOnOneJoinPage.module.scss'

export const OneOnOneJoinPage: React.FC<OneOnOneJoinPageProps> = ({
  joinAction,
  joinOptions = {},
  components,
  styles,
}) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  const JoinButtonElement = components?.JoinButton ?? JoinButton
  const DisabledVideoPlaceholderElement = components?.DisabledVideoPlaceholder ?? DisabledVideoPlaceholder
  const EmptyElement = () => null

  const ExtendedJoinPageLocalStreams: React.FC<JoinPageLocalStreamsProps> = (props) => (
    <JoinPageLocalStreams
      {...props}
      styles={mergedStyles}
      components={{
        DisabledVideoComponent: DisabledVideoPlaceholderElement,
        ExtraComponent: () => (
          <JoinButtonElement
            styles={mergedStyles}
            joinAction={joinAction}
            joinOptions={{ ...props.baseJoinOptions, ...joinOptions }}
          />
        ),
      }}
    />
  )

  return (
    <JoinPage
      styles={mergedStyles}
      joinAction={joinAction}
      joinOptions={joinOptions}
      components={{
        JoinPageHeader: EmptyElement,
        JoinPageRoomInput: EmptyElement,
        JoinPageRoomButtons: EmptyElement,
        JoinPageLocalStreams: ExtendedJoinPageLocalStreams,
      }}
    />
  )
}

const DisabledVideoPlaceholder: React.FC<StyledComponent> = ({ styles }) => {
  return <div className={getClassName('oneonone-join-page__no-video', styles)}>{'Your camera is turned off.'}</div>
}

const JoinButton: React.FC<JoinButtonProps> = ({ styles, joinAction, joinOptions }) => {
  return (
    <button
      id='oneonone-join-page__join-button'
      className={getClassName('oneonone-join-page__join-button', styles)}
      onClick={() => joinAction(joinOptions)}
    >
      <label htmlFor='oneonone-join-page__join-button'>Join</label>
    </button>
  )
}
