import { useState, useMemo } from "react";
import { Playground, Props } from "@slytrunk/docs";
import { Button } from "../Button";
import { Checkbox } from "../Checkbox";
import { Text } from "../Text";
import { View } from "../View";
import ImageGrid from "./ImageGrid";
import images from "../../fixtures/images";

# ImageGrid

ImageGrid component

<Props of={ImageGrid} />

## Basic Usage

<Playground>
  {() => {
    const [selectedImages, setSelectedImages] = useState({});
    const allSelected = useMemo(() => {
      for (const image of images) {
        if (!selectedImages[image.id]) return false;
      }
      return true;
    }, [images, selectedImages]);
    return (
      <View>
        <View row style={{ alignItems: "center" }}>
          <Checkbox
            checked={allSelected}
            onPress={() =>
              setSelectedImages(
                images.reduce(
                  (collect, image) => (
                    (collect[image.id] = !allSelected), collect
                  ),
                  {}
                )
              )
            }
          />
          <Text>Select All</Text>
        </View>
        <ImageGrid
          count={10}
          data={images}
          selectedImages={selectedImages}
          onSelect={(image) =>
            setSelectedImages((prevState) => ({
              ...prevState,
              [image.id]: prevState[image.id] ? null : image,
            }))
          }
        />
      </View>
    );
  }}
</Playground>