Notes

/**
* AddFiscalCalendarDrawer
* @author gourav.sharma
*/

import React from 'react';
import moment from 'moment';
import { FormattedMessage } from 'react-intl';
import {
Typography,
TextField,
Grid,
InputAdornment,
Fab,
ButtonGroup,
Button,
Switch,
Tooltip,
} from '@material-ui/core';
import {
Search as SearchIcon,
Error as ErrorIcon,
Close as CloseIcon,
} from '@material-ui/icons';
import Select from '@highradius/g4_ui_components/lib/components/atoms/Select';
import Typotool from '@highradius/g4_ui_components/lib/components/atoms/Typotool';
import CustomMenu from 'components/Menu';
import {
ALPHA_NUMERIC_REGEX,
STARTS_WITH_ALPHABETS_REGEX,
} from 'utils/constants';
import messages from './messages';
import { useStyles } from './styles';

function AddFiscalCalendarDrawer({
autoFillData,
mode,
addParamsHandler,
handleClosingUnitsToDelete,
handleSearch,
searchdata,
handleClosingUnitIds,
nameSetter,
resetSearch,
}: AddFiscalCalendarDrawerProps) {
const classes = useStyles();

const [selectComponentValues, setSelectComponentValues] = React.useState({
currentYear: '',
endMonth: '',
quarter1: '',
quarter2: '',
quarter3: '',
quarter4: '',
});
const [closingUnits, setClosingUnits] = React.useState<any>([]);
const [switchState, setSwitchState] = React.useState(false);
const [name, setName] = React.useState('');
const [searchFieldLength, setSearchFieldLength] = React.useState(0);
const count = React.useRef(0);
const validation = React.useRef(false);
const [validationBox, setValidationBox] = React.useState(false);
const [searchTerm, setSearchTerm] = React.useState<any>(null);
const [year, setYear] = React.useState<any>(
// eslint-disable-next-line no-nested-ternary
mode === 'Edit'
? autoFillData.isCurrentYear
? 'Current Year'
: 'Current Year + 1'
: 'Current Year',
);
const timerRef = React.useRef<any>(null);
const searchEl = React.useRef<any>(null);

React.useEffect(() => {
if (mode === 'Edit') {
setClosingUnits(autoFillData?.closingUnitDetails);
setName(autoFillData.fiscalCalendarName);
} else {
setClosingUnits([]);
}
}, [autoFillData?.closingUnitDetails]);

React.useEffect(
() => () => {
setClosingUnits([]);
validation.current = false;
resetSearch();
if (mode === 'Edit') nameSetter(autoFillData.fiscalCalendarName);
},
[],
);

const monthsCalculator = (event) => {
if (event.target.value) {
setValidationBox(false);
const index = moment
.months()
.findIndex((value) => value === event.target.value);
if (count.current === 0) {
count.current += 1;
const { currentYear } = selectComponentValues;
setSelectComponentValues({
currentYear,
endMonth: moment.months()[(index + 1) % 12],
quarter1: moment.months()[(index + 2) % 12],
quarter2: moment.months()[(index + 5) % 12],
quarter3: moment.months()[(index + 8) % 12],
quarter4: moment.months()[(index + 11) % 12],
});
}
setSelectComponentValues((state) => {
const data = { ...event.target };
data.values = state;
addParamsHandler(data);
return state;
});
} else {
setValidationBox(true);
}
};

const handleSelectChange = (event) => {
let fieldValue = moment
.months()
.find((value) => value === event.target.value);
const buttonBool =
event.target.innerHTML === 'Current Year' ||
event.target.innerHTML === 'Current Year + 1';
if (buttonBool) {
fieldValue = event.target.innerHTML;
setYear(() => event.target.innerHTML);
}
const fieldId = event.target.name;
const { currentYear, endMonth, quarter1, quarter2, quarter3, quarter4 } =
selectComponentValues;
setSelectComponentValues({
currentYear: buttonBool ? fieldValue || '' : currentYear,
endMonth: fieldId === '1' ? fieldValue || '' : endMonth,

quarter1: fieldId === '2' ? fieldValue || '' : quarter1,
quarter2: fieldId === '3' ? fieldValue || '' : quarter2,
quarter3: fieldId === '4' ? fieldValue || '' : quarter3,
quarter4: fieldId === '5' ? fieldValue || '' : quarter4,
});
addParamsHandler(event.target);
};

const nameChangeHandler = (event) => {
setName(event.target.value);
nameSetter(event.target.value);
addParamsHandler(event.target);
};

const switchChangeHandler = (event) => {
addParamsHandler(event.target);
setSwitchState(!switchState);
};

const deleteMapping = (row) => {
if (searchFieldLength === 0) {
const closingUnitId = row.pkClosingUnitId;
handleClosingUnitsToDelete(closingUnitId);
const index = closingUnits.findIndex(
(value: any) => value.pkClosingUnitId === closingUnitId,
);
if (index > -1) {
setClosingUnits((initState) => {
const data = [...initState];
data.splice(index, 1);
return data;
});
}
}
};

const getListComponent = (rows) => {
if (rows && rows.length) {
return (
<Grid container direction="column">
{rows?.map((row) => (
<Grid
justifyContent="space-between"
alignItems="center"
container
direction="row"
className={classes.listItem}
>
<Typotool>
<Typography variant="body1">{row.name}</Typography>
</Typotool>
<Fab size="small" className={classes.closeIcon}>
<CloseIcon onClick={() => deleteMapping(row)} />
</Fab>
</Grid>
))}
</Grid>
);
}
return (
<Typography className={classes.noData} variant="body1">
No Data <ErrorIcon className={classes.ErrorIcon} />
</Typography>
);
};

const handleSelection = (option) => {
handleClosingUnitIds(option.pkClosingUnitId);
const closingUnitId = option.pkClosingUnitId;
if (!closingUnits) {
setClosingUnits([option]);
setSearchFieldLength(0);
setSearchTerm('');
} else {
const index = closingUnits.findIndex(
(value: any) => value.pkClosingUnitId === closingUnitId,
);
if (index === -1) {
setClosingUnits((init) => {
const data = [option];
return [...init, ...data];
});
}
setSearchFieldLength(0);
setSearchTerm('');
}
};

const handleKeyPress = (event) => {
setSearchTerm(event.target.value);
if (event.target.value.length >= 3) {
clearTimeout(timerRef.current);
timerRef.current = setTimeout(() => {
handleSearch(event.target.value);
setSearchFieldLength(() => event.target.value.length);
}, 2000);
}
};

const getStartMonthDefaultValue = () => {
if (mode === 'Edit') {
return moment.months()[autoFillData.yearStartDate - 1];
}
return null;
};

const getEndMonthDefaultValue = () => {
if (count.current === 1) {
return selectComponentValues.endMonth;
}
if (mode === 'Add') {
return null;
}
return moment.months()[autoFillData.yearEndDate - 1];
};

const getQuarter1DefaultValue = () => {
if (count.current === 1) {
return selectComponentValues.quarter1;
}
if (mode === 'Add') {
return null;
}
return moment.months()[autoFillData.quarterOneEndDate - 1];
};

const getQuarter2DefaultValue = () => {
if (count.current === 1) {
return selectComponentValues.quarter2;
}
if (mode === 'Add') {
return null;
}
return moment.months()[autoFillData.quarterTwoEndDate - 1];
};

const getQuarter3DefaultValue = () => {
if (count.current === 1) {
return selectComponentValues.quarter3;
}
if (mode === 'Add') {
return null;
}
return moment.months()[autoFillData.quarterThreeEndDate - 1];
};
const getQuarter4DefaultValue = () => {
if (count.current === 1) {
return selectComponentValues.quarter4;
}
if (mode === 'Add') {
return null;
}
return moment.months()[autoFillData.quarterFourEndDate - 1];
};

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

const getTooltipTitleForSelect = () => {
if (!validationBox) {
return <FormattedMessage {...messages.fieldRequired} />;
}

return '';
};

return (
<div>
<Grid container direction="row">
<div>
<Typography
variant="body1"
classes={{ root: classes.labelRootCalendar }}
>
<FormattedMessage {...messages.calendarName} />
<span className={classes.mandatory}>*</span>
</Typography>
<Tooltip title={getTooltipTitle()}>
<TextField
error={Boolean(getTooltipTitle()) && validation.current}
inputProps={{
onBlur: () => {
validation.current = true;
},
}}
value={name}
autoComplete="off"
classes={{ root: classes.input }}
variant="outlined"
onChange={nameChangeHandler}
/>
</Tooltip>
</div>
<div className={classes.switchWrapper}>
<Typography
variant="body1"
classes={{ root: classes.labelRootDefault }}
>
<FormattedMessage {...messages.default} />
</Typography>
<Switch
onChange={switchChangeHandler}
classes={{
root: classes.switchRoot,
track: classes.switchTrack,
}}
value={switchState}
className={classes.switch}
defaultChecked={mode === 'Edit' ? autoFillData.isDefault : false}
/>
</div>
</Grid>
<Grid className={classes.closingUnitsWrapper} direction="column">
<Typography
variant="body1"
classes={{ root: classes.labelRootDefault }}
>
<FormattedMessage {...messages.closingUnitsMapped} />
</Typography>
<div className={classes.searchwrapper}>
<TextField
autoComplete="off"
value={searchTerm}
onChange={handleKeyPress}
classes={{ root: classes.closingUnitInput }}
variant="outlined"
inputRef={searchEl}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
/>
</div>
<div className={classes.listWrapper}>
{getListComponent(closingUnits)}
</div>
<CustomMenu
open={Boolean(searchFieldLength > 3)}
anchorEl={searchEl.current}
classes={{ paper: classes.popoverPaper }}
onClose={() => {
setSearchTerm('');
setSearchFieldLength(0);
}}
loading={searchdata.loading}
options={searchdata.data.ArrayList?.map((option) => ({
handleSelect: () => handleSelection(option),
value: option.pkClosingUnitId,
displayValue: (
<Typography variant="body1">{option.name}</Typography>
),
}))}
/>
</Grid>
<Typography variant="body1" className={classes.calendarDetails}>
<FormattedMessage {...messages.calendarDetails} />
</Typography>
<Grid container direction="column" xs={12}>
<Grid
container
direction="row"
alignItems="center"
justifyContent="space-between"
className={classes.currentYear}
>
<Typography
variant="body1"
classes={{ root: classes.labelRootCurrentYear }}
>
<FormattedMessage {...messages.currentYear} />
</Typography>
<>
<ButtonGroup variant="contained" className={classes.buttonGroup}>
<Button
onClick={handleSelectChange}
className={
year === 'Current Year'
? classes.currentYearSelected
: classes.currentYearButton
}
>
<FormattedMessage {...messages.currentYearMessage} />
</Button>
<Button
className={
year === 'Current Year + 1'
? classes.nextYearSelected
: classes.nextYearButton
}
onClick={handleSelectChange}
>
<FormattedMessage {...messages.nextYearMessage} />
</Button>
</ButtonGroup>
</>
</Grid>
<Grid container direction="row" xs={12} className={classes.columnWrap}>
<div className={classes.dropDownWrap1}>
<Typography
variant="body1"
classes={{ root: classes.labelRootCalendar }}
>
<FormattedMessage {...messages.startMonth} />
<span className={classes.mandatory}>*</span>
</Typography>
<Tooltip title={getTooltipTitleForSelect()}>
<Select
error={validationBox}
onBlur={(e) => {
monthsCalculator(e);
}}
onChange={monthsCalculator}
name="0"
options={moment.months().map((value) => ({ value }))}
defaultValue={getStartMonthDefaultValue()}
menuClassName={classes.dropDown}
/>
</Tooltip>
</div>
<div className={classes.dropDownWrap2}>
<Typography
variant="body1"
classes={{ root: classes.labelRootCalendar }}
>
<FormattedMessage {...messages.endMonth} />
</Typography>
<Select
value={getEndMonthDefaultValue()}
onChange={handleSelectChange}
name="1"
options={moment.months().map((value) => ({ value }))}
menuClassName={classes.dropDown}
/>
</div>
</Grid>
<Grid container direction="row" xs={12} className={classes.columnWrap}>
<div className={classes.dropDownWrap1}>
<Typography
variant="body1"
classes={{ root: classes.labelRootCalendar }}
>
<FormattedMessage {...messages.quarter1} />
</Typography>
<Select
value={getQuarter1DefaultValue()}
name="2"
onChange={handleSelectChange}
options={moment.months().map((value) => ({ value }))}
menuClassName={classes.dropDown}
/>
</div>
<div className={classes.dropDownWrap2}>
<Typography
variant="body1"
classes={{ root: classes.labelRootCalendar }}
>
<FormattedMessage {...messages.quarter2} />
</Typography>
<Select
value={getQuarter2DefaultValue()}
name="3"
onChange={handleSelectChange}
options={moment.months().map((value) => ({ value }))}
menuClassName={classes.dropDown}
/>
</div>
</Grid>
<Grid container direction="row" xs={12} className={classes.columnWrap}>
<div className={classes.dropDownWrap1}>
<Typography
variant="body1"
classes={{ root: classes.labelRootCalendar }}
>
<FormattedMessage {...messages.quarter3} />
</Typography>
<Select
value={getQuarter3DefaultValue()}
name="4"
onChange={handleSelectChange}
options={moment.months().map((value) => ({ value }))}
menuClassName={classes.dropDown}
/>
</div>
<div className={classes.dropDownWrap2}>
<Typography
variant="body1"
classes={{ root: classes.labelRootCalendar }}
>
<FormattedMessage {...messages.quarter4} />
</Typography>
<Select
value={getQuarter4DefaultValue()}
name="5"
onChange={handleSelectChange}
options={moment.months().map((value) => ({ value }))}
menuClassName={classes.dropDown}
/>
</div>
</Grid>
</Grid>
</div>
);
}

type AddFiscalCalendarDrawerProps = {
autoFillData: any;
mode: string;
addParamsHandler: any;
handleSearch: any;
searchdata: any;
handleClosingUnitIds: any;
nameSetter: any;
resetSearch: any;
handleClosingUnitsToDelete: any;
};

export default AddFiscalCalendarDrawer;