import React, { CSSProperties, useEffect, useState } from "react";

import { Image } from "./Image";

import styles from "./ShapesBackground.module.css";

interface Props {
  getConfig?: GetShapesConfig;
}

export function ShapesBackground({ getConfig }: Props) {
  const [config, setConfig] = useState<ShapesConfig>({});

  useEffect(() => {
    setConfig(getConfig?.() ?? {});
  }, [getConfig]);

  return (
    <div className={styles.shapesContainer}>
      {Object.entries(config).map(([type, instances]) =>
        instances.map((attributes, idx) => (
          <Shape
            key={idx.toString() + type}
            type={type as ShapeType}
            style={attributes}
          />
        ))
      )}
    </div>
  );
}

export type ShapeType =
  | "asterisk"
  | "circle"
  | "cross"
  | "dots"
  | "hash"
  | "plus"
  | "ring"
  | "triangle"
  | "waves";

export type ShapesConfig = {
  [key in ShapeType]?: CSSProperties[];
};

export type GetShapesConfig = () => ShapesConfig;

function Shape(props: { type: ShapeType; style: CSSProperties }) {
  return (
    <Image
      src={`/images/shapes/${props.type}.svg`}
      className={styles.shape}
      style={props.style}
    />
  );
}