import Cropper, {
  type Area,
  type Point,
} from 'react-easy-crop';

type ImageEditorCanvasProps = {
  image: string;
  crop: Point;
  zoom: number;
  rotation: number;
  aspect: number | undefined;
  flipH: boolean;
  flipV: boolean;
  brightness: number;
  contrast: number;
  saturate: number;
  onCropChange: (crop: Point) => void;
  onZoomChange: (zoom: number) => void;
  onRotationChange: (rotation: number) => void;
  onCropComplete: (area: Area, areaPixels: Area) => void;
};

export const ImageEditorCanvas = ({
  image,
  crop,
  zoom,
  rotation,
  aspect,
  flipH,
  flipV,
  brightness,
  contrast,
  saturate,
  onCropChange,
  onZoomChange,
  onRotationChange,
  onCropComplete,
}: ImageEditorCanvasProps) => {
  const transform = [
    `translate(${crop.x}px, ${crop.y}px)`,
    `rotate(${rotation}deg)`,
    `scale(${zoom})`,
    `scaleX(${flipH ? -1 : 1})`,
    `scaleY(${flipV ? -1 : 1})`,
  ].join(' ');

  return (
    <div className='relative flex-1 bg-neutral-900'>
      <Cropper
        image={image}
        crop={crop}
        zoom={zoom}
        rotation={rotation}
        aspect={aspect}
        transform={transform}
        restrictPosition={false}
        showGrid
        minZoom={1}
        maxZoom={3}
        zoomWithScroll
        onCropChange={onCropChange}
        onZoomChange={onZoomChange}
        onRotationChange={onRotationChange}
        onCropComplete={onCropComplete}
        style={{
          mediaStyle: {
            filter: `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturate}%)`,
          },
        }}
      />
    </div>
  );
};
