/**
 * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.
 *
 * This software is the property of WSO2 Inc. and its suppliers, if any.
 * Dissemination of any information or reproduction of any material contained
 * herein in any form is strictly forbidden, unless permitted by WSO2 expressly.
 * You may not alter or remove any copyright or other notice from copies of this content."
 */

import { TestableComponentInterface } from "@wso2is/core/models";
import { CodeEditor, Heading, Text } from "@wso2is/react-components";
import React, { FunctionComponent, ReactElement, ReactNode } from "react";
import { Button, Divider, Icon} from "semantic-ui-react";
import {
    tomcatSAMLAgentDockerEnvCode,
    tomcatSAMLAgentDockerRunCode
} from "./code-blocks";
import { SDKMeta } from "./meta";
import { SupportedTraditionalSAMLAppTechnologyTypes } from "./models";
import {
    ApplicationInterface,
    ApplicationTemplateInterface
} from "../../../../features/applications";
import {
    VerticalStepper,
    VerticalStepperStepInterface
} from "../../../components/component-extensions/application/vertical-stepper";

interface TryoutSamplesPropsInterface extends TestableComponentInterface {
    application: ApplicationInterface;
    template: ApplicationTemplateInterface;
    technology: SupportedTraditionalSAMLAppTechnologyTypes;
    inboundProtocolConfig: any;
}

const DOCKER_ENV_FILE_NAME = "sample-app.env";

/**
 * Tryout Samples of Single Page Applications.
 *
 * @param {TryoutSamplesPropsInterface} props - Props injected into the component.
 * @return {React.ReactElement}
 */
export const TryoutSamples: FunctionComponent<TryoutSamplesPropsInterface> = (
    props: TryoutSamplesPropsInterface
): ReactElement => {

    const {
        inboundProtocolConfig,
        technology,
        [ "data-testid" ]: testId
    } = props;

    const downloadEnvFile = (): void => {
        const blob = new Blob(
            [ tomcatSAMLAgentDockerEnvCode({
                certificate: inboundProtocolConfig.certificate,
                issuer: inboundProtocolConfig.issuer,
                samlIssuer: inboundProtocolConfig.saml.issuer,
                ssoUrl: inboundProtocolConfig.ssoUrl
            }) ],
            { type: "test/plain" }
        );
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.style.display = "none";
        a.href = url;
        a.download = DOCKER_ENV_FILE_NAME;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
    };

    const generateConfigureStep = (technology: SupportedTraditionalSAMLAppTechnologyTypes) => {

        if (technology === SupportedTraditionalSAMLAppTechnologyTypes.TOMCAT_SAML_AGENT) {
            return (
                <>
                    <Text>
                        Download the <code className="inline-code">{ DOCKER_ENV_FILE_NAME }</code>
                        file to a preferred location.
                    </Text>

                    <Button
                        onClick={ downloadEnvFile }
                        className="download-config"
                        size='small'
                        primary
                        data-testid={ `${ testId }-download-config` }
                    >
                        Download Configuration File
                    </Button>

                    <Divider hidden/>

                    <Text>
                        or create a file named <code className="inline-code">
                        { DOCKER_ENV_FILE_NAME }</code> with the configuration below.
                    </Text>

                    <div className="code-segment">
                        <CodeEditor
                            readOnly
                            showLineNumbers
                            withClipboardCopy
                            height="100%"
                            language="htmlmixed"
                            sourceCode={ tomcatSAMLAgentDockerEnvCode({
                                certificate: inboundProtocolConfig.certificate,
                                issuer: inboundProtocolConfig.issuer,
                                samlIssuer: inboundProtocolConfig.saml.issuer,
                                ssoUrl: inboundProtocolConfig.ssoUrl
                            }) }
                            options={ {
                                lineWrapping: true
                            } }
                            theme="dark"
                        />
                    </div>
                </>
            );
        }

        return null;
    };

    const generateRunStep = (technology: SupportedTraditionalSAMLAppTechnologyTypes): ReactNode => {

        if (technology === SupportedTraditionalSAMLAppTechnologyTypes.TOMCAT_SAML_AGENT) {
            return (
                <>
                    <Text>
                        Run the below command in the location where you downloaded/created the
                        <code className="inline-code">{ DOCKER_ENV_FILE_NAME }</code>
                        file from the previous step and visit <a
                        href="http://localhost.com:8080/sample-app"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="link external"
                        >http://localhost.com:8080/sample-app</a>.
                    </Text>
                    <CodeEditor
                        oneLiner
                        readOnly
                        withClipboardCopy
                        language="htmlmixed"
                        sourceCode={ tomcatSAMLAgentDockerRunCode() }
                    />
                    <div className="mt-3">
                        For additional guidance, navigate to our <a
                        href={ SDKMeta.tomcatSAMLAgent.readme }
                        target="_blank"
                        rel="noopener noreferrer"
                        className="link external"
                    >
                        <Icon name="github"/>Github repository
                    </a>
                    </div>
                </>
            );
        }

        return null;
    };

    const sampleFlowSteps: VerticalStepperStepInterface[] = [
        {
            stepContent: generateConfigureStep(technology),
            stepTitle: "Configure"
        },
        {
            stepContent: generateRunStep(technology),
            stepTitle: "Run"
        }
    ];

    const renderPrerequisitesStep = (): ReactElement => {

        return (
            <div className="mt-3 mb-6">
                <Heading as="h3">Prerequisite</Heading>
                <Text>
                    You will need to have <strong>Docker</strong> installed on
                    your environment to try out the sample.
                </Text>
                <Text>To download <strong>Docker</strong>, navigate to the official <a
                        href="https://docs.docker.com/get-docker/"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="link external"
                    >downloads</a> page.
                </Text>
            </div>
        );
    };

    return (
        <>
            { renderPrerequisitesStep() }
            <VerticalStepper
                alwaysOpen
                isSidePanelOpen
                stepContent={ sampleFlowSteps }
                isNextEnabled={ technology !== undefined }
            />
        </>
    );
};
