Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { openShareModal } from '../../../../redux/share-modal/shareModal.actions'
import { shareModalTypes } from '../../../../redux/share-modal/shareModal.types'
import { useDispatch, useSelector } from 'react-redux'
import styled from 'styled-components'

import Avatar from '@mui/material/Avatar'
import ImageIcon from '@mui/icons-material/Image'
import CreateIcon from '@mui/icons-material/Create'
import ArticleIcon from '@mui/icons-material/Article'
import PostAddIcon from '@mui/icons-material/PostAdd'
import SubscriptionsIcon from '@mui/icons-material/Subscriptions'

import Input from '../../../UI/Input'
import ShareOption from './ShareOption'

import styles from './ShareComponent.module.scss'

const StyledInput = styled(Input)`
  border: 1px solid lightgray;
  background-color: #fff;
  border-radius: 30px;
  padding: 5px;
  padding-left: 1rem;
  flex: 1;
  cursor: pointer;

  &:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }
`

const ShareComponent = ({ feedType, postUrl = '', image = '' }) => {
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

  const onClickHandler = (postType) => {
    dispatch(openShareModal(postUrl, postType, feedType))
  }

  return (
    <div className={styles.share__container}>
      <div className={styles.input__container}>
        <Avatar src={image} className={styles.user_image} />

        <StyledInput
          type='text'
          readOnly
          icon={CreateIcon}
          placeholder={labels.what_are_you_thinking}
          onClick={() => onClickHandler(shareModalTypes.POST)}
        />
      </div>

      <div className={styles.share__options}>
        <ShareOption
          icon={ImageIcon}
          title={labels.image}
          color='#7405f9'
          onClick={() => onClickHandler(shareModalTypes.IMAGE)}
        />
        <ShareOption
          icon={SubscriptionsIcon}
          title={labels.video}
          color='#E7A33E'
          onClick={() => onClickHandler(shareModalTypes.VIDEO)}
        />
        <ShareOption
          icon={ArticleIcon}
          title={labels.document}
          color='#C0C8CD'
          onClick={() => onClickHandler(shareModalTypes.FILE)}
        />
        <ShareOption
          icon={PostAddIcon}
          title={labels.write}
          color='#7FC15E'
          onClick={() => onClickHandler(shareModalTypes.POST)}
        />
      </div>
    </div>
  )
}

export default ShareComponent