/**
 * 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 } from "@wso2is/core/models";
import {
    EmphasizedSegment,
    EmptyPlaceholder,
    Heading,
    PrimaryButton
} from "@wso2is/react-components";
import React, {
    FunctionComponent,
    ReactElement
} from "react";
import { useTranslation } from "react-i18next";
import { Divider, Grid, Icon } from "semantic-ui-react";
import {
    getEmptyPlaceholderIllustrations
} from "../../../../../features/core";

/**
 * Application roles component.
 * 
 * @param props - Props related to application roles component.
 */
export const APIAuthorization: FunctionComponent<IdentifiableComponentInterface> = (
    props: IdentifiableComponentInterface
): ReactElement => {

    const {
        ["data-componentid"]: componentId
    } = props;

    const { t } = useTranslation();

    return (
        <EmphasizedSegment padded="very" data-componentid={ componentId }>
            <Grid>
                <Grid.Row>
                    <Grid.Column className="heading-wrapper" computer={ 10 }>
                        <Heading as="h4">
                            { t("extensions:develop.applications.edit.sections.apiAuthorization.sections" + 
                                ".apiSubscriptions.heading") }
                        </Heading>
                        <Heading subHeading ellipsis as="h6" >
                            { t("extensions:develop.applications.edit.sections.apiAuthorization.sections" + 
                                ".apiSubscriptions.subHeading") }
                        </Heading>
                    </Grid.Column >
                </Grid.Row>
            </Grid>
            <Divider hidden />
            <Grid>
                <Grid.Row>
                    <Grid.Column>
                        <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.emptyText") ] }
                            data-testid={ `${componentId}-empty-placeholder-icon` }
                        />
                    </Grid.Column>
                </Grid.Row>
            </Grid>
        </EmphasizedSegment>
    );
};

/**
 * Default props for application roles tab component.
 */
APIAuthorization.defaultProps = {
    "data-componentid": "api-authorization-tab"
};
