import React from "react";
import CssFlex from "../../../ui/CssFlex";
import Typography from "../../../ui/Typography";
import makeStyles from "../../../ui/styles/makeStyles";
var getClasses = makeStyles(function () {
  return {
    squareImageContainer: {
      padding: 0,
      border: 0,
      lineHeight: 0,
      height: "fit-content",
      borderRadius: "6px",
      flexShrink: 0
    },
    landscapeImageContainer: {
      padding: 0,
      border: 0,
      lineHeight: 0,
      height: "fit-content",
      borderRadius: "6px",
      flexShrink: 0
    },
    squareImage: {
      aspectRatio: "1 / 1",
      maxHeight: "48px",
      boxSizing: "content-box",
      objectFit: "cover",
      borderRadius: "6px"
    },
    landscapeImage: {
      aspectRatio: "16 / 9",
      maxHeight: "48px",
      boxSizing: "content-box",
      objectFit: "cover",
      borderRadius: "6px"
    }
  };
});

var TabVisuals = function TabVisuals(props) {
  var _images$square_images, _images$landscape_ima;

  var images = props.images,
      translations = props.translations;
  var classes = getClasses();
  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    color: "neutral",
    shade: 800,
    dangerouslySetInnerHTML: {
      __html: translations.logos.replace("{logos}", images.square_logo_images.length + images.landscape_logo_images.length)
    }
  }), /*#__PURE__*/React.createElement(CssFlex, {
    gap: "sm"
  }, /*#__PURE__*/React.createElement("div", {
    key: "image-".concat(images.square_logo_images[0].id, "-square-logo"),
    className: classes.squareImageContainer
  }, /*#__PURE__*/React.createElement("img", {
    src: images.square_logo_images[0].url,
    alt: "square logo",
    className: classes.squareImage
  })), images.landscape_logo_images.length >= 1 && /*#__PURE__*/React.createElement("div", {
    key: "image-".concat(images.landscape_logo_images[0].id, "-landscape-logo"),
    className: classes.landscapeImageContainer
  }, /*#__PURE__*/React.createElement("img", {
    src: images.landscape_logo_images[0].url,
    alt: "landscape logo",
    className: classes.landscapeImage
  }))), /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    color: "neutral",
    shade: 800,
    dangerouslySetInnerHTML: {
      __html: translations.images.replace("{images}", images.square_images.length + images.landscape_images.length)
    }
  }), /*#__PURE__*/React.createElement(CssFlex, {
    gap: "xs"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    gap: "sm",
    wrap: "wrap",
    flexGrow: "1",
    maxWidth: "100%"
  }, (_images$square_images = images.square_images) === null || _images$square_images === void 0 ? void 0 : _images$square_images.map(function (image) {
    return /*#__PURE__*/React.createElement("div", {
      key: "image-".concat(image.id, "-square"),
      className: classes.squareImageContainer
    }, /*#__PURE__*/React.createElement("img", {
      src: image.url,
      alt: "square",
      className: classes.squareImage
    }));
  }), (_images$landscape_ima = images.landscape_images) === null || _images$landscape_ima === void 0 ? void 0 : _images$landscape_ima.map(function (image) {
    return /*#__PURE__*/React.createElement("div", {
      key: "image-".concat(image.id, "-landscape"),
      className: classes.landscapeImageContainer
    }, /*#__PURE__*/React.createElement("img", {
      src: image.url,
      alt: "landscape",
      className: classes.landscapeImage
    }));
  }))));
};

export default TabVisuals;