Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
import { styled } from '@mui/material';

import Widget from '@components/UI/Widget';
import SurveyForm from '@components/survey-form/SurveyForm';
import FeedDescription from './feed-description';

const FeedContainer = styled(Widget.Body)(({ theme }) => ({
  padding: 0,
  '& > *:not(img, video, .MuiCard-root)': {
    padding: theme.spacing(0, 1)
  },
  '& > p, & > span': {
    fontSize: '1rem',
    wordWrap: 'break-word',
    fontWeight: 'normal'
  },
  '& > img, & > video ': {
    width: '100%',
    maxHeight: '600px',
    objectFit: 'contain',
    position: 'relative'
  }
}));

export default function FeedContent({ id }) {
  const [showModal, setShowModal] = useState(false);

  const {
    owner_description: description,
    owner_file_image: image,
    owner_file_document: document,
    owner_file_video: video,
    owner_file_image_preview: imagePreview,
    feed_vote_url: voteUrl,
    feed_content_type: contentType,
    shared_name: sharedName,
    shared_image: sharedImage,
    shared_time_elapse: sharedTimeElapse,
    shared_description: sharedFeedDescription,
    shared_file_video: sharedFileVideo,
    shared_file_image_preview: sharedFileImagePreview,
    shared_file_image: sharedFileImage,
    shared_file_document: sharedFileDocument,
    shared_content_type: sharedContentType
  } = useSelector(({ feed }) => feed.feeds.byId[id]);

  const answers = useMemo(() => {
    if (contentType !== 'fast-survey') return [];
    return Array.from(
      { length: description.number_of_answers },
      (_, i) => description[`answer${i + 1}`]
    );
  }, [description, contentType]);

  const votes = useMemo(() => {
    if (contentType !== 'fast-survey') return [];
    return Array.from(
      { length: description.number_of_votes ?? 0 },
      (_, i) => description[`votes${i + 1}`]
    );
  }, [description, contentType]);

  const toggleModal = () => setShowModal(!showModal);

  return (
    <FeedContainer>
      {description && contentType !== 'fast-survey' && (
        <FeedDescription description={description} />
      )}
      {contentType === 'video' && (
        <video
          poster={imagePreview}
          src={video}
          onClick={toggleModal}
          preload='none'
          controls
          controlsList='nodownload'
        />
      )}
      {contentType === 'image' && (
        <img src={image} onClick={toggleModal} loading='lazy' width='100%' height='100%' />
      )}
      {contentType === 'document' && (
        <a href={document} target='_blank' rel='noreferrer'>
          <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
        </a>
      )}
      {contentType === 'fast-survey' && (
        <SurveyForm
          voteUrl={voteUrl}
          active={Boolean(description.active)}
          question={description.question}
          time={description.time_remaining}
          resultType={description.result_type}
          result={description.result}
          answers={answers}
          votes={votes}
        />
      )}
      {contentType === 'shared' && (
        <Widget styles={{ width: 'inherit' }}>
          <Widget.Header avatar={sharedImage} title={sharedName} subheader={sharedTimeElapse} />
          <FeedContainer>
            <FeedDescription description={sharedFeedDescription} />
            {sharedContentType === 'video' && (
              <video
                poster={sharedFileImagePreview}
                src={sharedFileVideo}
                onClick={toggleModal}
                controls
                preload='none'
                controlsList='nodownload'
              />
            )}
            {sharedContentType === 'image' && (
              <img src={sharedFileImage} onClick={toggleModal} loading='lazy' width='100%' />
            )}
            {sharedContentType === 'document' && (
              <a href={sharedFileDocument} target='_blank' rel='noreferrer'>
                <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
              </a>
            )}
          </FeedContainer>
        </Widget>
      )}
    </FeedContainer>
  );
}