/**
 * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import { TestableComponentInterface } from "@wso2is/core/models";
import { GenericIcon, Heading, PageHeader, Text } from "@wso2is/react-components";
import React, { FunctionComponent, ReactElement, ReactNode } from "react";
import { Grid } from "semantic-ui-react";
import { IdentityProviderInterface, IdentityProviderTemplateInterface } from "../../../authentication-providers/models";
import {
    VerticalStepper,
    VerticalStepperStepInterface
} from "../../../components/component-extensions/application/vertical-stepper";
import RegisterApplicationIllustration from "../google/assets/add-social-login-illustration.png";

/**
 * Prop types of the component.
 */
interface GoogleQuickStartPropsInterface extends TestableComponentInterface {
    identityProvider: IdentityProviderInterface;
    template: IdentityProviderTemplateInterface;
}

/**
 * Quick start content for the Google IDP template.
 *
 * @param {GoogleQuickStartPropsInterface} props - Props injected into the component.
 * @return {React.ReactElement}
 */
const GoogleQuickStart: FunctionComponent<GoogleQuickStartPropsInterface> = (
    props: GoogleQuickStartPropsInterface
): ReactElement => {

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

    const generateEditAppStep = (): ReactNode => {
        return (
            <>
                <Text>
                    You can add this identity provider as a login option in your application to allow users to login
                    using their Google account. Go to <strong>Applications</strong> and select the relevant
                    application to edit.
                </Text>
            </>
        );
    };

    const generateConfigureStep = (): ReactNode => {
        return (
            <>
                <Text>
                    Click <strong>Sign-on Method</strong> and drag and drop Google to the relevant step to
                    add it to the authentication flow.
                </Text>
                <GenericIcon
                    icon={ RegisterApplicationIllustration }
                    size="huge"
                    transparent
                    style={ {
                        justifyContent: "start"
                    } }
                />
            </>
        );
    };

    const integrationFlowSteps: VerticalStepperStepInterface[] = [
        {
            stepContent: generateEditAppStep(),
            stepTitle: "Edit Application"
        },
        {
            stepContent: generateConfigureStep(),
            stepTitle: "Configure Social Login"
        }
    ];

    return (
        <Grid data-testid={ testId } className="ml-0 mr-0">

            <Grid.Row textAlign="left">
                <Grid.Column width={ 16 }>
                    <PageHeader
                        className="mb-2"
                        title={ "Set Up Social Login" }
                        imageSpaced={ false }
                        bottomMargin={ false }
                    />
                    <Heading subHeading as="h6">
                        Follow the instructions below to use this identity provider with your application
                    </Heading>
                </Grid.Column>
            </Grid.Row>
            <Grid.Row textAlign="left">
                <Grid.Column width={ 16 }>
                    <VerticalStepper
                        alwaysOpen
                        isSidePanelOpen
                        stepContent={ integrationFlowSteps }
                        isNextEnabled={ false }
                        data-testid={ `${ testId }-vertical-stepper` }
                    />
                </Grid.Column>
            </Grid.Row>

        </Grid>
    );
};

/**
 * Default props for the component
 */
GoogleQuickStart.defaultProps = {
    "data-testid": "google-quick-start"
};

/**
 * A default export was added to support React.lazy.
 * TODO: Change this to a named export once react starts supporting named exports for code splitting.
 * @see {@link https://reactjs.org/docs/code-splitting.html#reactlazy}
 */
export default GoogleQuickStart;
