Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'
import { Avatar, Card } from '@mui/material'
import { useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
import styled from 'styled-components'

import OpenInNewIcon from '@mui/icons-material/OpenInNew'
import EditIcon from '@mui/icons-material/Edit'
import DeleteIcon from '@mui/icons-material/Delete'
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'

export const StyledQuestionCard = styled(Card)`
  background: var(--bg-color);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  height: fit-content;
  padding: 1rem 0;
  & > * {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  & > h2 {
    font-size: 2rem;
    line-height: 1.2;
  }
  p {
    color: var(--font-color);
    font-size: 1rem;
    font-weight: 400;
    text-align: justify;
    margin-bottom: 0.5rem;
  }
  span {
    color: var(--subtitle-color);
    font-weight: 600;
    font-size: 0.9rem;
  }
`

export const QuestionDetails = styled.div`
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-primary);
`

export const QuestionUserInfo = styled.div`
  align-items: center;
  background: var(--chat-send);
  border-radius: var(--border-radius);
  color: var(--font-color);
  display: inline-flex;
  font-weight: 600;
  gap: 0.5rem;
  padding: 0.5rem;
  width: fit-content;
`

export const QuestionActions = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-around;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-primary);
  & > * {
    flex-grow: 1;
  }
  .btn {
    color: var(--icons-color);
    font-size: 1rem !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--border-radius) !important;
    padding: 5px !important;
    position: relative;
  }
`

export const QuestionStats = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;
`

export const QuestionCategories = styled.ul`
  align-items: center;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  max-width: 200px;
  li {
    background: var(--chat-send);
    border-radius: var(--border-radius);
    color: var(--font-color);
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
  }
`

const QuestionCard = ({
  updated_on = '',
  link_add_comment = '',
  last_answer_on = '',
  added_on = '',
  user_name = '',
  user_image = '',
  title = '',
  description = '',
  categories = [],
  views = 0,
  answers = 0,
  reactions = 0,
  comments = 0,
  link_view = '',
  link_edit = '',
  link_delete = '',
  link_answers_add = '',
  link_answers = '',
  onDelete = () => null,
  onEdit = () => null,
  onReply = () => null,
}) => {
  const labels = useSelector(({ intl }) => intl.labels)
  const history = useHistory()

  const onView = (url = '') => {
    history.replace(url)
  }

  const goBack = () => {
    history.replace('/my-coach')
  }

  return (
    <StyledQuestionCard>
      <QuestionDetails>
        <QuestionUserInfo>
          <Avatar
            src={user_image}
            alt={`${user_name} profile image`}
            sx={{ width: '50px', height: '50px' }}
          />
          <p>{user_name}</p>
        </QuestionUserInfo>
        <QuestionCategories>
          {categories.map(({ category }) => (
            <li key={category}>{category}</li>
          ))}
        </QuestionCategories>
      </QuestionDetails>

      <h2>{title}</h2>
      <span>{`${labels.my_coach_question} ${added_on}`}</span>
      {last_answer_on && (
        <span>{`${labels.my_coach_last_answer} ${last_answer_on}`}</span>
      )}
      <p className="my-3">{description}</p>

      <QuestionStats className="mb-2">
        <span>{`${answers} ${labels.my_coach_answers}`}</span>
        <span>{`${reactions} ${labels.my_coach_reactions}`}</span>
        <span>{`${views} ${labels.my_coach_views}`}</span>
        <span>{`${comments} ${labels.comments}`}</span>
      </QuestionStats>

      <QuestionActions>
        {link_answers && (
          <button className="btn feed__share-option" onClick={goBack}>
            <ArrowBackIosNewIcon />
            {labels.back}
          </button>
        )}
        {link_view && (
          <button
            className="btn feed__share-option"
            onClick={() => onView(link_view)}
          >
            <OpenInNewIcon />
            {labels.view}
          </button>
        )}
        {link_edit && (
          <button
            className="btn feed__share-option"
            onClick={() => onEdit(link_edit)}
          >
            <EditIcon />
            {labels.edit}
          </button>
        )}
        {link_answers_add && (
          <button
            className="btn feed__share-option"
            onClick={() => onReply(link_edit)}
          >
            <EditIcon />
            {labels.reply}
          </button>
        )}
        {link_delete && (
          <button
            className="btn feed__share-option"
            onClick={() => onDelete(link_delete)}
          >
            <DeleteIcon />
            {labels.delete}
          </button>
        )}
      </QuestionActions>
    </StyledQuestionCard>
  )
}

export default QuestionCard