Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Avatar, Box } from '@mui/material'
import {
  Image,
  Create,
  Article,
  PostAdd,
  Subscriptions
} from '@mui/icons-material'
import styled from 'styled-components'

import { openShareModal } from '../../../../redux/share-modal/shareModal.actions'
import { shareModalTypes } from '../../../../redux/share-modal/shareModal.types'

import Input from 'components/UI/Input'
import WidgetWrapper from 'components/widgets/WidgetLayout'
import ShareOption from './ShareOption'

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 (
    <WidgetWrapper p={1}>
      <Box display='flex' alignItems='center' gap={1} mb={1}>
        <Avatar
          src={image}
          sx={{
            width: { xs: 40, sm: 50 },
            height: { xs: 40, sm: 50 }
          }}
        />

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

      <Box display='flex' gap={1}>
        <ShareOption
          icon={Image}
          title={labels.image}
          color='#7405f9'
          onClick={() => onClickHandler(shareModalTypes.IMAGE)}
        />
        <ShareOption
          icon={Subscriptions}
          title={labels.video}
          color='#E7A33E'
          onClick={() => onClickHandler(shareModalTypes.VIDEO)}
        />
        <ShareOption
          icon={Article}
          title={labels.document}
          color='#C0C8CD'
          onClick={() => onClickHandler(shareModalTypes.FILE)}
        />
        <ShareOption
          icon={PostAdd}
          title={labels.write}
          color='#7FC15E'
          onClick={() => onClickHandler(shareModalTypes.POST)}
        />
      </Box>
    </WidgetWrapper>
  )
}

export default ShareComponent