import React from 'react'
import { useZocksStore } from '../../../app'
import { selectLocalParticipant } from '../../../store'
import { Participant } from '../../Participant'
import { usePagedParticipants, useSortRemoteParticipantsForGridView } from '../hooks'
import { MultipleParticipantViewProps } from '../model'
import zocksStyle from './ParticipantsGridView.module.scss'
import { getClassName, getMergedClassNames } from '../../common'

export const ParticipantsGridView: React.FC<MultipleParticipantViewProps> = ({ pageSize = 25, components, styles }) => {
  const localParticipant = useZocksStore(selectLocalParticipant)

  const remoteParticipants = useSortRemoteParticipantsForGridView(pageSize)
  const allParticipants = [localParticipant, ...remoteParticipants]

  const { displayedParticipants, hasNextPage, hasPreviousPage, nextPage, previousPage } = usePagedParticipants(
    allParticipants,
    pageSize
  )
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  const gridClass = getGridClassForParticipants(displayedParticipants.length, mergedStyles)

  const ParticipantElement = components?.Participant ?? Participant

  return (
    <div className={getClassName('participants-grid-view', mergedStyles)}>
      {hasPreviousPage && <PreviousButton onClick={previousPage} mergedStyles={mergedStyles} />}
      <div className={`${getClassName('participants-grid-view__grid', mergedStyles)} ${gridClass}`}>
        {displayedParticipants.map((participant) => (
          <ParticipantElement key={participant.id} participant={participant} withAudio={true} styles={mergedStyles} />
        ))}
      </div>
      {hasNextPage && <NextButton onClick={nextPage} mergedStyles={mergedStyles} />}
    </div>
  )
}

const getGridClassForParticipants = (numberOfParticipants: number, mergedStyles: { [key: string]: string }): string => {
  switch (true) {
    case numberOfParticipants <= 1:
      return getClassName('participants-grid-view__grid--1-column', mergedStyles)
    case numberOfParticipants <= 4:
      return getClassName('participants-grid-view__grid--2-columns', mergedStyles)
    case numberOfParticipants <= 9:
      return getClassName('participants-grid-view__grid--3-columns', mergedStyles)
    case numberOfParticipants <= 16:
      return getClassName('participants-grid-view__grid--4-columns', mergedStyles)
    default:
      return getClassName('participants-grid-view__grid--5-columns', mergedStyles)
  }
}

const PreviousButton: React.FC<{ onClick: () => void; mergedStyles?: { [key: string]: string } }> = ({
  onClick,
  mergedStyles,
}) => (
  <button
    className={`${getClassName('participants-grid-view__button', mergedStyles)} ${getClassName(
      'participants-grid-view__previous-button',
      mergedStyles
    )}`}
    onClick={onClick}
    aria-label='Previous'
  >
    <div className={getClassName('participants-grid-view__previous-button-icon', mergedStyles)} />
  </button>
)

const NextButton: React.FC<{ onClick: () => void; mergedStyles?: { [key: string]: string } }> = ({
  onClick,
  mergedStyles,
}) => (
  <button
    className={`${getClassName('participants-grid-view__button', mergedStyles)} ${getClassName(
      'participants-grid-view__next-button',
      mergedStyles
    )}`}
    onClick={onClick}
    aria-label='Next'
  >
    <div className={getClassName('participants-grid-view__next-button-icon', mergedStyles)} />
  </button>
)
