Notes

/**
* @author biswabijayee.m
*/
import React from 'react';
import {
Button,
Grid,
Typography,
TextField,
Tooltip,
InputLabel,
Radio,
RadioGroup,
FormControlLabel,
} from '@material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import { useInjectReducer } from 'utils/injectReducer';
import { useInjectSaga } from 'utils/injectSaga';
import { STARTS_WITH_ALPHABETS_REGEX } from 'utils/constants';
import CustomSelect from '@highradius/g4_ui_components/lib/components/atoms/Select';
import DialogWrapper from 'components/Dialog';
import messages from '../messages';
import * as ACTIONS from '../actions';
import * as SELECTORS from '../selectors';
import reducer from '../reducer';
import saga from '../saga';
import { useReasonCodeStyles } from '../styles';

const initialState = {
code: '',
description: '',
systemReasonCode: '',
isActive: 'true',
};

const errObj = {
code: false,
systemReasonCode: false,
};

function AddReasonCodeDialog({ uxManager }: ReasonCodeAddModalProps) {
useInjectReducer({ key: 'reasonCode', reducer });
useInjectSaga({ key: 'reasonCode', saga });

const classes = useReasonCodeStyles();

const [dialogData, setDialogData] = React.useState<any>(initialState);
const [validationFailed, setValidationFailed] = React.useState<any>(errObj);
const [button, setButton] = React.useState(false);

const dispatch = useDispatch();

React.useEffect(() => {
dispatch(ACTIONS.fetchReasonCodeBucketApiStart());
}, []);

React.useEffect(() => {
const error = Object.values(validationFailed).includes(true);
const state = dataCheck() || error;
setButton(state);
}, [validationFailed]);

const { data: buckets } = useSelector(
SELECTORS.selectReasonCodeDropdownState,
);

const dataCheck = () => !dialogData.code || !dialogData.systemReasonCode;

const handleClose = () => {
setValidationFailed(errObj);

uxManager.dispatch(uxManager.config.actions.toggleDialog());
};

const handleValidation = (e) => {
const { name, value } = e.target;
let errorFlag = false;
let newObj = {};
switch (name) {
case 'code':
if (
value.toString().trim() === null ||
value.toString().trim().match(STARTS_WITH_ALPHABETS_REGEX) === null
) {
errorFlag = true;
newObj = { [name]: true };
}
break;
case 'systemReasonCode':
if (!value.toString().trim()) {
errorFlag = true;
newObj = { [name]: true };
}
break;
default:
return;
}
if (!errorFlag) {
setValidationFailed((x) => ({ ...x, [name]: errorFlag }));
} else {
setValidationFailed((x) => ({ ...x, ...newObj }));
}
};

const handleChange = (
e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
) => {
const { name, value } = e.target;
setDialogData({ ...dialogData, [name]: value });
handleValidation(e);
};

const handleReasonAddDialog = () => {
const params = {
data: {
...dialogData,
systemReasonCode: {
pkSystemReasonCodeId: dialogData.systemReasonCode || null,
},
isActive: dialogData.isActive === 'true',
},
refresh:
uxManager?.context?.reason_code_listing_grid?.functions?.refreshGrid,
};
dispatch(ACTIONS.addReasonCodeApi(params));
handleClose();
};

const getTooltipTitle = () => {
if (!dialogData.code?.toString()?.trim())
return <FormattedMessage {...messages.fieldRequired} />;
if (!STARTS_WITH_ALPHABETS_REGEX.test(dialogData.code)) {
return <FormattedMessage {...messages.validationError} />;
}
if (!dialogData.systemReasonCode?.toString()?.trim())
return <FormattedMessage {...messages.fieldRequired} />;
return '';
};

const handleSelectBox = (e: { target: { value: any } }) => {
setDialogData({ ...dialogData, systemReasonCode: e.target.value });
handleValidation(e);
};

const renderBucketValue = (value) => {
const bucket = buckets.find((buck) => buck.pkSystemReasonCodeId === value);
return `${bucket.code} - ${bucket.description}`;
};

const getContent = () => (
<Grid container xs={12} direction="column" className={classes.itemStyle}>
<Grid container item xs={12}>
<Grid item xs={12}>
<InputLabel required>
<FormattedMessage {...messages.codeName} />
</InputLabel>
<Tooltip title={validationFailed.code ? getTooltipTitle() : ''}>
<TextField
data-testid="addReasonCodeName"
onBlur={(e) => handleValidation(e)}
fullWidth
variant="outlined"
name="code"
value={dialogData?.code}
onChange={(e) => {
handleChange(e);
}}
error={validationFailed.code}
/>
</Tooltip>
</Grid>
</Grid>
<Grid container item xs={12}>
<Grid item xs={12}>
<Typography variant="body1">
<FormattedMessage {...messages.description} />
</Typography>
</Grid>
<Grid item xs={12}>
<TextField
data-testid="addReasonCodeDescription"
fullWidth
variant="outlined"
name="description"
rows={5}
multiline
value={dialogData?.description}
onChange={handleChange}
/>
</Grid>
</Grid>
<Grid container item xs={12}>
<InputLabel required>
<FormattedMessage {...messages.codeBucket} />
</InputLabel>
<Tooltip
title={validationFailed.systemReasonCode ? getTooltipTitle() : ''}
>
<CustomSelect
data-testid="addReasonCodeTaskDelayReasonGroup"
fullWidth
onBlur={(e) => handleValidation(e)}
value={dialogData?.systemReasonCode}
renderValue={renderBucketValue}
MenuProps={{ classes: { paper: classes.menuStyle } }}
onChange={handleSelectBox}
name="systemReasonCode"
options={buckets?.map((bucket) => ({
value: bucket.pkSystemReasonCodeId,
displayValue: `${bucket.code} - ${bucket.description}`,
}))}
error={validationFailed.systemReasonCode}
/>
</Tooltip>
</Grid>
<Grid container item xs={12}>
<InputLabel>
<FormattedMessage {...messages.activeLabel} />
</InputLabel>
<RadioGroup
data-testid="addReasonCodeActive"
row
name="isActive"
defaultValue="top"
value={dialogData.isActive}
onChange={handleChange}
className={classes.activeLabel}
>
<FormControlLabel
value="true"
control={<Radio />}
label="Yes"
labelPlacement="start"
/>
<FormControlLabel
value="false"
control={<Radio />}
label="No"
labelPlacement="start"
/>
</RadioGroup>
</Grid>
</Grid>
);

return (
<DialogWrapper
className={classes.root}
header={<FormattedMessage {...messages.header} />}
onClose={handleClose}
content={getContent()}
actions={[
<Button
data-testid="addReasonCodeCancel"
variant="text"
onClick={handleClose}
>
<FormattedMessage {...messages.cancel} />
</Button>,
<Button
data-testid="addReasonCodeSave"
variant="contained"
onClick={handleReasonAddDialog}
disabled={button}
>
<FormattedMessage {...messages.save} />
</Button>,
]}
/>
);
}

type ReasonCodeAddModalProps = {
uxManager: any;
};

export default AddReasonCodeDialog;