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

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

  const addProgressBar = async () => {
    setIsProcessing(true);
    try {
      await PowerPoint.run(async (context) => {
        const shapes = context.presentation.getSelectedShapes();
        // Implementation will go here
        setStatusMessage("Added progress bar to slides.");
        setStatusType("success");
      });
    } catch (error) {
      setStatusMessage(`Error: ${error.message}`);
      setStatusType("error");
      console.error("Add progress bar error:", error);
    } finally {
      setIsProcessing(false);
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.buttonGroup}>
        <Button 
          appearance="primary" 
          className={styles.actionButton}
          onClick={addProgressBar} 
          icon={<GaugeRegular />}
          disabled={isProcessing}
        >
          Add Progress Bar
        </Button>
      </div>
    </div>
  );
};

export default AddProgressBar;