Notes

import React, { useEffect } from 'react';
import { FormattedMessage } from 'react-intl';
import clsx from 'clsx';
import moment from 'moment';
import {
Checkbox,
Radio,
Typography,
InputLabel,
TextField,
} from '@material-ui/core';
import Calendar from 'icons/Calendar';
import Card from '@highradius/g4_ui_components/lib/components/molecules/Card';
import FlexBox from 'components/FlexBox';
import DatePicker from 'components/DatePicker';
import TimePicker from 'components/TimePicker';
import { useSelector } from 'react-redux';
import CustomSelect from '@highradius/g4_ui_components/lib/components/atoms/Select';
import messages from '../messages';
import { useIngestionJobScheduleStyles } from '../styles';
import { selectRecurringLoadData } from '../selectors';

const schedulerConstants = {
ONETIME: 'ONETIME',
DAILY: 'DAILY',
CUSTOM: 'CUSTOM',
};

const addDataOptions = [
{
key: 0,
text: 'Append Only',
subtext: 'All rows will be added at the end - duplicates possible',
},
{
key: 1,
text: 'Replace All',
subtext: 'All previous rows will be removed and new rows will be added',
},
{
key: 2,
text: 'Merge',
subtext:
'Append new primary key values, update existing primary key values',
},
];

const schedulerConfig = [
{
key: schedulerConstants.ONETIME,
icon: <Calendar />,
title: <FormattedMessage {...messages.oneTime} />,
},
{
key: schedulerConstants.DAILY,
icon: <Calendar />,
title: <FormattedMessage {...messages.daily} />,
},
{
key: schedulerConstants.CUSTOM,
icon: <Calendar />,
title: <FormattedMessage {...messages.custom} />,
},
];

interface Props {
schedulerData: any;
handleChange: (...any) => void;
recurringData?: any;
overviewStyle?: { root?: string; daysDiv?: string; cards?: string };
}

