Notes

/**
*
* ReasoncodeAdd
*
*/

import React, { memo, useEffect, useState } from 'react';
// import PropTypes from 'prop-types';
// import styled from 'styled-components';

import { FormattedMessage } from 'react-intl';
import messages from './messages';
import { Button, Grid, Typography, TextField } from '@material-ui/core';
import CustomDialog from '@highradius/g4_ui_components/lib/components/molecules/CustomDialog';

import Select from '@highradius/g4_ui_components/lib/components/atoms/Select';
import { makeStyles } from '@material-ui/core/styles';
import SelectBox from '@highradius/g4_ui_components/lib/components/atoms/SelectBox'

const useStyles = makeStyles((theme) => ({
SelectStyles: {
width: '100%',
},

itemStyle: {
marginTop: theme.typography.pxToRem(10),
},
selectbox:{
backgroundColor:'white'
}
}));

function ReasoncodeAdd(props) {
const classes = useStyles();
console.log(props.show);
const [reasonAddDialog, setreasonAddDialog] = React.useState(props.show);
const [dialogData, setDialogData] = useState({
code: '',
description: '',
systemReasonCode: '',
});



console.log(props.data);

useEffect(() => {
console.log('calling useEffect');
if (props.show === true) {
openReasonAddDialog();
props.getSystemReasonCodes();
}
}, [props.show]);

const closeReasonAddDialog = () => {
console.log(reasonAddDialog);
setreasonAddDialog(false);
//console.log(props.show);
props.onclose();

//setShow(false)
};

const handleChange = (e) => {
let name = e.target.name;
let value = e.target.value;
setreasonAddDialog(true);
setDialogData({ ...dialogData, [name]: value });
};

const openReasonAddDialog = () => {
setreasonAddDialog(true);
setDialogData(props.data);
//setShow(true)
};
const handleReasonAddDialog = () => {
console.log(dialogData);
console.log(props.mode);
setreasonAddDialog(false);
if(props.mode==='add')
props.onSubmit(dialogData)
if(props.mode==='edit')
props.onSubmit({
code: dialogData.code,
description: dialogData.description,
systemReasonCode: dialogData.systemReasonCode,
pkClientReasonCodeId:props.data.pkClientReasonCodeId,
})
props.onclose();
// closeReasonAddDialog();
};
const handleSelectBox=(selectedId)=>{
setDialogData({...dialogData,systemReasonCode:selectedId})
}

const getBuckets=(buckets)=>{
const arrayBuckets=[]
if(buckets && buckets.length>0){
buckets.map(bucket=>{
let b={
id:bucket.pkSystemReasonCodeId,
name:bucket.pkSystemReasonCodeId.toString()
}
arrayBuckets.push(b)
})
}
console.log(arrayBuckets);
return arrayBuckets
}


const getContent = () => (
<Grid container xs={12} direction="column">
<Grid container item xs={12} className={classes.itemStyle}>
<Grid item xs={12}>
<Typography variant="body1">Code Name</Typography>
<TextField
fullWidth
variant="outlined"
name="code"
value={dialogData?.code}
onChange={(e) => {
handleChange(e);
}}
/>
</Grid>
</Grid>
<Grid container item xs={12} className={classes.itemStyle}>
<Grid item xs={12}>
<Typography variant="body1">Description</Typography>
</Grid>
<Grid item xs={12}>
<TextField
fullWidth
variant="outlined"
name="description"
rows={5}
multiline
value={dialogData?.description}
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} className={classes.itemStyle}>
<Typography variant="body1">Code Bucket</Typography>
<SelectBox
defaultValue={dialogData?.systemReasonCode}
disableClearable
handleChange={(e,selectedId)=>{handleSelectBox(selectedId)}}
className={classes.selectbox}
options={getBuckets(props.bucketData)}
/>
</Grid>
</Grid>
</Grid>
);

return (
<div className={classes.root}>
<Button />
<CustomDialog
useDialog={{
dialogState: { open: reasonAddDialog },
closeDialog: closeReasonAddDialog,
}}
onCloseClick={closeReasonAddDialog}
header={props.mode === 'add' ? 'Add reason Code' : 'Edit Reason Code'}
topDivider
contentHead={getContent()}
actions={[
<Button variant="text" onClick={closeReasonAddDialog}>
Cancel
</Button>,
<Button variant="contained" onClick={handleReasonAddDialog}>
{props.mode==='add'?'Add':'Save'}
</Button>,
]}
/>
</div>
);
}

ReasoncodeAdd.propTypes = {};

export default memo(ReasoncodeAdd);