Proyectos de Subversion LeadersLinked - SPA

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

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

import Widget from '@app/components/UI/Widget';
import Input from '@components/UI/inputs/Input';

const Option = styled(Button)(({ theme }) => ({
  borderRadius: '50%',
  cursor: 'pointer',
  padding: 5,
  minWidth: 'auto',
  span: {
    display: 'none'
  },
  '&:hover': {
    backgroundColor: 'whitesmoke'
  },
  [theme.breakpoints.up('md')]: {
    alignItems: 'center',
    borderRadius: theme.shape.borderRadius,
    display: 'inline-flex',
    gap: 1,
    flex: 1,
    span: {
      display: 'initial'
    }
  }
}));

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

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

  return (
    <Widget>
      <Widget.Body>
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            marginBottom: 0.5,
            gap: 0.5
          }}
        >
          <Avatar
            src={image}
            sx={{
              width: { xs: 40, sm: 50 },
              height: { xs: 40, sm: 50 }
            }}
          />

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

        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            gap: 0.5
          }}
        >
          <Option onClick={() => onClickHandler(shareModalTypes.IMAGE)}>
            <Image sx={{ color: '#7405f9 !important' }} />
            <Typography variant='overline'>{labels.image}</Typography>
          </Option>

          <Option onClick={() => onClickHandler(shareModalTypes.VIDEO)}>
            <Subscriptions sx={{ color: '#E7A33E !important' }} />
            <Typography variant='overline'>{labels.video}</Typography>
          </Option>

          <Option onClick={() => onClickHandler(shareModalTypes.FILE)}>
            <Article sx={{ color: '#C0C8CD !important' }} />
            <Typography variant='overline'>{labels.document}</Typography>
          </Option>

          <Option onClick={() => onClickHandler(shareModalTypes.POST)}>
            <PostAdd sx={{ color: '#7FC15E !important' }} />
            <Typography variant='overline'>{labels.write}</Typography>
          </Option>
        </Box>
      </Widget.Body>
    </Widget>
  );
};

export default ShareComponent;