/**
 * Copyright (c) 2020, 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 { GenericIcon, Heading, PageHeader } from "@wso2is/react-components";
import React, { FunctionComponent, ReactElement, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { Card, Grid, Icon, Radio } from "semantic-ui-react";
import {
    ApplicationInterface,
    ApplicationManagementConstants,
    ApplicationManagementUtils,
    InboundProtocolListItemInterface,
    OIDCApplicationConfigurationInterface,
    SAMLApplicationConfigurationInterface
} from "../../../../features/applications";
import { AppState, getTechnologyLogos } from "../../../../features/core";
import { QuickStartModes } from "../../../application-templates/shared";
import { SupportedTechnologyTypes } from "../../../application-templates/templates/single-page-application/models";

/**
 * Proptypes for the applications help panel overview component.
 */
interface HelpPanelOverviewPropsInterface extends TestableComponentInterface {
    inboundProtocols?: InboundProtocolListItemInterface[];
    application?: ApplicationInterface;
    applicationType: string;
    handleIntegrateSelection?: (selection: string) => void;
    onBackButtonClick?: () => void;
    technology?: SupportedTechnologyTypes;
}

/**
 * Applications Help Panel Overview Component.
 * TODO: Add localization support. (https://github.com/wso2-enterprise/asgardeo-product/issues/209)
 *
 * @param {HelpPanelOverviewPropsInterface} props - Props injected to the component.
 * @return {React.ReactElement}
 */
export const HelpPanelOverview: FunctionComponent<HelpPanelOverviewPropsInterface> = (
    props: HelpPanelOverviewPropsInterface
): ReactElement => {

    const urlSearchParams: URLSearchParams = new URLSearchParams(location.search);

    const oidcConfigurations: OIDCApplicationConfigurationInterface = useSelector(
        (state: AppState) => state.application.oidcConfigurations);
    const samlConfigurations: SAMLApplicationConfigurationInterface = useSelector(
        (state: AppState) => state.application.samlConfigurations);
    const { t } = useTranslation();

    const {
        application,
        applicationType,
        inboundProtocols,
        handleIntegrateSelection,
        onBackButtonClick,
        technology
    } = props;

    const [ isOIDC, setIsOIDC ] = useState<boolean>(false);
    const [ isSAML, setIsSAML ] = useState<boolean>(false);
    const [ isOIDCConfigsLoading, setOIDCConfigsLoading ] = useState<boolean>(false);
    const [ isSAMLConfigsLoading, setSAMLConfigsLoading ] = useState<boolean>(false);
    const [ selectedIntegration, setSelectedIntegration ] = useState<QuickStartModes>(QuickStartModes.INTEGRATE);

    useEffect(() => {
        if (inboundProtocols == undefined) {
            return;
        }

        if (inboundProtocols.length > 0) {
            inboundProtocols.map((protocol) => {
                if (protocol.type == "oauth2") {
                    setIsOIDC(true);
                } else if (protocol.type == "samlsso") {
                    setIsSAML(true);
                }
            });
        }

    }, [ inboundProtocols ]);

    useEffect(() => {
        if (oidcConfigurations !== undefined) {
            return;
        }

        ApplicationManagementUtils.getOIDCApplicationMeta()
            .finally(() => {
                setOIDCConfigsLoading(false);
            });
    }, [ oidcConfigurations ]);

    useEffect(() => {
        if (samlConfigurations !== undefined) {
            return;
        }

        ApplicationManagementUtils.getSAMLApplicationMeta()
            .finally(() => {
                setSAMLConfigsLoading(false);
            });
    }, [ samlConfigurations ]);

    const generateTechnologyIcon = () => {

        if (technology === SupportedTechnologyTypes.REACT) {
            return getTechnologyLogos().react;
        } else if (technology === SupportedTechnologyTypes.ANGULAR) {
            return getTechnologyLogos().angular;
        } else if (technology === SupportedTechnologyTypes.JAVASCRIPT) {
            return getTechnologyLogos().javascript;
        }

        return null;
    };

    return (
        <>
            <Grid>
                <Grid.Row>
                    <Grid.Column>
                        <PageHeader
                            image={ (
                                <GenericIcon
                                    inline
                                    transparent
                                    className="display-flex"
                                    icon={ generateTechnologyIcon() }
                                    size="mini"
                                />
                            ) }
                            className="mb-2"
                            title={ technology }
                            backButton={ {
                                onClick: () => onBackButtonClick(),
                                text: "Go back to selection"
                            } }
                            imageSpaced={ false }
                            bottomMargin={ false }
                        />
                        <Heading subHeading as="h6">
                            Select one of the following paths to get started.
                        </Heading>
                    </Grid.Column>
                </Grid.Row>
                {
                    applicationType
                        ? (
                            <>
                                <Grid.Row stretched>
                                    <Grid.Column width={ 8 }>
                                        <Card
                                            className={
                                                `selection-card radio-selection-card ${
                                                    selectedIntegration === QuickStartModes.INTEGRATE
                                                        ? "card-selected"
                                                        : ""
                                                    }`
                                            }
                                            fluid
                                        >
                                            <Card.Content
                                                onClick={ () => {
                                                    setSelectedIntegration(QuickStartModes.INTEGRATE);
                                                    handleIntegrateSelection(QuickStartModes.INTEGRATE);
                                                } }
                                                className="selection-card-content"
                                            >
                                                <div className="integrate-radio">
                                                    <Radio
                                                        checked={ selectedIntegration === QuickStartModes.INTEGRATE }
                                                    />
                                                </div>
                                                <div className="card-content">
                                                    <Card.Header>
                                                        <span>Integrate</span> my application
                                                    </Card.Header>
                                                    <Card.Meta>
                                                        <span>
                                                            Follow the steps below to integrate your own application
                                                        </span>
                                                    </Card.Meta>
                                                </div>
                                            </Card.Content>
                                        </Card>
                                    </Grid.Column>
                                    <Grid.Column width={ 8 }>
                                        <Card
                                            fluid
                                            className={
                                                `selection-card radio-selection-card ${
                                                    selectedIntegration === QuickStartModes.SAMPLES
                                                        ? "card-selected"
                                                        : ""
                                                    }`
                                            }
                                        >
                                            <Card.Content
                                                onClick={ () => {
                                                    setSelectedIntegration(QuickStartModes.SAMPLES);
                                                    handleIntegrateSelection(QuickStartModes.SAMPLES);
                                                } }
                                                className="selection-card-content"
                                            >
                                                <div className="integrate-radio">
                                                    <Radio
                                                        checked={ selectedIntegration === QuickStartModes.SAMPLES }
                                                    />
                                                </div>
                                                <div className="card-content">
                                                    <Card.Header><span>Try out </span>a sample</Card.Header>
                                                    <Card.Meta>
                                                        <span>
                                                            Use our preconfigured samples to try out the
                                                            authentication flow
                                                        </span>
                                                    </Card.Meta>
                                                </div>
                                            </Card.Content>
                                        </Card>
                                    </Grid.Column>
                                </Grid.Row>
                            </>
                        )
                        : null
                }
            </Grid>
        </>
    );
};
