/* eslint-disable react/jsx-key */
import moment from 'moment'
import { Typography } from '@mui/material'
import {
  TimelineSeparator,
  TimelineConnector,
  TimelineDot,
  TimelineContent,
} from '@mui/lab'
import { StyledTimelineBox, StyledTimeLineItem } from './styles'

interface TimelineComponentProps {
  data: any
}

function StyledTimeLine({ data }: TimelineComponentProps) {
  return data?.map((item, index) => (
    <StyledTimeLineItem key={index}>
      <TimelineSeparator>
        <TimelineDot
          variant="outlined"
          sx={{ width: '20px', height: '20px' }}
        />
        {!(index === data.length - 1) ? <TimelineConnector /> : ''}
      </TimelineSeparator>
      <TimelineContent>
        <Typography variant="h6">{item?.message}</Typography>
        <Typography sx={{ marginTop: '10px' }}>
          {moment(item?.createdAt).format(' h:mmA Do MMMM YYYY,  ')}
        </Typography>
        <RenderContent timeLog={item} />
      </TimelineContent>
    </StyledTimeLineItem>
  ))
}
export default StyledTimeLine

const RenderContent = ({ timeLog }) => {
  if (timeLog?.files) {
    return (
      <StyledTimelineBox>
        <Typography sx={{ marginBottom: '3px' }}>{timeLog?.notes}</Typography>
        {/* {timeLog?.files?.map((item) => (
          <img src={item?.url} height={'100px'} width={'200px'} />
        ))} */}
      </StyledTimelineBox>
    )
  }

  if (timeLog?.notes) {
    return (
      <StyledTimelineBox
        sx={{
          maxWidth: '400px',
        }}
      >
        <Typography sx={{ wordWrap: 'break-word' }}>
          {timeLog?.notes}
        </Typography>
      </StyledTimelineBox>
    )
  }
  return <></>
}
