import React from 'react'
import { ParticipantsViewType } from '../../../store'
import { useViewSwitcher } from './hooks'
import zocksStyle from './ViewSwitcher.module.scss'
import { StyledComponent } from '../../common'
import { getClassName, getMergedClassNames } from '../../common'

export const ViewSwitcher: React.FC<StyledComponent> = ({ styles }) => {
  const { currentView, changeView } = useViewSwitcher()
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  return (
    <div className={getClassName('view-switcher__buttons-container', mergedStyles)}>
      <button
        className={getClassName('view-switcher__button', mergedStyles)}
        onClick={() => changeView(ParticipantsViewType.Grid)}
        disabled={currentView === ParticipantsViewType.Grid}
        aria-label='Change to grid view'
      >
        <div className={getClassName('view-switcher__grid-icon', mergedStyles)} />
      </button>
      <button
        className={getClassName('view-switcher__button', mergedStyles)}
        onClick={() => changeView(ParticipantsViewType.Speaker)}
        disabled={currentView === ParticipantsViewType.Speaker}
        aria-label='Change to speaker view'
      >
        <div className={getClassName('view-switcher__speaker-icon', mergedStyles)} />
      </button>
    </div>
  )
}
