function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import { makeStyles } from '@material-ui/styles';
import { Card, CardMedia, IconButton } from '@material-ui/core';
import { mdiFile, mdiClose } from '@mdi/js';
import Icon from '@mdi/react';
import { defaultGreyDark, defaultGreyDisabled, defaultWhite } from '@tecsinapse/ui-kit/build/colors';
var useStyle = makeStyles({
  rootPreview: {
    backgroundColor: defaultGreyDisabled
  },
  flexContainer: {
    display: 'flex',
    flexDirection: 'row',
    overflow: 'auto',
    whiteSpace: 'nowrap'
  },
  thumbnail: {
    // border: '2px dashed green',
    width: '65px',
    height: '65px',
    display: 'flex',
    justifyContent: 'center',
    marginRight: '0px',
    position: 'relative'
  },
  iconButtonClose: {
    position: 'absolute',
    top: '0',
    right: '0',
    backgroundColor: 'rgba(117, 117, 117, 0.65)',
    padding: '3px',
    margin: '2px 1px',
    transition: 'opacity 0.25s',
    '&:hover': {
      backgroundColor: 'rgba(117, 117, 117, 0.85)'
    }
  },
  card: {
    margin: '5px 10px'
  }
});

var getMediaComponent = function getMediaComponent(mediaType, name, data) {
  var component = 'div';

  if (mediaType.startsWith('image')) {
    component = 'img';
  } else if (mediaType.startsWith('video')) {
    component = 'video';
  } else {
    return React.createElement("div", {
      style: {
        width: '65px',
        height: '65px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }
    }, React.createElement(Icon, {
      path: mdiFile,
      size: 2,
      color: defaultGreyDark
    }));
  }

  return React.createElement(CardMedia, {
    component: component,
    alt: name,
    title: name,
    src: data
  });
};

export function PreviewList(_ref) {
  var files = _ref.files,
      setFiles = _ref.setFiles;
  var classes = useStyle();

  var removeAttachment = function removeAttachment(uid) {
    return setFiles(function (filesCurrent) {
      var filesCopy = _objectSpread({}, filesCurrent);

      delete filesCopy[uid];
      return filesCopy;
    });
  };

  return React.createElement("div", {
    className: classes.rootPreview
  }, React.createElement("div", {
    className: classes.flexContainer
  }, Object.keys(files).map(function (uid) {
    return React.createElement(Card, {
      key: uid,
      classes: {
        root: classes.card
      }
    }, React.createElement("div", {
      className: classes.thumbnail
    }, getMediaComponent(files[uid].mediaType, files[uid].name, files[uid].data), React.createElement(IconButton, {
      key: "remove",
      onClick: function onClick() {
        return removeAttachment(uid);
      },
      className: classes.iconButtonClose
    }, React.createElement(Icon, {
      path: mdiClose,
      size: 0.5,
      color: defaultWhite
    }))));
  })));
}