import React from 'react';
import { Row, Column } from '@nimles/react-web-components';
import styled from '@emotion/styled';
import { ImageInformation } from './ImageInformation';
const Images = styled.div `
  margin-bottom: 10px;
`;
const ImageButton = styled.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.img `
  width: 100%;
`;
export const ImageGrid = ({ selected, onSelect, images }) => {
    return (<Images>
      <Row wrap>
        {images &&
            images.map((image) => {
                var _a;
                return (<Column padding xs={100} sm={50} md={33} lg={25}>
                <ImageButton isSelected={selected === image.id} onClick={(e) => {
                        e.preventDefault();
                        onSelect(image);
                    }}>
                  <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>
              </Column>);
            })}
      </Row>
    </Images>);
};
//# sourceMappingURL=ImageGrid.jsx.map