Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react'
import { Tab, Tabs, styled } from '@mui/material'

import { useFetch } from '@hooks'
import { REACTIONS } from '@constants/feed'

import Modal from '@components/UI/modal/Modal'
import Spinner from '@components/UI/Spinner'
import UsersList from '@components/UI/UsersList'

const ReactionTab = styled(Tab)(() => ({
  minWidth: 'auto',
  minHeight: 'auto',
  padding: '0.5rem 1rem'
}))

export default function ReactionsModal({
  reactionsUsersUrl = '',
  reactions = [],
  show = false,
  onClose
}) {
  const { data: users, isLoading } = useFetch(show ? reactionsUsersUrl : '', [])
  const [reaction, setReaction] = useState('')

  const availableReactions = useMemo(
    () =>
      REACTIONS.filter(({ type }) =>
        reactions.some(({ reaction }) => type === reaction)
      ),
    [reactions]
  )

  const filteredUsers = useMemo(
    () => (reaction ? users.filter((u) => u.reaction === reaction) : users),
    [reaction, users]
  )

  return (
    <Modal
      show={show}
      title='Personas que reaccionaron'
      onClose={onClose}
      showFooter={false}
    >
      <Tabs
        value={reaction}
        onChange={(e, newValue) => setReaction(newValue)}
        sx={{
          width: '100%',
          minHeight: 'auto',
          '& .MuiTabs-indicator': {
            backgroundColor: 'var(--font-color)'
          }
        }}
      >
        <ReactionTab value='' label='Todas' disableRipple />

        {availableReactions.map(({ name, icon: Icon, type, color }) => (
          <ReactionTab
            key={type}
            value={type}
            label={name}
            icon={<Icon style={{ color }} />}
            disableRipple
          />
        ))}
      </Tabs>

      {isLoading ? <Spinner /> : <UsersList users={filteredUsers} />}
    </Modal>
  )
}