import { Delete } from '@mui/icons-material'
import { Box, IconButton, styled, Typography, Stack } from '@mui/material'
import Image from '../Image'

interface MediaRowProps {
  list: any[]
  onDelete?: (mediaKey: string) => void
}

export default function MediaRow({ list, onDelete }: MediaRowProps) {
  return (
    <Box sx={{ display: 'flex', gap: '1rem', width: '100%', flexWrap: 'wrap' }}>
      {list.map((item, index) => (
        <>{renderMediaCard(item, onDelete)}</>
      ))}
    </Box>
  )
}

const renderMediaCard = (item: any, onDelete?: (mediaKey: string) => void) => {
  switch (item?.type) {
    case 'image':
      return (
        <StyledImageContainer>
          <IconButton
            size="small"
            color="error"
            onClick={() => {
              onDelete(item?.key)
            }}
          >
            <Delete fontSize="small" />
          </IconButton>
          <Image src={item?.url} height={120} width={150} alt={''} />
        </StyledImageContainer>
      )
    case 'file':
      return (
        <Stack
          direction={'row'}
          alignItems="center"
          justifyContent={'space-between'}
          gap={'10px'}
        >
          <Typography>{item?.fileName}</Typography>
          <IconButton color="error">
            <Delete fontSize="small" />
          </IconButton>
        </Stack>
      )

    default:
      break
  }
}

const StyledImageContainer = styled(Box)(({ theme }) => ({
  border: theme.borders.grayLight,
  borderRadius: '10px',
  padding: '0.7rem',
  position: 'relative',
  '& > button': {
    position: 'absolute',
    right: 0,
    top: 0,
  },
}))
