import { Box, Card, Stack, Typography } from '@mui/material'
import moment from 'moment'
import { useQuery } from 'react-query'
import { getImage } from './services'
import { StyledBoxDetails, StyledCardData } from './styles'
import StyledTimeLine from './TimeLine'

function TicketDetails({ data, id }) {
  const { data: imageData } = useQuery(['imageData', id], () => getImage(id))
  return (
    <Box>
      {data ? (
        <Card
          sx={{
            marginTop: '20px',
          }}
        >
          <StyledBoxDetails>
            <Box>
              <Typography variant="h5">{data?.name}</Typography>
              <Typography variant="subtitle2" sx={{ marginTop: '5px' }}>
                {moment(data?.createdAt).format('DD MMMM, YYYY  hh:mm: a') ??
                  ' '}
              </Typography>
              <Typography
                sx={{ marginTop: '20px', maxWidth: '500px', fontSize: '14px' }}
              >
                {data?.description}
              </Typography>
              <Stack direction={'column'} gap="20px" sx={{ marginTop: '10px' }}>
                {imageData?.issueFiles?.map((item, index) => (
                  <img
                    src={item?.url}
                    height={'100px'}
                    width={'200px'}
                    key={index}
                  />
                ))}
              </Stack>
            </Box>
            <StyledCardData
              sx={{
                marginRight: '10px',
              }}
            >
              <Typography variant="h5" sx={{ fontSize: '10px' }}>
                {data.status.replace('_', ' ')}
              </Typography>
            </StyledCardData>
          </StyledBoxDetails>
        </Card>
      ) : (
        ''
      )}
      <Box sx={{ marginTop: '30px', marginBottom: '30px' }}>
        <Typography variant="h1" sx={{ marginBottom: '10px' }}>
          {data?.timelineLogs ? 'Ticket Timeline' : ''}
        </Typography>
        <StyledTimeLine data={data?.timelineLogs} />
      </Box>
    </Box>
  )
}

export default TicketDetails
