// import { Canvas, View } from "@tarojs/components";
// import React, { useEffect, useState } from "react";
// import styles from "./oui-image-crop.module.scss";
// import Taro, { createCanvasContext } from "@tarojs/taro";
// import { generateRandomString } from "../utils/ui/generate";
// import { Size } from "../global/size";

import { View } from "@tarojs/components";
import React from "react";

// interface OuiImageCropProps {
//   src: string;
// }

// function OuiImageCrop({ src }: OuiImageCropProps) {
//   const [canvasId] = useState<string>(
//     `oui-image-crop:${generateRandomString(8)}`
//   );

//   let canvas;

//   const [screenSize, setScreenSize] = useState<Size>({ width: 0, height: 0 });
//   const [information, setInformation] =
//     useState<Taro.getImageInfo.SuccessCallbackResult>();

//   const [zoom, setZoom] = useState<number>();

//   useEffect(() => {
//     const windowInfo = Taro.getWindowInfo();
//     setScreenSize({
//       width: windowInfo.windowWidth,
//       height: windowInfo.windowHeight,
//     });
//     loadImage();
//   }, [src]);

//   const loadImage = () => {
//     Taro.createSelectorQuery()
//       .select(`#${canvasId}`)
//       .node((result) => {
//         canvas = result.node;
//         Taro.getImageInfo({
//           src: src,
//           success: (imageResult: Taro.getImageInfo.SuccessCallbackResult) => {
//             setInformation(imageResult);
//             render(imageResult.path);
//           },
//         });
//       })
//       .exec();
//   };

//   const render = (image) => {
//     console.log(canvas);

//     const ctx: CanvasRenderingContext2D = canvas?.getContext("2d");

//     console.log(ctx);

//     ctx?.drawImage(
//       Taro.create
//       0,
//       0,
//       screenSize.width,
//       screenSize.height
//     );

//     // ctx?.drawImage(image, 0, 0, screenSize.width, screenSize.height);
//     // ctx?.drawImage(image, 0, 0);
//   };

//   const confirm = () => {};

//   // const onCanvasTouch

//   return (
//     <View className={styles.component}>
//       <Canvas
//         type="2d"
//         id={canvasId}
//         canvasId={canvasId}
//         width={`${screenSize.width}`}
//         height={`${screenSize.height}`}
//         style={{
//           width: `${screenSize.width}px`,
//           height: `${screenSize.height}px`,
//         }}
//         onReady={() => {
//           loadImage();
//         }}
//       ></Canvas>
//       <View></View>
//     </View>
//   );
// }

// export default OuiImageCrop;

/**
 * TODO: Image crop component
 */
function OuiImageCrop() {
  return <View></View>;
}