"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageGrid = void 0;
const react_1 = __importDefault(require("react"));
const react_web_components_1 = require("@nimles/react-web-components");
const styled_1 = __importDefault(require("@emotion/styled"));
const ImageInformation_1 = require("./ImageInformation");
const Images = styled_1.default.div `
  margin-bottom: 10px;
`;
const ImageButton = styled_1.default.button `
  position: relative;
  border: 1px solid lightgrey;
  border-radius: 2px;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: ${({ isSelected }) => isSelected ? '2px solid green' : '1px solid lightgrey'};
  background-color: ${({ isSelected }) => isSelected ? 'lightgreen' : '#efefef'};

  &::hover > div {
    display: block;
  }
`;
const Image = styled_1.default.img `
  width: 100%;
`;
const ImageGrid = ({ selected, onSelect, images }) => {
    return (<Images>
      <react_web_components_1.Row wrap>
        {images &&
            images.map((image) => {
                var _a;
                return (<react_web_components_1.Column padding xs={100} sm={50} md={33} lg={25}>
                <ImageButton isSelected={selected === image.id} onClick={(e) => {
                        e.preventDefault();
                        onSelect(image);
                    }}>
                  <ImageInformation_1.ImageInformation image={image}/>
                  <Image src={(_a = image.thumbnailUri) !== null && _a !== void 0 ? _a : `https://media.nimles.com/file/${image.tenantId}/${image.id}?width=480`}/>
                </ImageButton>
              </react_web_components_1.Column>);
            })}
      </react_web_components_1.Row>
    </Images>);
};
exports.ImageGrid = ImageGrid;
//# sourceMappingURL=ImageGrid.jsx.map