/**
 * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import React from "react";
import { Field, Form } from "react-final-form";
import { Button, ButtonToolbar, CheckTree } from "rsuite";
import FormSuite from "rsuite/Form";
import styles from "../../../../../../../../styles/Settings.module.css";
import orgRolesData from "../../../data/orgRolesData.json";

/**
 * 
 * @param prop - `permissions`, `setPermissions`, `onNext`, `onPrevious`
 * 
 * @returns The permission section of create role modal
 */
export default function Permission(prop) {

    const { permissions, setPermissions, onNext, onPrevious } = prop;

    const onUpdate = async (values) => {

        onNext();
        setPermissions(values.permissions);
    };

    return (
        <div className={ styles.addUserMainDiv }>

            <div>
                <Form
                    onSubmit={ onUpdate }
                    initialValues={ {
                        permissions: permissions
                    } }
                    render={ ({ handleSubmit, form }) => (
                        <FormSuite
                            layout="vertical"
                            className={ styles.addUserForm }
                            onSubmit={ () => { handleSubmit().then(form.restart); } }
                            fluid>
                            <Field
                                name="permissions"
                                render={ ({ input }) => (
                                    <FormSuite.Group controlId="checkbox">
                                        <FormSuite.Control
                                            { ...input }
                                            name="checkbox"
                                            accepter={ CheckTree }
                                            data={ orgRolesData }
                                            defaultExpandItemValues={ [ "/permission" ] }
                                            cascade
                                        />
                                        <FormSuite.HelpText>Assign permission for the role</FormSuite.HelpText>
                                    </FormSuite.Group>
                                ) }
                            />

                            <div className="buttons">
                                <FormSuite.Group>
                                    <ButtonToolbar>
                                        <Button
                                            className={ styles.addUserButton }
                                            size="lg"
                                            appearance="ghost"
                                            type="submit"
                                            onClick={ onPrevious }
                                        >
                                            Back
                                        </Button>
                                        <Button
                                            className={ styles.addUserButton }
                                            size="lg"
                                            appearance="primary"
                                            type="submit">
                                            Next
                                        </Button>
                                    </ButtonToolbar>
                                </FormSuite.Group>

                            </div>
                        </FormSuite>
                    ) }
                />

            </div>
        </div>
    );
}
