/***************************************************************************
 * The contents of this file were generated with Amplify Studio.           *
 * Please refrain from making any modifications to this file.              *
 * Any changes to this file will be overwritten when running amplify pull. *
 **************************************************************************/

/* eslint-disable */
import React from "react";
import { SortDirection } from "@aws-amplify/datastore";
import { Contributor, Course, Tag } from "../models";
import {
  getOverrideProps,
  useDataStoreBinding,
} from "@aws-amplify/ui-react/internal";
import CardLayout from "./CardLayout";
import { Collection } from "@aws-amplify/ui-react";
export default function CardLayoutCollection(props) {
  const { items: itemsProp, overrideItems, overrides, ...rest } = props;
  const itemsPagination = {
    sort: (s) => s.dateCreated(SortDirection.DESCENDING),
  };
  const contributorItems = useDataStoreBinding({
    type: "collection",
    model: Contributor,
  }).items;
  const tagItems = useDataStoreBinding({
    type: "collection",
    model: Tag,
  }).items;
  const itemsDataStore = useDataStoreBinding({
    type: "collection",
    model: Course,
    pagination: itemsPagination,
  }).items.map((item) => ({
    ...item,
    contributors: contributorItems.filter((model) => model.course === item.id),
    courseTags: tagItems.filter((model) => model.course === item.id),
  }));
  const items = itemsProp !== undefined ? itemsProp : itemsDataStore;
  return (
    <Collection
      type="grid"
      isPaginated={true}
      searchPlaceholder="Search..."
      itemsPerPage={6}
      templateColumns="1fr 1fr"
      autoFlow="row"
      alignItems="stretch"
      justifyContent="stretch"
      items={items || []}
      {...rest}
      {...getOverrideProps(overrides, "CardLayoutCollection")}
    >
      {(item, index) => (
        <CardLayout
          height="auto"
          width="auto"
          margin="0 0px 0px 0"
          course={item}
          key={item.id}
          {...(overrideItems && overrideItems({ item, index }))}
        ></CardLayout>
      )}
    </Collection>
  );
}