import * as SDK from "azure-devops-extension-sdk";
import { getClient } from "azure-devops-extension-api";
import { BuildRestClient } from "azure-devops-extension-api/Build";
import { Page } from "azure-devops-ui/Page";
import { ZeroData } from "azure-devops-ui/ZeroData";
import * as React from "react";
import * as ReactDOM from "react-dom";

class Tab extends React.Component<{}, { artifactContext?: string, debugInfo?: string }> {
    constructor(props: {}) {
        super(props);
        this.state = { artifactContext: undefined, debugInfo: undefined };
    }

    public async componentDidMount() {
        await SDK.init();
        const projectName = "Project Name";
        const buildId = xxx;
        const artifactName = "artifact_name";

        try {
            const buildClient = await getClient(BuildRestClient);
            const artifact = await buildClient.getArtifact(projectName, buildId, artifactName);
            if (artifact) {
                this.setState({
                    artifactContext: JSON.stringify(artifact, null, 2),
                    debugInfo: "Artifact was successfully retrieved."
                });
            } else {
                this.setState({
                    artifactContext: "No artifact was returned.",
                    debugInfo: "No artifact found with the specified name."
                });
            }
        } catch (error: any) {
            console.error("Error fetching artifact:", error);
            this.setState({
                artifactContext: `Error fetching artifact: ${error.message}`,
                debugInfo: `API call failed: ${error.message}`
            });
        }
    }

    public render(): JSX.Element {
        const { artifactContext, debugInfo } = this.state;

        return (
            <Page className="flex-grow">
                <ZeroData
                    primaryText="Fetching artifact..."
                    secondaryText={"Please wait while the artifact is being fetched."}
                    imageAltText="Fetching data"
                />
                {artifactContext && (
                    <div>
                        <h3>Artifact Context:</h3>
                        <pre>{artifactContext}</pre>
                    </div>
                )}
                {debugInfo && (
                    <div>
                        <h3>Debug Information:</h3>
                        <pre>{debugInfo}</pre>
                    </div>
                )}
            </Page>
        );
    }
}

ReactDOM.render(<Tab />, document.getElementById("root"));