/**
 * 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 { PrimaryButton, Text } from "@wso2is/react-components";
import React, { FunctionComponent, ReactElement, useState } from "react";
import { useSelector } from "react-redux";
import { Icon } from "semantic-ui-react";
import { AppConstants } from "../../../../features/core/constants";
import { ConsumerUsersConstants } from "../../../components/consumer-users/consumer-users-constants";
import { AddConsumerUserWizard } from "../../../components/consumer-users/wizard";
import { FeatureConfigInterface } from "../../../../features/core/models";
import { AppState } from "../../../../features/core/store";
import { hasRequiredScopes } from "@wso2is/core/dist/src/helpers";

/**
 * Proptypes for add user step component in application sample flow.
 */
type AddUserStepContentPropsInterface = TestableComponentInterface;

/**
 * Component to add a user during application sample flow.
 *
 * @param {AddUserStepContentPropsInterface} props - Props injected into the component.
 * @return {React.ReactElement}
 */
export const AddUserStepContent: FunctionComponent<AddUserStepContentPropsInterface> = (
    props: AddUserStepContentPropsInterface
): ReactElement => {

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

    const featureConfig: FeatureConfigInterface = useSelector((state: AppState) => state.config.ui.features);
    const allowedScopes: string = useSelector((state: AppState) => state?.auth?.scope);

    const [ showWizard, setShowWizard ] = useState<boolean>(false);

    return (
        <div data-testid={ testId }>
            <Text compact>
                You will need credentials of a user account to try out the sample application.
            </Text>
            <Text compact>
                <strong>Note: </strong>This step can be skipped if you already have a user account.
            </Text>
            {
                hasRequiredScopes(featureConfig?.users,
                    featureConfig?.users?.scopes?.create,
                    allowedScopes)
                    ? (
                        <>
                            <PrimaryButton
                                className="mt-3"
                                onClick={ () => setShowWizard(true) }
                            >
                                Add User
                            </PrimaryButton>

                            <Text spaced="top">
                                <strong>Alternatively: </strong>you can manually add a user by navigating to <a
                                    onClick={ () => {
                                        window.open(AppConstants.getClientOriginWithTenant()
                                            + ConsumerUsersConstants.getPaths().get("CONSUMER_USERS_PATH"),
                                            "",
                                            "noopener");
                                    } }
                                    className="external-link link pointing primary"
                                >user management <Icon name="external"/></a>
                            </Text>
                        </>
                    )
                    : (
                        <Text compact>
                            If you do not already have an account, contact your tenant administrator.
                        </Text>
                    )
            }
            {
                showWizard && (
                    <AddConsumerUserWizard
                        data-testid="user-mgt-add-user-wizard-modal"
                        closeWizard={ () => setShowWizard(false) }
                        emailVerificationEnabled={ false }
                        requiredSteps={ [ "BasicDetails" ] }
                        submitStep={ "BasicDetails" }
                        hiddenFields={ [ "firstName", "lastName" ] }
                        showStepper={ false }
                        requestedPasswordOption="createPw"
                    />
                )
            }
        </div>
    );
};

/**
 * Default props for the component.
 */
AddUserStepContent.defaultProps = {
    "data-testid": "add-user-step-content"
};
