<reponame>Voloshch/storage<filename>src/Components/Clients/clientsModal.js
/* eslint-disable camelcase */
import React, { useState, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Modal, Header, Button, Dropdown } from 'semantic-ui-react';
import PropTypes from 'prop-types';
import messages from '../../Messages';
import { injectIntl } from 'react-intl';
import ClientForm from './clientForm';
import { createIscsiClientActionAndFetch, editIscsiClientActionAndFetch } from '../../AppActions';
import { BILLING_USER_NAME } from '../../AppConstants';

const ClientModal = ({ instance, edit, intl, noContent }) => {
    const [open, setOpen] = useState(false);
    const dispatch = useDispatch();
    const user = useSelector(state => state.StorageStore.user);

    const assignDisks = (item) => (
        item.disks
            .filter(disk => disk.priority === 0)
            .map(disk => disk = { disk_name: disk.value })
    );

    const mapPropsToApi = (item) => (
        {
            account: user.account,
            client_name: item.name,
            assigned_disks: assignDisks(item),
            chap_username: item.username,
            chap_password: <PASSWORD>,
            owner: item.owner
        }
    );

    const mapClientToProps = (item) => (
        {
            name: item.client_name,
            owner: item.owner,
            isAuthChecked: item.isAuthChecked,
            disks: item.assigned_disks,
            username: item.chap_username,
            password: <PASSWORD>
        }
    );

    const handleClose = useCallback(
        () => {
            setOpen(false);
        },
        [setOpen]
    );

    const handleSubmit = useCallback(
        (values) => {
            handleClose();
            let payload = mapPropsToApi(values);
            edit ?
                dispatch(editIscsiClientActionAndFetch(instance.client_name, payload)) :
                dispatch(createIscsiClientActionAndFetch(payload));
        },
        [handleClose, edit, instance, dispatch]     // eslint-disable-line react-hooks/exhaustive-deps
    );

    const clientButton = edit ? <Dropdown.Item text={intl.formatMessage(messages.editClient)} onClick={() => setOpen(true)} /> :
        <Button
            onClick={() => setOpen(true)}
            primary
            icon={noContent && 'plus'}
            labelPosition={noContent && 'left'}
            content={intl.formatMessage(messages.createClient)}
        />;

    const headerContent = edit ? intl.formatMessage(messages.editClient) : intl.formatMessage(messages.createNewClient);

    const clientForm = <ClientForm
        open={open}
        handleClose={handleClose}
        onSubmit={handleSubmit}
        isEdit={edit}
        initialValues={edit && mapClientToProps(instance)}
    />;

    return <>
        { user.role !== BILLING_USER_NAME && <>
            {clientButton}
            <Modal open={open} size="tiny">
                <Header content={headerContent} />
                <Modal.Content>{clientForm}</Modal.Content>
            </Modal>
        </>}
    </>;
};

ClientModal.propTypes = {
    instance: PropTypes.object,
    edit: PropTypes.bool,
    intl: PropTypes.any,
    noContent: PropTypes.bool
};

export default injectIntl(ClientModal);
