import React from "react";
import { requireNativeComponent, ViewProps, ColorValue } from "react-native";

type Paint = {
  color: ColorValue;
  style: "stroke" | "fill" | "stroke_&_fill";
  strokeWidth: number;
};

export type Shape = {
  type: "rect" | "oval" | "image";
  x: number;
  y: number;
  width: number;
  height: number;
  paint: Partial<Paint>;
};

export type RectShape = Shape & {};
export type OvalShape = Shape & {};
export type Picture = Shape & {
  source: string;
  crop: [number, number, number, number]; // x, y, width, height
};

type NativeCanvasProps = ViewProps & {
  shapes: Shape[];
};

const NativeCanvas = requireNativeComponent<NativeCanvasProps>("NativeCanvas");

type CanvasProps = NativeCanvasProps;

export const Canvas = (props: CanvasProps) => {
  const shapes = React.useMemo(() => props.shapes, [props.shapes]);
  return (
    <React.StrictMode>
      <NativeCanvas {...props} shapes={shapes} />
    </React.StrictMode>
  );
};