anyone-oslo/pages

import React, { useRef, useState } from "react";
import PropTypes from "prop-types";
import FileUploadButton from "./FileUploadButton";
import DragElement from "./ImageGrid/DragElement";
import FilePlaceholder from "./ImageGrid/FilePlaceholder";
import GridImage from "./ImageGrid/GridImage";
import useToastStore from "../stores/useToastStore";
import { post } from "../lib/request";

import {
  createDraggable,
  collectionOrder,
  useDragCollection,
  useDragUploader
} from "./drag";

function filterFiles(files) {
  const validMimeTypes = [
    "image/gif",
    "image/jpeg",
    "image/pjpeg",
    "image/png",
    "image/tiff"
  ];
  return files.filter((f) => validMimeTypes.indexOf(f.type) !== -1);
}

function draggedImageOrder(primaryCollection, imagesCollection, dragState) {
  const [primary, ...rest] = collectionOrder(primaryCollection, dragState);
  let images = [...rest, ...collectionOrder(imagesCollection, dragState)];

  if (
    dragState.dragging &&
    [primary, ...images].indexOf(dragState.dragging) === -1
  ) {
    if (
      dragState.y < imagesCollection.ref.current.getBoundingClientRect().top
    ) {
      images = [dragState.dragging, ...images];
    } else {
      images.push(dragState.dragging);
    }
  }

  return [primary, images];
}

function initRecords(props) {
  const primary = props.enablePrimary
    ? props.records.filter((r) => r.primary).slice(0, 1)
    : [];

  return [primary, props.records.filter((r) => primary.indexOf(r) === -1)];
}

export default function ImageGrid(props) {
  const [initPrimary, initImages] = initRecords(props);
  const primary = useDragCollection(initPrimary);
  const images = useDragCollection(initImages);
  const [deleted, setDeleted] = useState([]);
  const error = useToastStore((state) => state.error);

  const containerRef = useRef();

  const dispatchAll = (action) => {
    primary.dispatch(action);
    images.dispatch(action);
  };

  const dragEnd = (dragState, files) => {
    const [draggedPrimary, draggedImages] = draggedImageOrder(
      primary,
      images,
      dragState
    );

    primary.dispatch({
      type: "reorder",
      payload: draggedPrimary ? [draggedPrimary] : []
    });
    images.dispatch({ type: "reorder", payload: draggedImages });

    if (files) {
      const uploads = filterFiles(files).map((f) => uploadImage(f));
      dispatchAll({ type: "insertFiles", payload: uploads });
    }
  };

  const [dragState, dragStart, listeners] = useDragUploader(
    [primary, images],
    dragEnd
  );

  const position = (record) => {
    return (
      [
        ...primary.draggables.map((d) => d.record),
        ...images.draggables.map((d) => d.record),
        ...deleted
      ].indexOf(record) + 1
    );
  };

  const attrName = (record) => {
    return `${props.attribute}[${position(record)}]`;
  };

  const uploadImage = (file) => {
    const draggable = createDraggable({ image: null, file: file });

    let data = new FormData();

    data.append("image[file]", file);

    post("/admin/images.json", data).then((json) => {
      if (json.status === "error") {
        error("Error uploading image: " + json.error);
        dispatchAll({ type: "remove", payload: draggable });
      } else {
        dispatchAll({
          type: "update",
          payload: { ...draggable, record: { image: json } }
        });
      }
    });

    return draggable;
  };

  const update = (draggable) => (image) => {
    const { record } = draggable;
    const updated = {
      ...draggable,
      record: {
        ...record,
        image: { ...record.image, ...image }
      }
    };
    dispatchAll({ type: "update", payload: updated });
  };

  const remove = (draggable) => () => {
    dispatchAll({ type: "remove", payload: draggable });
    if (draggable.record.id) {
      setDeleted([...deleted, draggable.record]);
    }
  };

  const renderImage = (draggable, isPrimary) => {
    const { dragging } = dragState;

    if (draggable === "Files") {
      return <FilePlaceholder key="placeholder" />;
    }

    return (
      <GridImage
        key={draggable.handle}
        draggable={draggable}
        locale={props.locale}
        locales={props.locales}
        showEmbed={props.showEmbed}
        startDrag={dragStart}
        position={position(draggable.record)}
        primary={isPrimary}
        onUpdate={update(draggable)}
        enablePrimary={props.enablePrimary}
        deleteImage={remove(draggable)}
        attributeName={attrName(draggable.record)}
        placeholder={dragging && dragging == draggable}
      />
    );
  };

  const uploadPrimary = (files) => {
    const [first, ...rest] = filterFiles(files).map((f) => uploadImage(f));
    if (first) {
      images.dispatch({
        type: "prepend",
        payload: [...primary.draggables, ...rest]
      });
      primary.dispatch({ type: "replace", payload: [first] });
    }
  };

  const uploadAdditional = (files) => {
    images.dispatch({
      type: "append",
      payload: filterFiles(files).map((f) => uploadImage(f))
    });
  };

  let classNames = ["image-grid"];
  if (props.enablePrimary) {
    classNames.push("with-primary-image");
  }

  const [draggedPrimary, draggedImages] = draggedImageOrder(
    primary,
    images,
    dragState
  );

  return (
    <div className={classNames.join(" ")} ref={containerRef} {...listeners}>
      {dragState.dragging && (
        <DragElement
          draggable={dragState.dragging}
          dragState={dragState}
          container={containerRef}
        />
      )}
      {props.enablePrimary && (
        <div className="primary-image" ref={primary.ref}>
          <h3>Main image</h3>
          {draggedPrimary && (
            <>
              {renderImage(draggedPrimary, true)}
              {props.primaryAttribute && (
                <input
                  type="hidden"
                  name={props.primaryAttribute}
                  value={
                    (draggedPrimary.record &&
                      draggedPrimary.record.image &&
                      draggedPrimary.record.image.id) ||
                    ""
                  }
                />
              )}
            </>
          )}
          {!draggedPrimary && (
            <div className="drop-target">
              <FileUploadButton
                multiple={true}
                type="image"
                multiline={true}
                callback={uploadPrimary}
              />
            </div>
          )}
        </div>
      )}
      <div className="grid" ref={images.ref}>
        <h3>{props.enablePrimary ? "More images" : "Images"}</h3>
        <div className="drop-target">
          <FileUploadButton
            multiple={true}
            type="image"
            callback={uploadAdditional}
          />
        </div>
        <div className="images">
          {draggedImages.map((r) => renderImage(r, false))}
        </div>
      </div>
      <div className="deleted">
        {deleted.map((r) => (
          <span className="deleted-image" key={r.id}>
            <input name={`${attrName(r)}[id]`} type="hidden" value={r.id} />
            <input
              name={`${attrName(r)}[image_id]`}
              type="hidden"
              value={(r.image && r.image.id) || ""}
            />
            <input
              name={`${attrName(r)}[_destroy]`}
              type="hidden"
              value={true}
            />
          </span>
        ))}
      </div>
    </div>
  );
}

ImageGrid.propTypes = {
  attribute: PropTypes.string,
  locale: PropTypes.string,
  locales: PropTypes.object,
  records: PropTypes.array,
  enablePrimary: PropTypes.bool,
  primaryAttribute: PropTypes.string,
  showEmbed: PropTypes.bool
};