import React from 'react'
import { useZocksStore } from '../../../app'
import { selectLocalParticipant, selectScreenSharingParticipant } from '../../../store'
import { Participant } from '../../Participant'
import { ScreenShare } from '../../ScreenShare'
import { usePagedParticipants, useSortRemoteParticipantsBySpeakers } from '../hooks'
import { ScreenShareViewProps } from '../model'
import zocksStyle from './ParticipantsScreenShareView.module.scss'
import { getClassName, getMergedClassNames, StyledComponent } from '../../common'

export const ParticipantsScreenShareView: React.FC<ScreenShareViewProps> = ({ pageSize = 4, components, styles }) => {
  const localParticipant = useZocksStore(selectLocalParticipant)
  const screenSharingParticipant = useZocksStore(selectScreenSharingParticipant)

  const { remoteParticipantsSortedBySpeakers } = useSortRemoteParticipantsBySpeakers()

  const allParticipants = [localParticipant, ...remoteParticipantsSortedBySpeakers]
  const { displayedParticipants, hasNextPage, hasPreviousPage, nextPage, previousPage } = usePagedParticipants(
    allParticipants,
    pageSize
  )

  const ParticipantElement = components?.Participant ?? Participant
  const ScreenShareElement = components?.ScreenShare ?? ScreenShare

  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  return (
    <div className={getClassName('participants-screen-share-view', mergedStyles)}>
      <div className={getClassName('participants-screen-share-view__current-share', mergedStyles)}>
        {screenSharingParticipant && (
          <ScreenShareElement participant={screenSharingParticipant} styles={mergedStyles} />
        )}
      </div>
      {hasPreviousPage && <PreviousButton onClick={previousPage} styles={mergedStyles} />}
      <div className={getClassName('participants-screen-share-view__participants-container', mergedStyles)}>
        <div className={getClassName('participants-screen-share-view__participants', mergedStyles)}>
          {displayedParticipants.map((participant) => (
            <ParticipantElement key={participant.id} participant={participant} styles={mergedStyles} />
          ))}
        </div>
      </div>
      {hasNextPage && <NextButton onClick={nextPage} styles={mergedStyles} />}
    </div>
  )
}

const PreviousButton: React.FC<{ onClick: () => void } & StyledComponent> = ({ onClick, styles }) => (
  <button
    className={`${getClassName('participants-screen-share-view__button', styles)} ${getClassName(
      'participants-screen-share-view__previous-button',
      styles
    )}`}
    onClick={onClick}
    aria-label='Previous'
  >
    <div className={getClassName('participants-screen-share-view__previous-button-icon', styles)} />
  </button>
)

const NextButton: React.FC<{ onClick: () => void } & StyledComponent> = ({ onClick, styles }) => (
  <button
    className={`${getClassName('participants-screen-share-view__button', styles)} ${getClassName(
      'participants-screen-share-view__next-button',
      styles
    )}`}
    onClick={onClick}
    aria-label='Next'
  >
    <div className={getClassName('participants-screen-share-view__next-button-icon', styles)} />
  </button>
)
