import { ReactNode } from "react";

import { Button } from "../../index";
import "./GalleryPhoto.css";
import { getCN, declCount, renderProps, usePadding } from "../utils";

function GalleryPhoto({
  children,
  src,
  onOpen,
  ripple,
  disabled,
  heights = [150, 150, 200],
  ...props
}: {
  [x: string]: any;
}) {
  if (!Array.isArray(src)) src = [src];

  return (
    <div {...renderProps(props)} className={getCN(["MYUI-GalleryPhoto"])}>
      {src.map(
        (a: any, index: Number) =>
          index <= 2 && (
            <div
              key={Number(index)}
              className={getCN([
                "MYUI-GalleryPhoto__in",
                `MYUI-GalleryPhoto__in--count${src.length > 3 ? 3 : src.length
                }`,
              ])}
            >
              <span
                id="GalleryPhoto"
                style={{
                  background: `url(${a})`,
                  height: heights[Number(index)],
                }}
              >
                {src.length > 3 && onOpen && index == 2 && (
                  <Button
                    disabled={disabled}
                    onClick={onOpen}
                    border="primary"
                    appearance="neutral"
                    className="MYUI-GalleryPhoto__description"
                  >
                    и еще {src.length - 3}{" "}
                    {declCount(src.length - 3, [
                      `изображение`,
                      `изображения`,
                      `изображений`,
                    ])}
                  </Button>
                )}
              </span>
            </div>
          )
      )}
    </div>
  );
}

export default GalleryPhoto;