import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import ButtonBase from '@mui/material/ButtonBase';
import ListItemText from '@mui/material/ListItemText';
import Rating from '@mui/material/Rating';
import Typography from '@mui/material/Typography';
import { Iconify } from 'src/components/iconify';
import type { IProductReview } from 'src/types/party-event';
import { fDate } from 'src/utils/format-time';

// ----------------------------------------------------------------------

type Props = {
  review: IProductReview;
};

export function ProductReviewItem({ review }: Props) {
  const renderInfo = () => (
    <Box
      sx={{
        gap: 2,
        display: 'flex',
        width: { md: 240 },
        alignItems: 'center',
        textAlign: { md: 'center' },
        flexDirection: { xs: 'row', md: 'column' },
      }}
    >
      <Avatar
        src={review.avatarUrl}
        sx={{ width: { xs: 48, md: 64 }, height: { xs: 48, md: 64 } }}
      />

      <ListItemText
        primary={review.name}
        secondary={fDate(review.postedAt)}
        slotProps={{
          primary: { noWrap: true },
          secondary: {
            noWrap: true,
            sx: { mt: 0.5, typography: 'caption' },
          },
        }}
      />
    </Box>
  );

  const renderContent = () => (
    <Box
      sx={{
        gap: 1,
        display: 'flex',
        flex: '1 1 auto',
        flexDirection: 'column',
      }}
    >
      <Rating size="small" value={review.rating} precision={0.1} readOnly />

      {review.isPurchased && (
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            color: 'success.main',
            typography: 'caption',
          }}
        >
          <Iconify icon="solar:verified-check-bold" width={16} sx={{ mr: 0.5 }} />
          Verified purchase
        </Box>
      )}

      <Typography variant="body2">{review.comment}</Typography>

      {!!review.attachments?.length && (
        <Box
          sx={{
            pt: 1,
            gap: 1,
            display: 'flex',
            flexWrap: 'wrap',
          }}
        >
          {review.attachments.map((attachment) => (
            <Box
              key={attachment}
              component="img"
              alt={attachment}
              src={attachment}
              sx={{ width: 64, height: 64, borderRadius: 1.5 }}
            />
          ))}
        </Box>
      )}

      <Box sx={{ gap: 2, pt: 1.5, display: 'flex' }}>
        <ButtonBase disableRipple sx={{ gap: 0.5, typography: 'caption' }}>
          <Iconify icon="solar:like-outline" width={16} />
          123
        </ButtonBase>

        <ButtonBase disableRipple sx={{ gap: 0.5, typography: 'caption' }}>
          <Iconify icon="solar:dislike-outline" width={16} />
          34
        </ButtonBase>
      </Box>
    </Box>
  );

  return (
    <Box
      sx={{
        mt: 5,
        gap: 2,
        display: 'flex',
        px: { xs: 2.5, md: 0 },
        flexDirection: { xs: 'column', md: 'row' },
      }}
    >
      {renderInfo()}
      {renderContent()}
    </Box>
  );
}