import { Fragment } from 'react';
import styled from '@emotion/styled';
import PropTypes from 'prop-types';
import Skeleton from '@mui/material/Skeleton';
import Divider from '@mui/material/Divider';
import isEmpty from 'lodash/isEmpty';
import { Card, Box } from '@mui/material';
import colors from '@arcblock/ux/lib/Colors/themes/temp';
import useMediaQuery from '@mui/material/useMediaQuery';
import AttachmentPreviewPage from './attachment';
import DataPreviewPage from './data';
import { getSeverityColor, isAllText, combinedItem, isAllImage, isSameTypes } from './utils';
import CombinedPreviewPage from './attachment/combined';

/**
 * notification preview page, preview 内容有 attachments 和 data 两种情况
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function NotificationPreview({
  notification,
  severity,
  showSke = true
}) {
  const {
    attachments,
    data,
    ...rest
  } = notification;
  const isMd = useMediaQuery(theme => theme.breakpoints.down('md'));
  if ((!attachments || !attachments.length) && isEmpty(data)) {
    return null;
  }
  const severityColor = getSeverityColor(severity);
  const renderAttachment = (items, inSection = false) => {
    if (!items && !Array.isArray(items)) {
      return null;
    }
    let renderItems = items;
    let style = {};
    let orientation = 'horizontal';
    if (inSection && isAllText(items)) {
      renderItems = combinedItem(items);
      orientation = 'vertical';
      style = {
        display: 'flex',
        gap: 8,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        flexWrap: 'wrap',
        height: '100%',
        width: isMd || renderItems.length === 1 ? '100%' : '28%'
      };
    }
    const showDivider = isSameTypes(renderItems);
    return /*#__PURE__*/_jsx(Box, {
      sx: {
        width: '100%',
        display: 'flex',
        gap: 1,
        flexDirection: inSection ? 'row' : 'column',
        justifyContent: 'flex-start',
        alignItems: inSection ? 'center' : 'unset',
        flexWrap: 'wrap'
      },
      children: renderItems.map((attachment, index) => {
        if (attachment.type === 'section') {
          // eslint-disable-next-line react/no-array-index-key
          return /*#__PURE__*/_jsx(CombinedPreviewPage, {
            data: attachment.fields
          }, index);
        }
        return (
          /*#__PURE__*/
          // eslint-disable-next-line react/no-array-index-key
          _jsxs(Fragment, {
            children: [/*#__PURE__*/_jsx(AttachmentPreviewPage, {
              attachment: attachment,
              style: style,
              ...rest
            }), !(isMd && orientation === 'vertical') && showDivider && renderItems.length > 1 && index !== renderItems.length - 1 ? /*#__PURE__*/_jsx(Divider, {
              orientation: orientation,
              style: {
                color: colors.dividerColor
              },
              sx: orientation === 'vertical' ? {
                ml: 2,
                mr: 2,
                height: 32
              } : {}
            }) : null]
          }, index)
        );
      })
    });
  };
  const isAllImages = isAllImage(attachments);
  return /*#__PURE__*/_jsx(Container, {
    children: /*#__PURE__*/_jsxs("div", {
      className: "message-in-list",
      children: [attachments.length > 0 && /*#__PURE__*/_jsx("div", {
        className: "message-container",
        style: isMd ? {
          width: '100%'
        } : {},
        children: isAllImages ? renderAttachment(attachments) : /*#__PURE__*/_jsx(Card, {
          variant: "outlined",
          className: "attachment-card",
          sx: {
            px: isMd ? 1 : 2,
            py: 1.5,
            borderRadius: '8px',
            minWidth: 128,
            borderColor: severityColor
          },
          children: renderAttachment(attachments)
        })
      }), !isEmpty(data) && /*#__PURE__*/_jsx("div", {
        className: "message-container",
        children: /*#__PURE__*/_jsx("div", {
          className: "data-container",
          children: /*#__PURE__*/_jsx(DataPreviewPage, {
            data: data,
            feedType: notification.feedType
          })
        })
      }), attachments.length === 0 && isEmpty(data) && showSke && /*#__PURE__*/_jsx(Skeleton, {
        className: "attach-ske",
        style: {
          marginTop: 10
        },
        variant: "rectangular",
        height: 150
      })]
    })
  });
}
const Container = styled.div`
  display: flex;
  flex-direction: column;
  .message-in-list {
    padding: ${({
  theme
}) => `${theme.spacing(1.5)} ${theme.spacing(1.5)} ${theme.spacing(1.5)} 0`};
    display: flex;
    border-radius: 8px;
  }
  .message-title {
    color: #25292f;
    font-size: 18px;
    font-weight: bold;
    word-break: break-all;
  }

  .attach-ske {
    position: relative;
    margin-left: 10px;
    &::after {
      content: '';
      position: absolute;
      left: -10px;
      top: 0;
      height: 100%;
      width: 4px;
      background-color: ${props => props.leftLineColor};
    }
  }

  .message-body {
    color: #25292f;
    font-size: 16px;
    word-break: break-all;
    white-space: pre-line;
  }
  .message-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .data-container,
    .attachment-container {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
  }
  .actions-container {
    margin-top: 10px;
    .actions-item {
      margin-right: 8px;
    }
  }
`;
NotificationPreview.propTypes = {
  severity: PropTypes.string.isRequired,
  notification: PropTypes.object.isRequired,
  showSke: PropTypes.bool
};
export default NotificationPreview;