import * as React from 'react';
import Link from 'next/link';
import Chip from '@mui/material/Chip';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';
import AttachmentRoundedIcon from '@mui/icons-material/AttachmentRounded';

import { AttachmentItem } from 'src/types/zendesk';

export interface RequestAttachmentChipProps {
  handleDelete: (attachment: number) => void;
  label: string;
}

export default function RequestAttachmentChip(
  props: RequestAttachmentChipProps
) {
  const { handleDelete, label } = props;

  return (
    <Chip
      icon={<AttachmentRoundedIcon />}
      label={label}
      onDelete={handleDelete}
      sx={{
        '&:hover': {
          cursor: 'pointer',
        },
      }}
    />
  );
}

export interface RequestAttachmentChipListProps {
  title?: string;
  items: AttachmentItem[];
}

export function RequestAttachmentChipList(
  props: RequestAttachmentChipListProps
) {
  const { title, items } = props;

  // const handleClick = (attachment: AttachmentItem) => {};

  return (
    <Box
      sx={{
        padding: '1rem 0',
      }}
    >
      {title && (
        <Typography variant="body2" component="span" fontWeight="bold">
          {title}
        </Typography>
      )}
      <Box
        sx={{
          paddingTop: '0.5rem',

          display: 'flex',
          flexWrap: 'wrap',
          columnGap: '1rem',
          rowGap: '0.5rem',

          '& a:hover': {
            textDecoration: 'none !important', // override .markdown-body class styles
          },
        }}
      >
        {items.map((i) => (
          <Link key={i.id} href={i.content_url} target="_blank">
            <Chip
              icon={<AttachmentRoundedIcon />}
              label={i.file_name}
              sx={{
                '&:hover': {
                  cursor: 'pointer',
                },
              }}
            />
          </Link>
        ))}
      </Box>
    </Box>
  );
}