import React from 'react';
import { List, Button, message } from 'antd';
import { ImageLink } from './Links';
import { downloadImage } from '../utils';
import { LS_SHOW_DOWNLOAD_BUTTON } from '../constants';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const listGrid = {
  gutter: 16,
  xs: 1,
  sm: 2,
  md: 4,
  lg: 4,
  xl: 4,
  xxl: 3
};
const isShow = () => localStorage.getItem(LS_SHOW_DOWNLOAD_BUTTON) === 'true' ? {} : {
  display: 'none'
};
const renderItem = item => /*#__PURE__*/_jsx(List.Item, {
  children: /*#__PURE__*/_jsx(ImageLink, {
    url: item.url,
    imgSrc: item.imgSrc,
    description: item.description
  })
});
const PhotoList = ({
  photos
}) => {
  const [messageApi, contextHolder] = message.useMessage();
  const renderDup = () => {
    const photoMap = {};
    photos.forEach(photo => {
      if (photoMap[photo.url] === undefined) {
        photoMap[photo.url] = 0;
      } else {
        photoMap[photo.url] += 1;
      }
    });
    return Object.keys(photoMap).filter(key => photoMap[key] > 1).map(key => photoMap[key]).join(',');
  };

  // Download photos every 1s
  const downloadAll = photoUrls => {
    let index = 0;
    function download() {
      if (index < photoUrls.length) {
        downloadImage(photoUrls[index]);
        messageApi.info('Download ' + photoUrls[index]);
        index++;
      } else {
        clearInterval(intervalId);
      }
    }

    // Run download every 1s
    const intervalId = window.setInterval(download, 1000);
  };
  return /*#__PURE__*/_jsxs("div", {
    children: [contextHolder, renderDup(), /*#__PURE__*/_jsx("div", {
      style: isShow(),
      children: /*#__PURE__*/_jsx(Button, {
        onClick: () => {
          downloadAll(photos.map(p => p.url));
        },
        children: "Download All"
      })
    }), /*#__PURE__*/_jsx(List, {
      grid: listGrid,
      dataSource: photos,
      renderItem: renderItem
    })]
  });
};
export default PhotoList;
//# sourceMappingURL=PhotoList.js.map