import { Box, Card, Typography } from '@mui/material'
import { EditButton } from '../../IconButtons'
import Image from '../../Image/Image'
import { DialogButton } from '../../ModalButtons'
import PublicationsForm from './PublicationsForm'
import { StyledAvatar, StyledTextContainer } from './Styles'

const PublicationCard = ({ userProfile, data }) => {
  return (
    <div>
      <Card
        sx={{
          padding: '15px',
        }}
      >
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
          }}
        >
          <Box
            sx={{
              display: 'flex',
            }}
          >
            {data?.image?.url ? (
              <Image
                alt=""
                radius={'10px'}
                src={data?.image?.url}
                width={'100px'}
                height={'100px'}
                fit={'cover'}
              />
            ) : (
              <StyledAvatar>
                <Typography
                  sx={{
                    fontSize: '30px',
                    color: 'blue',
                  }}
                >
                  {data?.title[0].toUpperCase()}
                </Typography>
              </StyledAvatar>
            )}
            <StyledTextContainer>
              <Typography variant="h5">{data?.title}</Typography>
              <Typography variant="subtitle2">
                {data?.publicationType}{' '}
                {data?.publicationSubtype !== 'other' &&
                  ` - ${data?.publicationSubtype}`}
              </Typography>
              <Typography variant="subtitle1">
                Year of Publication: {data?.publicationYear}
              </Typography>
            </StyledTextContainer>
          </Box>
          <Box>
            <DialogButton
              key={data?.id}
              title={'Edit Paper Publication'}
              anchor={({ open }) => <EditButton onClick={open} />}
              content={({ close }) => (
                <PublicationsForm
                  data={data}
                  hideDialog={close}
                  userProfile={userProfile}
                />
              )}
            />
          </Box>
        </Box>
      </Card>
    </div>
  )
}

export default PublicationCard
