import * as React from "react";
import { 
  Button
} from "@fluentui/react-components";
import { 
  CircleRegular
} from "@fluentui/react-icons";
import { useStatusContext } from "./App";
import { useCommonStyles } from "./commonStyles";

export const RoundImage: React.FC = () => {
  const styles = useCommonStyles();
  const { 
    statusMessage, setStatusMessage,
    statusType, setStatusType,
    isProcessing, setIsProcessing
  } = useStatusContext();

  const convertToRoundImage = async () => {
    setIsProcessing(true);
    try {
      await PowerPoint.run(async (context) => {
        // Get the selected shapes
        const shapes = context.presentation.getSelectedShapes();
        shapes.load("items");
        await context.sync();
        
        if (shapes.items.length === 0) {
          setStatusMessage("No shapes are selected. Please select an image.");
          setStatusType("warning");
          return;
        }
        
        // Get the first selected shape
        const shape = shapes.items[0];
        
        // Load essential properties 
        shape.load(["type"]);
        await context.sync();

        // Ensure the shape is a picture
        if (shape.type !== PowerPoint.ShapeType.image) {
          setStatusMessage("Please select an image.");
          setStatusType("warning");
          return;
        }
        
        // Load current dimensions to maintain aspect ratio
        shape.load(["width", "height", "left", "top", "id"]);
        await context.sync();
      
        // Store current dimensions
        const width = shape.width;
        const height = shape.height;
      
        const slide = context.presentation.getSelectedSlides().getItemAt(0);
        const maskShape = slide.shapes.addGeometricShape("Ellipse" as any);
       
        maskShape.load(["width", "height", "left", "top", "id"]);
        await context.sync();
       
        maskShape.left = shape.left;

        shape.lineFormat.load(["weight"]);
        await context.sync();

        maskShape.top = shape.top; // + shape.lineFormat.weight;
        maskShape.width = shape.width;
        maskShape.height = shape.height;
        maskShape.fill.setSolidColor("red");
        maskShape.lineFormat.visible = false;

        setStatusMessage("Created mask shape. Please select both the image and the oval, then use the 'Shape Forma > Merge Shapes > Intersect' command in PowerPoint.");
        setStatusType("warning");

        slide.setSelectedShapes([shape.id, maskShape.id]);
        // Ensure we maintain the same size
        shape.width = width;
        shape.height = height;
      
        await context.sync();
      });
    } catch (error) {
      setStatusMessage(`Error: ${error.message}`);
      setStatusType("error");
      console.error("Main error:", error);
    } finally {
      setIsProcessing(false);
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.buttonGroup}>
        <Button 
          appearance="primary" 
          className={styles.actionButton}
          onClick={convertToRoundImage} 
          icon={<CircleRegular />}
          disabled={isProcessing}
        >
          Round Image
        </Button>
      </div>
    </div>
  );
};

export default RoundImage;