Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useCallback, useState } from 'react'
import IconButton from '@mui/material/IconButton'
import SearchIcon from '@mui/icons-material/Search'
import MoreVertIcon from '@mui/icons-material/MoreVert'

import ContactsList from './ContactsList'
import CreateGroupModal from '../group-modal/CreateGroupModal'
import ContactsModal from '../../../chat/chat/components/ContactsModal'

const Contacts = ({
  persons = [],
  groups = [],
  selectedConversation,
  changeConversation,
}) => {
  const TABS = { persons: 1, groups: 2 }
  const [tab, setTab] = useState(TABS.persons)
  const [search, setSearch] = useState('')
  const [isShowGroupModal, setIsShowGroupModal] = useState(false)
  const [isShowContactsModal, setIsShowContactsModal] = useState(false)

  const options = [
    {
      label: 'Iniciar conversación',
      action: () => setIsShowContactsModal(true),
    },
    { label: 'Crear grupo', action: () => setIsShowGroupModal(true) },
  ]

  const onCreateConversation = (url) => {
    const conversation = persons.find((user) => user.url_send === url)
    changeConversation(conversation)
  }

  const conversations = useCallback(() => {
    if (tab === TABS.persons) {
      return persons.filter((conversation) =>
        conversation.name.toLowerCase().includes(search.toLowerCase())
      )
    }
    return groups.filter((conversation) =>
      conversation.name.toLowerCase().includes(search.toLowerCase())
    )
  }, [TABS, tab])

  return (
    <>
      <aside className="chat_contacts">
        <div className="position-relative">
          <h1>Chat</h1>
          <Contacts.Options options={options} />
        </div>
        <div className="tabs">
          <button
            className={`btn ${tab === TABS.persons && 'active-tab'}`}
            onClick={() => setTab(TABS.persons)}
          >
            Personas
          </button>
          <button
            className={`btn ${tab === TABS.groups && 'active-tab'}`}
            onClick={() => setTab(TABS.groups)}
          >
            Grupos
          </button>
        </div>
        <div className="contact__search show">
          <SearchIcon />
          <input
            type="text"
            placeholder="Buscar"
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>
        <ContactsList
          conversations={conversations()}
          selectedConversation={selectedConversation}
          onClick={changeConversation}
        />
      </aside>
      <ContactsModal
        show={isShowContactsModal}
        onClose={() => setIsShowContactsModal(false)}
        onComplete={onCreateConversation}
      />
      <CreateGroupModal
        isOpen={isShowGroupModal}
        onClose={() => setIsShowGroupModal(false)}
      />
    </>
  )
}

const Options = ({ options }) => {
  const [isShowMenu, setIsShowMenu] = useState(false)

  const toggleOptions = () => {
    setIsShowMenu(!isShowMenu)
  }

  return (
    <div className="header-options" style={{ right: '0' }}>
      <IconButton onClick={toggleOptions}>
        <MoreVertIcon />
      </IconButton>
      <div className="position-relative">
        <div className={`feed-options ${isShowMenu ? 'active' : ''}`}>
          <ul>
            {options.map((option, index) => (
              <li key={index}>
                <button
                  className="btn option-btn"
                  onClick={() => {
                    toggleOptions()
                    option.action()
                  }}
                >
                  {option.label}
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  )
}

Contacts.Options = Options

export default Contacts