/**
 * 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 { Heading, Text } from "@wso2is/react-components";
import React, { FunctionComponent, ReactElement} from "react";
import { Card, Divider} from "semantic-ui-react";
import { ReactComponent as AngularLogo } from "./assets/angular-logo.svg";
import { ReactComponent as JavaScriptLogo } from "./assets/javascript-logo.svg";
import { ReactComponent as ReactLogo } from "./assets/react-icon.svg";
import { SupportedTechnologyTypes } from "./models";

/**
 * Proptypes for the Technology Selection component.
 */
interface TechnologySelectionPropsInterface extends TestableComponentInterface {
    onSelectedTechnologyChange: (technology: SupportedTechnologyTypes) => void;
}

/**
 * Technology Selection component.
 * TODO: Add localization support. (https://github.com/wso2-enterprise/asgardeo-product/issues/209)
 *
 * @param {TechnologySelectionPropsInterface} props - Props injected to the component.
 * @return {React.ReactElement}
 */
export const TechnologySelection: FunctionComponent<TechnologySelectionPropsInterface> = (
    props: TechnologySelectionPropsInterface
): ReactElement => {

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

    return (
        <>
            <Heading as="h2" className="mb-1" compact>Which technology are you using?</Heading>
            <Text muted>
                We will guide you through registering your application step by step.
            </Text>
            <Divider hidden/>
            <Card.Group
                centered
                className="tech-selection-cards mt-3"
                itemsPerRow={ 9 }
            >
                <Card
                    raised={ false }
                    data-testid={ `${ testId }-technology-react` }
                    className="basic-card tech-selection"
                    onClick={ () => onSelectedTechnologyChange(SupportedTechnologyTypes.REACT) }
                >
                    <Card.Content textAlign="center">
                        <ReactLogo/>
                        <Card.Description>
                            React
                        </Card.Description>
                    </Card.Content>
                </Card>
                <Card
                    raised={ false }
                    data-testid={ `${ testId }-technology-angular` }
                    className="basic-card tech-selection"
                    onClick={ () => onSelectedTechnologyChange(SupportedTechnologyTypes.ANGULAR) }
                >
                    <Card.Content textAlign="center">
                        <AngularLogo/>
                        <Card.Description>
                            Angular
                        </Card.Description>
                    </Card.Content>
                </Card>
                <Card
                    raised={ false }
                    data-testid={ `${ testId }-technology-javascript` }
                    className="basic-card tech-selection"
                    onClick={ () => onSelectedTechnologyChange(SupportedTechnologyTypes.JAVASCRIPT) }
                >
                    <Card.Content textAlign="center">
                        <JavaScriptLogo/>
                        <Card.Description>
                            JavaScript
                        </Card.Description>
                    </Card.Content>
                </Card>
            </Card.Group>
        </>
    );
};