const RecurringLoadTab = ({
schedulerData,
handleChange,
recurringData,
overviewStyle = { root: '', daysDiv: '', cards: '' },
}: Props) => {
const classes = useIngestionJobScheduleStyles();
const [recurringLoadData, setRecurringLoadData] = React.useState<any>(null);

const recurringLoadDataFromSelc = useSelector(selectRecurringLoadData);

useEffect(() => {
if (recurringData) {
setRecurringLoadData(recurringData);
}
}, [recurringData]);

useEffect(() => {
if (!recurringData) {
setRecurringLoadData(recurringLoadDataFromSelc);
}
}, [recurringLoadDataFromSelc]);

useEffect(() => {
let type = '';
if (schedulerData?.days?.length === 1) {
type = schedulerConstants.ONETIME;
} else if (schedulerData?.days?.length === 7) {
type = schedulerConstants.DAILY;
} else if (
schedulerData?.days?.length > 1 &&
schedulerData?.days?.length < 7
) {
type = schedulerConstants.CUSTOM;
}
if (schedulerData?.days?.length && !schedulerData?.addDataChoice?.length) {
handleChange(
'addDataChoice',
addDataOptions?.[0]?.text,
recurringLoadData?.data[1]?.inputType === 'CHECKBOX',
);
}
handleChange('scheduler', type);
}, [schedulerData?.days]);

useEffect(() => {
if (
schedulerData?.scheduler === schedulerConstants.CUSTOM &&
!schedulerData?.repeatEvery &&
!schedulerData?.ends
) {
handleChange('interval', 25);
handleChange('frequency', frequency?.[0]?.value || '');
handleChange('ends', 'never');
handleChange('endDate', new Date());
}
}, [schedulerData?.scheduler]);

const handleScheduler = (type: string) => {
const schedulerType = type === schedulerData.scheduler ? '' : type;
let days: Array<number> = [];
switch (schedulerType) {
case schedulerConstants.DAILY:
days = moment.weekdays(true).map((_d, ind) => ind);
break;
case schedulerConstants.CUSTOM:
days = moment
.weekdays(true)
.map((_d, ind) => ind)
.filter((_d, index) => index % 2 === 0);
break;
case schedulerConstants.ONETIME:
days = [moment.weekdays(true)[0]].map((_d, ind) => ind);
break;
default:
break;
}
handleChange('days', days);
handleChange('scheduler', schedulerType);
};

const handleChangeDay = (day: number) => {
let newDays = [...schedulerData.days];
if (schedulerData.days?.indexOf(day) > -1) {
newDays = newDays.filter((obj) => day !== obj);
} else newDays.push(day);
handleChange('days', newDays);
};

const handleChangeTime = (date) => {
handleChange('time', new Date(date));
};

const handlePicklist = (text: string) => {
handleChange('addDataChoice', text);
};

const handleChangeDate = (props, name) => {
handleChange(name, new Date(props));
};

const handleChangeRadio = (value) => {
if (schedulerData?.ends === value) {
handleChange('ends', '');
} else {
handleChange('ends', value);
}
};

const renderDisplayDate = (par) =>
moment(new Date(par)).format('Do MMM, YYYY');

const getFieldToRender = ({
defaultValue,
parameterName,
displayName,
parameterType,
}) => {
switch (parameterType) {
case 'DATE':
return (
<DatePicker
name="date"
displayName="date"
value={schedulerData.date}
onChange={handleChangeDate}
renderDisplayDate={renderDisplayDate}
/>
);
case 'REF:timezone':
return (
<CustomSelect
fullWidth
name="timezone"
className={classes.selectStyle}
renderValue={(val) => `${val}`}
onChange={(e) => {
handleChange(e.target.name, e.target.value, true);
}}
/>
);
case 'NUMBER':
return (
<TextField
type="number"
value={schedulerData?.interval || 0}
variant="outlined"
name="interval"
onChange={(e) => {
handleChange(e.target.name, e.target.value);
}}
/>
);
case 'REF:frequency':
return (
<CustomSelect
name="frequency"
value={schedulerData?.frequency || ' '}
options={frequency}
renderValue={(val) => `${val}`}
onChange={(e) => {
handleChange(e.target.name, e.target.value);
}}
/>
);
default:
break;
}
return '';
};

const getAddDataOptionComponent = ({ key, text, subtext }) => (
<Card
variant="outlined"
classes={{
cardRoot: clsx(classes.addDataOption, {
[classes.selected]: schedulerData.addDataChoice === text,
}),
cardBody: classes.addDataOptionContent,
}}
key={key}
onClick={() =>
handleChange(
'addDataChoice',
text,
recurringLoadData?.data[1]?.inputType === 'CHECKBOX',
)
}
>
<>
{recurringLoadData.data[1]?.inputType === 'CHECKBOX' ? (
<Checkbox
className={classes.check}
size="small"
onClick={() => handlePicklist(text)}
checked={schedulerData.addDataChoice.indexOf(text) > -1}
/>
) : (
<Radio
value="0"
size="small"
color="secondary"
checked={schedulerData.addDataChoice[0] === text}
onClick={() =>
handleChange(
'addDataChoice',
text,
recurringLoadData.data[1]?.inputType === 'CHECKBOX',
)
}
/>
)}
<FlexBox direction="column" alignItems="flex-start">
<Typography variant="body2">{text}</Typography>
<Typography variant="subtitle1" color="textSecondary">
{subtext}
</Typography>
</FlexBox>
</>
</Card>
);

const handleParameter = (name: { parameterName: any }) => {
switch (name?.parameterName) {
case 'schedule':
return (
<>
<FlexBox direction="column">
<></>

<FlexBox className={classes.wrapperDiv}>
{schedulerConfig.map(({ icon, title, key }) => (
<div
className={clsx(classes.cardWrapper, overviewStyle.cards)}
>
<Card
onClick={() => handleScheduler(key)}
classes={{
cardRoot: clsx(classes.card, {
[classes.selected]: schedulerData.scheduler === key,
}),
}}
variant="outlined"
>
<>
{React.cloneElement(icon, {
className: clsx(classes.dailyImg, {
[classes.selectedImg]:
schedulerData.scheduler === key,
}),
})}
</>
</Card>
<Typography variant="subtitle1">{title}</Typography>
</div>
))}
</FlexBox>
</FlexBox>
<FlexBox direction="column">
<Typography variant="body2">
<FormattedMessage {...messages.scheduledDays} />
</Typography>
<FlexBox
className={clsx(overviewStyle.daysDiv, classes.checkBoxDiv)}
>
{moment.weekdays(true).map((day, index) => (
<Typography variant="body1" display="inline">
<Checkbox
key={day}
onClick={() => handleChangeDay(index)}
checked={schedulerData?.days?.indexOf(index) > -1}
/>
{day}
</Typography>
))}
</FlexBox>
</FlexBox>
<FlexBox className={classes.bodyWrapper}>
<Typography variant="body2">
<FormattedMessage {...messages.startDate} />
</Typography>
<DatePicker
name="date"
displayName="date"
value={schedulerData.date}
onChange={handleChangeDate}
renderDisplayDate={renderDisplayDate}
/>
</FlexBox>

{schedulerData?.scheduler === schedulerConstants.CUSTOM ? (
<>
<FlexBox className={classes.bodyWrapper}>
<Typography variant="body2">
<FormattedMessage {...messages.repeatEvery} />
</Typography>
<FlexBox className={classes.rowWrapper}>
<TextField
type="number"
value={schedulerData?.interval || 0}
variant="outlined"
name="interval"
onChange={(e) => {
handleChange(e.target.name, e.target.value);
}}
/>
<CustomSelect
name="frequency"
value={schedulerData?.frequency || ' '}
options={frequency}
renderValue={(val) => `${val}`}
onChange={(e) => {
handleChange(e.target.name, e.target.value);
}}
/>
</FlexBox>
</FlexBox>
<FlexBox className={classes.bodyWrapper}>
<Typography variant="body2">
<FormattedMessage {...messages.ends} />
</Typography>

<FlexBox className={classes.rowWrapper}>
<InputLabel>
<Radio
checked={schedulerData?.ends === 'never'}
onClick={() => handleChangeRadio('never')}
/>
<FormattedMessage {...messages.never} />
</InputLabel>
<InputLabel>
<Radio
checked={schedulerData?.ends === 'on'}
onClick={() => handleChangeRadio('on')}
/>
<FormattedMessage {...messages.on} />
</InputLabel>
<DatePicker
name="endDate"
displayName="endDate"
disabled={schedulerData?.ends === 'never'}
value={schedulerData.endDate}
onChange={handleChangeDate}
renderDisplayDate={renderDisplayDate}
/>
</FlexBox>
</FlexBox>
</>
) : (
<FlexBox className={classes.rowWrapper}>
<div>
<Typography variant="body2">
<FormattedMessage {...messages.timezone} />
</Typography>
<CustomSelect
fullWidth
name="timezone"
className={classes.selectStyle}
renderValue={(val) => `${val}`}
onChange={(e) => {
handleChange(e.target.name, e.target.value, true);
}}
/>
</div>
<div>
<Typography variant="body2">
<FormattedMessage {...messages.time} />
</Typography>
<TimePicker
value={schedulerData.time}
onChange={handleChangeTime}
styles={{ width: classes.timeWidth }}
/>
</div>
</FlexBox>
)}
</>
);
case 'load_strategy':
return (
<FlexBox direction="column">
<Typography variant="body2">
<FormattedMessage {...messages.addDataHeading} />
</Typography>
<FlexBox direction="column" className={classes.optionWrapper}>
{addDataOptions.map((opt) => getAddDataOptionComponent(opt))}
</FlexBox>
</FlexBox>
);
default:
return null;
}
};

return (
<div className={clsx(classes.root, overviewStyle.root)}>
{recurringLoadData?.data?.map((rec: any) => handleParameter(rec))}
</div>
);
};

export default RecurringLoadTab;