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)
  },
  '.MuiCard-root': {
    margin: theme.spacing(0, 1)
  },
  '& > p, & > span': {
    fontSize: '1rem',
    wordWrap: 'break-word',
    fontWeight: 'normal'
  },
  '& > img, & > video ': {
    width: '100%',
    maxHeight: '600px',
    objectFit: 'contain',
    position: 'relative',
    backgroundColor: '#000e'
  }
}))

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)

  const renderContent = ({
    description,
    image,
    document,
    video,
    imagePreview,
    voteUrl,
    sharedName,
    sharedImage,
    sharedTimeElapse,
    type
  }) => {
    switch (type) {
      case 'video': {
        return (
          <>
            <FeedDescription description={description} />
            <Widget.Media
              type='video'
              poster={imagePreview}
              src={video}
              onClick={toggleModal}
              controls
            />
          </>
        )
      }
      case 'image': {
        return (
          <>
            <FeedDescription description={description} />
            <Widget.Media src={image} onClick={toggleModal} />
          </>
        )
      }
      case 'document': {
        return (
          <>
            <FeedDescription description={description} />
            <a href={document} target='_blank' rel='noreferrer'>
              <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
            </a>
          </>
        )
      }
      case 'fast-survey': {
        return (
          <SurveyForm
            voteUrl={voteUrl}
            active={Boolean(description.active)}
            question={description.question}
            time={description.time_remaining}
            resultType={description.result_type}
            answers={answers}
            votes={votes}
          />
        )
      }
      case 'shared': {
        return (
          <>
            <FeedDescription description={description} />
            <Widget styles={{ width: 'inherit' }}>
              <Widget.Header
                avatar={sharedImage}
                title={sharedName}
                subheader={sharedTimeElapse}
              />
              <FeedContainer>
                {renderContent({
                  type: sharedContentType,
                  description: sharedFeedDescription,
                  document: sharedFileDocument,
                  image: sharedFileImage,
                  video: sharedFileVideo,
                  imagePreview: sharedFileImagePreview
                })}
              </FeedContainer>
            </Widget>
          </>
        )
      }
      default:
        return <FeedDescription description={description} />
    }
  }

  return (
    <FeedContainer>
      {renderContent({
        description,
        image,
        document,
        video,
        imagePreview,
        voteUrl,
        type: sharedName ? 'shared' : contentType,
        sharedName,
        sharedImage,
        sharedTimeElapse
      })}
    </FeedContainer>
  )
}