Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'
import { useSelector } from 'react-redux'
import styled from 'styled-components'
import Avatar from '@mui/material/Avatar'

import Options from '../UI/Option'
import EmptySection from '../UI/EmptySection'

const StyledContact = styled.div`
  align-items: center;
  display: flex;
  height: auto;
  padding: 0.5rem 1rem;
  gap: 0.5rem;
  cursor: pointer;
`
const StyledContactInfo = styled.div`
  display: flex;
  flex-direction: column;

  span {
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20ch;
  }
`

const Contacts = ({ children }) => {
  return <aside className="chat_contacts">{children}</aside>
}

const Header = ({ options = {}, children }) => {
  return (
    <div className="position-relative">
      {children}
      {!!options.length && <Options options={options} />}
    </div>
  )
}

const List = ({
  contacts = [],
  onChange = () => null,
  currentConversation,
}) => {
  const labels = useSelector(({ intl }) => intl.labels)

  return (
    <div className="contacts-list">
      <ul>
        {!contacts.length ? (
          <EmptySection message={labels.datatable_szerorecords} />
        ) : (
          contacts.map((contact) => (
            <li key={contact.id}>
              <List.Item contact={contact} onClick={onChange} />
            </li>
          ))
        )}
      </ul>
    </div>
  )
}

const Item = ({ contact, onClick }) => {
  const labels = useSelector(({ intl }) => intl.labels)

  return (
    <StyledContact onClick={() => onClick(contact)}>
      <Avatar
        src={contact.image || '/images/users-group.png'}
        alt="image-image"
        sx={{ width: 32, height: 32 }}
      />
      <StyledContactInfo>
        <span>{contact.name}</span>
        {contact.last_message && (
          <p>
            {`${contact.count_not_seen_messages} ${labels.new_messages} |
              ${contact.last_message}`}
          </p>
        )}
      </StyledContactInfo>
    </StyledContact>
  )
}

List.Item = Item
Contacts.List = List
Contacts.Header = Header

export default Contacts