import { Box, Card, Typography } from '@mui/material'
import moment from 'moment'
import { EditButton } from '../../IconButtons'
import Image from '../../Image/Image'
import { DialogButton } from '../../ModalButtons'

import {
  StyledAvatar,
  StyledBox,
  StyledTextContainer,
} from '../Workshop/Styles'
import ResearchProjectForm from './ResearchProjectForm'

const ResearchProjectCard = ({ data }) => {
  return (
    <div>
      <Card
        sx={{
          padding: '15px',
        }}
      >
        <StyledBox>
          <Box
            sx={{
              display: 'flex',
            }}
          >
            {data?.coverImage?.url ? (
              <Image
                alt=""
                radius={'10px'}
                src={data?.coverImage?.url}
                width={'100px'}
                height={'100px'}
                fit={'cover'}
              />
            ) : (
              <StyledAvatar>
                <Typography sx={{ color: 'blue', fontSize: '30px' }}>
                  {data?.programName.toUpperCase()}
                </Typography>
              </StyledAvatar>
            )}
            <StyledTextContainer>
              <Typography variant="h5">{data?.programName}</Typography>
              <Typography variant="subtitle2">{data?.description}</Typography>
              <Typography variant="subtitle2">
                {moment(data?.startDate).format('DD MMM YYYY')} -{' '}
                {moment(data?.endDate).format('DD MMM YYYY')}
              </Typography>
            </StyledTextContainer>
          </Box>
          <Box>
            <DialogButton
              key={data?.id}
              title={'Edit ResearchProject'}
              anchor={({ open }) => <EditButton onClick={open} />}
              content={({ close }) => (
                <ResearchProjectForm data={data} close={close} />
              )}
            />
          </Box>
        </StyledBox>
      </Card>
    </div>
  )
}

export default ResearchProjectCard
