/**
 * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
 *
 * This software is the property of WSO2 LLC. 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 { 
    Code,
    CopyInputField,
    DocumentationLink,
    Heading,
    Hint,
    Link,
    Message,
    ResourceTab,
    Text,
    useDocumentation } from "@wso2is/react-components";
import { ApplicationManagementUtils } from "apps/console/src/features/applications/utils";
import { AppState, EventPublisher } from "apps/console/src/features/core";
import { TestableComponentInterface } from "modules/core/src/models";
import React, {
    FunctionComponent,
    ReactElement
} from "react";
import { Trans, useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { Divider, Grid, Icon } from "semantic-ui-react";
import AndroidLogo from "./assets/android-logo.svg";
import AppleLogo from "./assets/apple-logo.svg";
import FlutterLogo from "./assets/flutter-logo.svg";
import IonicLogo from "./assets/ionic-logo.svg";
import ReactNativeLogo from "./assets/react-native-logo.svg";
import {
    ApplicationInterface,
    ApplicationTemplateInterface,
    OIDCApplicationConfigurationInterface
} from "../../../../features/applications/models";
import { SupportedTechnologyArray } from "../../shared/components/supported-technology-array";

/**
 * Prop types of the Mobile Application Quickstart component.
 */
interface MobileApplicationQuickStartPropsInterface extends TestableComponentInterface {
    application: ApplicationInterface;
    inboundProtocolConfig: any;
    template: ApplicationTemplateInterface;
    onApplicationUpdate: () => void;
    onTriggerTabUpdate: (tabIndex: number) => void;
    defaultTabIndex: number;
}

const PROTOCOL_TAB_INDEX: number = 2;
const INFO_TAB_INDEX: number = 6;
const DEFAULT_REQUESTED_SCOPES: string[] = [ "openid", "profile" ];

/**
 * Mobile App Quick start content.
 *
 * @param  props - Props injected into the component.
 * @returns Mobile App QuickStart.
 */
