"use strict";

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _styles = require("@mui/material/styles");

var _PreviewImage = _interopRequireDefault(require("./PreviewImage"));

var _material = require("@mui/material");

var _classnames = _interopRequireDefault(require("classnames"));

var _Icon = _interopRequireDefault(require("@mui/material/Icon"));

var _CentralProgress = _interopRequireDefault(require("../../CentralProgress"));

var _reactLazyload = _interopRequireDefault(require("react-lazyload"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const PREFIX = 'SCPreviewMediaImage';
const classes = {
  background: `${PREFIX}-background`,
  heightOne: `${PREFIX}-heightOne`,
  heightHalfOne: `${PREFIX}-heightHalfOne`,
  heightTwo: `${PREFIX}-heightTwo`,
  heightThree: `${PREFIX}-heightThree`,
  cover: `${PREFIX}-cover`,
  coverText: `${PREFIX}-coverText`,
  slide: `${PREFIX}-slide`,
  border: `${PREFIX}-border`,
  gallery: `${PREFIX}-gallery`,
  title: `${PREFIX}-title`,
  iconFile: `${PREFIX}-iconFile`
};
const Root = (0, _styles.styled)(_material.Box, {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root
})(({
  theme
}) => ({
  textAlign: 'center',
  margin: 'auto',
  width: '100%',
  position: 'relative',
  [`& .${classes.background}`]: {
    backgroundSize: 'cover !important',
    backgroundPosition: 'center !important',
    backgroundRepeat: 'no-repeat !important',
    backgroundImage: 'url(/static/frontend_v2/images/image.svg)'
  },
  [`& .${classes.heightOne}`]: {
    width: '100%',
    paddingTop: '100%'
  },
  [`& .${classes.heightHalfOne}`]: {
    paddingTop: '50%'
  },
  [`& .${classes.heightTwo}`]: {
    width: '50%',
    paddingTop: '50%'
  },
  [`& .${classes.heightThree}`]: {
    width: '33.3333%',
    paddingTop: '33.3333%'
  },
  [`& .${classes.cover}`]: {
    backgroundColor: 'rgba(102,102,102,0.2)',
    opacity: 0.8,
    position: 'absolute',
    right: 0,
    top: 0,
    left: 0,
    bottom: 0,
    borderRadius: 6
  },
  [`& .${classes.coverText}`]: {
    right: 0,
    left: 0,
    bottom: 0,
    color: '#FFF',
    fontSize: '7%',
    position: 'absolute',
    top: '50%',
    transform: 'translate(0%, -50%)',
    textAlign: 'center',
    '& > p': {
      margin: 0,
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)'
    }
  },
  [`& .${classes.slide}`]: {
    height: 0,
    bottom: '100%',
    transition: '.5s ease',
    overflow: 'hidden',
    fontSize: '3%',
    color: '#FFF'
  },
  [`& .${classes.border}`]: {
    position: 'relative',
    border: '2px solid white',
    borderRadius: 6,
    '&:hover > div': {
      bottom: 0,
      height: 'auto'
    },
    '&:hover > div.animate-text': {
      top: '62%'
    }
  },
  [`& .${classes.gallery}`]: {
    cursor: 'pointer'
  },
  [`& .${classes.title} .MuiTypography-root`]: {
    color: '#FFF',
    backgroundColor: theme.palette.getContrastText('#FFF')
  },
  [`& .${classes.iconFile}`]: {
    fontSize: 14,
    position: 'relative',
    top: 2
  }
}));

var _default = props => {
  // PROPS
  const {
    medias = [],
    gallery = true,
    adornment = null,
    onClick = null
  } = props; // STATE

  const [preview, setPreview] = (0, _react.useState)(-1);
  const [from, setFrom] = (0, _react.useState)(0); // HANDLERS

  const handleClose = () => {
    setPreview(-1);
  }; // UTILS


  const getImageUrl = image => {
    if (typeof image === 'object') {
      return image.image ? image.image : '/static/frontend_v2/images/image.svg';
    }

    return image;
  };

  const openPreviewImage = index => {
    if (onClick) {
      return onClick({
        src: medias[index],
        index
      });
    }

    if (gallery === false) {
      // Prevent gallery
      return;
    }

    setPreview(index);
  }; // RENDERING


  const renderTitle = o => {
    if (!o) {
      return null;
    }

    let startAdornment = null;

    if (o.type) {
      switch (o.type) {
        case 'doc':
          startAdornment = /*#__PURE__*/_react.default.createElement(_Icon.default, {
            className: classes.iconFile
          }, "picture_as_pdf");
          break;

        default:
          startAdornment = /*#__PURE__*/_react.default.createElement(_Icon.default, {
            className: classes.iconFile
          }, "insert_drive_file");
          break;
      }
    }

    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, o.title && /*#__PURE__*/_react.default.createElement("div", {
      className: classes.title
    }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
      variant: "subtitle2"
    }, startAdornment, " ", o.title)));
  };

  const renderOne = () => {
    const overlay = medias.length > from && from == 1 ? renderCountOverlay(true) : renderOverlay(0);
    return /*#__PURE__*/_react.default.createElement(_material.Grid, {
      container: true
    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
      item: true,
      xs: 12,
      classes: {
        root: (0, _classnames.default)(classes.border, classes.heightOne, classes.background, {
          [classes.gallery]: gallery,
          [classes.heightHalfOne]: medias.length > 1
        })
      },
      onClick: () => openPreviewImage(0),
      style: {
        background: `url(${getImageUrl(medias[0])})`
      }
    }, overlay, renderTitle(medias[0])));
  };

  const renderTwo = () => {
    const overlay = medias.length > from && [2, 3].includes(+from) ? renderCountOverlay(true) : renderOverlay(1);
    const conditionalRender = [3, 4].includes(medias.length) || medias.length > +from && [3, 4].includes(+from);
    return /*#__PURE__*/_react.default.createElement(_material.Grid, {
      container: true
    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
      item: true,
      xs: 6,
      classes: {
        root: (0, _classnames.default)(classes.border, classes.heightTwo, classes.background, {
          [classes.gallery]: gallery
        })
      },
      onClick: () => openPreviewImage(conditionalRender ? 1 : 0),
      style: {
        background: `url(${getImageUrl(conditionalRender ? medias[1] : medias[0])})`
      }
    }, renderOverlay(conditionalRender ? 1 : 0), renderTitle(medias[0])), /*#__PURE__*/_react.default.createElement(_material.Grid, {
      item: true,
      xs: 6,
      classes: {
        root: (0, _classnames.default)(classes.border, classes.heightTwo, classes.background, {
          [classes.gallery]: gallery
        })
      },
      onClick: () => openPreviewImage(conditionalRender ? 1 : 0),
      style: {
        background: `url(${getImageUrl(conditionalRender ? medias[2] : medias[1])})`
      }
    }, overlay, renderTitle(medias[1])));
  };

  const renderThree = () => {
    const conditionalRender = medias.length == 4 || medias.length > +from && +from == 4;
    const overlay = !from || from > 5 || medias.length > from && [4, 5].includes(+from) ? renderCountOverlay(true) : renderOverlay(conditionalRender ? 3 : 4);
    return /*#__PURE__*/_react.default.createElement(_material.Grid, {
      container: true
    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
      item: true,
      xs: 6,
      md: 4,
      classes: {
        root: (0, _classnames.default)(classes.border, classes.heightThree, classes.background, {
          [classes.gallery]: gallery
        })
      },
      onClick: () => openPreviewImage(conditionalRender ? 1 : 2),
      style: {
        background: `url(${getImageUrl(conditionalRender ? medias[1] : medias[2])})`
      }
    }, renderOverlay(conditionalRender ? 1 : 2), renderTitle(medias[1])), /*#__PURE__*/_react.default.createElement(_material.Grid, {
      item: true,
      xs: 6,
      md: 4,
      classes: {
        root: (0, _classnames.default)(classes.border, classes.heightThree, classes.background, {
          [classes.gallery]: gallery
        })
      },
      onClick: () => openPreviewImage(conditionalRender ? 2 : 3),
      style: {
        background: `url(${getImageUrl(conditionalRender ? medias[2] : medias[3])})`
      }
    }, renderOverlay(conditionalRender ? 2 : 3), renderTitle(medias[2])), /*#__PURE__*/_react.default.createElement(_material.Grid, {
      item: true,
      xs: 6,
      md: 4,
      classes: {
        root: (0, _classnames.default)(classes.border, classes.heightThree, classes.background, {
          [classes.gallery]: gallery
        })
      },
      onClick: () => openPreviewImage(conditionalRender ? 3 : 4),
      style: {
        background: `url(${getImageUrl(conditionalRender ? medias[3] : medias[4])})`
      }
    }, overlay, renderTitle(medias[3])));
  };

  const renderOverlay = id => {
    if (!gallery) {
      return null;
    }

    return [/*#__PURE__*/_react.default.createElement("div", {
      key: `cover-${id}`,
      className: (0, _classnames.default)(classes.cover, classes.slide)
    }), /*#__PURE__*/_react.default.createElement("div", {
      key: `cover-text-${id}`,
      className: (0, _classnames.default)(classes.coverText, classes.slide, 'animate-text'),
      style: {
        fontSize: '100%'
      }
    }, /*#__PURE__*/_react.default.createElement(_Icon.default, null, "zoom_out_map"))];
  };

  const renderCountOverlay = more => {
    const extra = medias.length - (from && from > 5 ? 5 : from);
    return [more && /*#__PURE__*/_react.default.createElement("div", {
      key: "count",
      className: classes.cover
    }), more && /*#__PURE__*/_react.default.createElement("div", {
      key: "count-sub",
      className: classes.coverText,
      style: {
        fontSize: '200%'
      }
    }, /*#__PURE__*/_react.default.createElement("p", null, "+", extra))];
  };

  const imagesToShow = [...medias];

  if (from && medias.length > from) {
    imagesToShow.length = from;
  }

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, medias.length > 0 && /*#__PURE__*/_react.default.createElement(_reactLazyload.default, {
    height: 360,
    placeholder: /*#__PURE__*/_react.default.createElement(_CentralProgress.default, {
      size: 20
    }),
    once: true
  }, /*#__PURE__*/_react.default.createElement(Root, null, adornment, [1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && /*#__PURE__*/_react.default.createElement(_PreviewImage.default, {
    onClose: handleClose,
    index: preview,
    images: medias
  }))));
};

exports.default = _default;