/**
 * 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 { IdentifiableComponentInterface, SBACInterface } from "@wso2is/core/models";
import { EmptyPlaceholder, Link, PrimaryButton } from "@wso2is/react-components";
import { getEmptyPlaceholderIllustrations, history } from "apps/console/src/features/core";
import { RequestErrorInterface } from "apps/console/src/features/core/hooks/use-request";
import { AxiosError } from "axios";
import React, { FunctionComponent, ReactElement } from "react";
import { useTranslation } from "react-i18next";
import { Icon } from "semantic-ui-react";
import { ExtendedFeatureConfigInterface } from "../../../../configs/models";
import { APIResourcesConstants } from "../../../api-resources/constants";
import { APIResourceInterface } from "../../../api-resources/models";
import { AuthorizedAPIListItemInterface } from "../../models";

/**
 * Prop types for the API resources list component.
 */
interface SubscribedAPIResourcesProps extends
    SBACInterface<ExtendedFeatureConfigInterface>, IdentifiableComponentInterface {
    /**
     * List of all API Resources
     */
    allAPIResourcesListData: APIResourceInterface[];
    /**
     * Error when fetching all API Resources
     */
    allAPIResourcesFetchRequestError: AxiosError<RequestErrorInterface>;
    /**
     * List of subscribed API Resources
     */
    subscribedAPIResourcesListData: AuthorizedAPIListItemInterface[],
    /**
     * Error when fetching subscribed API Resources
     */
    subscribedAPIResourcesFetchRequestError: AxiosError<RequestErrorInterface>;
    /**
     * is shown placeholder
     */
    isShownPlaceholder: boolean;
}

/**
 * API Resources listing page.
 *
 * @param props - Props injected to the component.
 * @returns API Resources Page component
 */
export const SubscribedAPIResources: FunctionComponent<SubscribedAPIResourcesProps> = (
    props: SubscribedAPIResourcesProps
): ReactElement => {

    const {
        allAPIResourcesListData,
        allAPIResourcesFetchRequestError,
        subscribedAPIResourcesListData,
        subscribedAPIResourcesFetchRequestError,
        ["data-componentid"]: componentId
    } = props;

    const { t } = useTranslation();

    /**
     * Navigate to the API Resources page.
     */
    const navigateToAPIResources = () => history.push(APIResourcesConstants.getPaths().get("API_RESOURCES"));

    const placeHolders = () => {
        if (allAPIResourcesFetchRequestError || subscribedAPIResourcesFetchRequestError) {
            return (
                <EmptyPlaceholder
                    image={ getEmptyPlaceholderIllustrations().genericError }
                    imageSize="tiny"
                    title={ t("extensions:develop.applications.edit.sections.apiAuthorization.sections" + 
                    ".apiSubscriptions.placeHolderTexts.errorText.title") }
                    subtitle={ [ t("extensions:develop.applications.edit.sections.apiAuthorization.sections" + 
                            ".apiSubscriptions.placeHolderTexts.errorText.subtitles.1"), 
                    t("extensions:develop.applications.edit.sections.apiAuthorization.sections" + 
                            ".apiSubscriptions.placeHolderTexts.errorText.subtitles.0") ] }
                    data-testid={ `${componentId}-all-empty-placeholder-icon` }
                />
            );
        } else if (allAPIResourcesListData && allAPIResourcesListData.length === 0) {
            return (
                <EmptyPlaceholder
                    image={ getEmptyPlaceholderIllustrations().emptySearch }
                    action={ (
                        <Link
                            data-componentid={ `${componentId}-link-api-resource-page` }
                            onClick={ navigateToAPIResources }
                            external={ false }
                        >
                            { t("extensions:develop.applications.edit.sections.apiAuthorization.sections" + 
                                ".apiSubscriptions.buttons.noAPIResourcesLink") }
                        </Link>
                    ) }
                    imageSize="tiny"
                    subtitle={ [ t("extensions:develop.applications.edit.sections.apiAuthorization.sections" + 
                        ".apiSubscriptions.placeHolderTexts.noAPIResources") ] }
                    data-testid={ `${componentId}-sub-empty-placeholder-icon` }
                />
            );
        } else if (subscribedAPIResourcesListData && subscribedAPIResourcesListData.length === 0) {
            return (
                <EmptyPlaceholder
                    image={ getEmptyPlaceholderIllustrations().emptyList }
                    action={ (
                        <PrimaryButton
                            data-testid={ `${componentId}-empty-placeholder-sub-api-resource-button` }
                            onClick={ () => null }
                        >
                            <Icon name="add" />
                            { t("extensions:develop.applications.edit.sections.apiAuthorization.sections" + 
                                ".apiSubscriptions.buttons.subAPIResource") }
                        </PrimaryButton>
                    ) }
                    imageSize="tiny"
                    subtitle={ [ t("extensions:develop.applications.edit.sections.apiAuthorization.sections" + 
                        ".apiSubscriptions.placeHolderTexts.emptyText") ] }
                    data-testid={ `${componentId}-sub-empty-placeholder-icon` }
                />
            );
        }
    };

    return (
        placeHolders()
    );

};

/**
 * Default props for the component.
 */
SubscribedAPIResources.defaultProps = {
    "data-componentid": "subscribed-api-resources"
};