const MobileApplicationQuickStart:
    FunctionComponent<MobileApplicationQuickStartPropsInterface> = (
        props:MobileApplicationQuickStartPropsInterface
    ): ReactElement => {

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

        const { t } = useTranslation();

        const { getLink } = useDocumentation();
        
        const oidcConfigurations: OIDCApplicationConfigurationInterface = useSelector(
            (state: AppState) => state.application.oidcConfigurations);

        const eventPublisher: EventPublisher = EventPublisher.getInstance();

        const onTabNavigationClick = ( tabIndex: number): void => {
            eventPublisher.publish(
                "application-quick-start-visit-info-section"
            );
            onTriggerTabUpdate(tabIndex);
        };

        const configuredCallbacks: any = ApplicationManagementUtils.buildCallBackURLWithSeparator(
            inboundProtocolConfig.oidc.callbackURLs[ 0 ]).split(",");

        return (
            <ResourceTab.Pane controlledSegmentation>
                <Grid>
                    <Grid.Row columns={ 2 }>
                        <div className="mt-3">
                            <Message
                                type={ "info" }
                                content={ 
                                    (<Trans
                                        i18nKey={
                                            "extensions:develop.applications.quickstart.mobileApp" +
                                            ".technologyInfo"
                                        }>
                                        You can integrate this application with any third party 
                                        OIDC mobile SDK of your choice.
                                        <DocumentationLink
                                            link={
                                                getLink("develop.applications.editApplication." +
                                                "oidcApplication.quickStart.mobileApp." +
                                                "learnMore")
                                            }
                                        >Learn More</DocumentationLink>
                                    </Trans>)
                                }
                            />
                        </div>
                    </Grid.Row>
                    <Grid.Row>
                        <div
                            data-testid={ `${ testId }-technology-section` }
                            className="inline-block">
                            <SupportedTechnologyArray
                                onTriggerTabUpdate={ onTriggerTabUpdate }
                                infoTabIndex={ INFO_TAB_INDEX }
                                icons={ [
                                    { techIcon: AndroidLogo, techIconTitle: "Android" },
                                    { techIcon: AppleLogo, techIconTitle: "iOS" },
                                    { techIcon: FlutterLogo, techIconTitle: "Flutter" },
                                    { techIcon: ReactNativeLogo, techIconTitle: "React Native" },
                                    { techIcon: IonicLogo, techIconTitle: "Ionic" }
                                ] }
                                documentationLink={
                                    getLink(
                                        "develop.applications.editApplication." +
                                        "singlePageApplication.quickStart." +
                                        "customConfig.learnMore"
                                    )
                                }
                                isMobileAppQuickstart={ true }
                            />
                        </div>
                    </Grid.Row>
                    <Grid.Row columns={ 2 }>
                        <Grid.Column>
                            <Heading as="h4">
                                {
                                    t("extensions:develop.applications.quickstart.mobileApp" +
                                    ".configurations.heading")
                                }
                            </Heading>
                            <Text>
                                {
                                    t("extensions:develop.applications.quickstart.mobileApp" +
                                    ".configurations.generalDescription")
                                }
                                <Divider hidden/>
                                <Trans
                                    i18nKey={
                                        "extensions:develop.applications.quickstart.mobileApp" +
                                        ".configurations.protocolDescription"
                                    }>
                                        For more details on configurations, go to the 
                                    <a
                                        className="link pointing"
                                        onClick={ () => { onTabNavigationClick(PROTOCOL_TAB_INDEX); } }
                                    > Protocol </a>
                                </Trans>
                            </Text>
                            <Divider hidden/>
                            <label>
                                {
                                    t("console:develop.features.applications.confirmations." +
                                        "clientSecretHashDisclaimer.forms.clientIdSecretForm.clientId.label")
                                }
                            </label>
                            <Hint popup>
                                {
                                    t("extensions:develop.applications.quickstart.spa.integrate" +
                                        ".common.sdkConfigs.clientId.hint")
                                }
                            </Hint>
                            <CopyInputField
                                value={ inboundProtocolConfig?.oidc?.clientId }
                                data-testid={ `${ testId }-client-id-readonly-input` }
                            />
                            <Divider hidden/>
                            <label>
                                {
                                    t("extensions:develop.applications.quickstart.mobileApp" +
                                        ".configurations.redirectURI.label")
                                }
                            </label>
                            <Hint
                                popup
                                popupOptions={ {
                                    wide: true
                                } }
                                warning={ inboundProtocolConfig?.oidc?.callbackURLs?.length > 1 }
                            >
                                {
                                    (inboundProtocolConfig?.oidc?.callbackURLs?.length > 1) && (
                                        <>
                                            <Message attached="top" warning>
                                                <Icon name="warning sign" />
                                                {
                                                    t("extensions:develop.applications.quickstart" +
                                                        ".spa.integrate.common.sdkConfigs.signInRedirectURL" +
                                                        ".hint.multipleWarning")
                                                }
                                            </Message>
                                            <Divider hidden />
                                        </>
                                    )
                                }
                                <Trans
                                    i18nKey={
                                        "extensions:develop.applications.quickstart.spa.integrate.common" +
                                            ".sdkConfigs.signInRedirectURL.hint.content"
                                    }
                                >
                                    The URL that determines where the authorization code is sent to upon user
                                    authentication.
                                    <Divider hidden />
                                    If your application is hosted on a different URL, go to the 
                                    <Link
                                        link={ `#tab=${ PROTOCOL_TAB_INDEX }` }
                                        target="_self"
                                        external={ false }
                                    >
                                        Protocol
                                    </Link> 
                                    tab and configure the correct URL from the
                                    <Code>
                                        Authorized redirect URLs
                                    </Code> 
                                    field.
                                </Trans>
                            </Hint>
                            <CopyInputField
                                value={ configuredCallbacks.join(", ").toString() }
                                data-testid={ `${ testId }-redirect-url-readonly-input` }
                                className="mt-2"
                            />
                            <Divider hidden/>
                            <label>
                                {
                                    t("extensions:develop.applications.quickstart.mobileApp" +
                                        ".configurations.scope.label")
                                }
                            </label>
                            <Hint popup>
                                <Trans
                                    i18nKey={
                                        "extensions:develop.applications.quickstart" +
                                        ".spa.integrate.common.sdkConfigs.scope.hint"
                                    }
                                >
                                    These are the set of scopes that are used to request
                                    user attributes.
                                    <Divider hidden />
                                    If you need to add more scopes other than <Code>openid</Code> &
                                    <Code>profile</Code>, you can append them to the array.
                                    <Divider hidden />
                                    Read through our 
                                    <Link
                                        link={
                                            getLink("develop.applications.editApplication.oidcApplication" +
                                                ".quickStart.applicationScopes.learnMore")
                                        }>documentation
                                    </Link>
                                    to learn  more.
                                </Trans>
                            </Hint>
                            <CopyInputField
                                value={ DEFAULT_REQUESTED_SCOPES.join(" ").toString() }
                                data-testid={ `${ testId }-scope-readonly-input` }
                            />
                            <Divider hidden/>
                            <label>
                                {
                                    t("extensions:develop.applications.quickstart.mobileApp" +
                                    ".configurations.discoveryURI.label")
                                }
                            </label>
                            <Hint popup>
                                {
                                    t("extensions:develop.applications.quickstart.mobileApp" +
                                    ".configurations.discoveryURI.info")
                                }
                            </Hint>
                            <CopyInputField
                                value={ oidcConfigurations?.wellKnownEndpoint }
                                data-testid={ `${ testId }-discovery-url-readonly-input` }
                                className="mt-2"
                            />
                            <Divider hidden/>
                            <Text>
                                <Trans
                                    i18nKey={
                                        "extensions:develop.applications.quickstart.mobileApp" +
                                        ".configurations.moreInfoDescription"
                                    }
                                >
                                    Use additional details on server endpoints in the 
                                    <a
                                        className="link pointing"
                                        onClick={ () => { onTabNavigationClick(INFO_TAB_INDEX); } }
                                    > Info </a>
                                    tab to build your application.
                                </Trans>
                            </Text>
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </ResourceTab.Pane>

        );
    };

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

export default MobileApplicationQuickStart;
