/* eslint-disable @typescript-eslint/no-empty-function */

import React, { useEffect, useState } from 'react';

import { useDispatch } from 'react-redux';
import {
Chip,
Divider,
MenuItem,
Stack,
TableCell,
TableRow,
TextField,
Typography,
} from '@mui/material';
import DOMPurify from 'dompurify';
import CloseIcon from '@mui/icons-material/Close';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import { MuiButton } from 'components/reusable/MuiButton';
import { MuiDottedDivider } from 'components/autosuggest/reusable/Patterns';
import { Dropdown } from 'components/reusable/MuiSelect';
import theme from 'theme';
import EnterAdd from 'components/reusable/formElements/EnterAdd';
// import {
// CREATE_REGEX_CONFIG,
// GET_TEMPLATE_LIST,
// VALIDATE_REGEX_CONFIGS,
// modelsDataAction,
// } from 'store/actions/models';
import { showAlert } from 'store/actions/alert';
import { useApi, useAppId } from 'hooks';
// import { StoreType } from 'store/types/store/state';
import { tableBorderStyles } from 'components/search/spellings/SpellingsTab';
import { CommonTable } from 'components/common/CommonTable';
import { Loading } from 'components/reusable/Loading';
import { MuiHtmlTooltip } from 'components/reusable/MuiHTMLToolTip';
// import { template } from
'components/autosuggest/curations/promoted/PromotedSuggestions';
import { MLOpsService } from 'services';
import { BootstrapTooltip } from 'components/reusable/TooltipComp';

interface AddRegexConfigProps {
idForEdit: string;
editItem: any;
handleCloseDrawer: () => void;
handleListingApiCall: (postData?: any) => void;
}

export const AddRegexConfig = (props: AddRegexConfigProps) => {

const {
idForEdit,
editItem,
handleCloseDrawer,
handleListingApiCall,
} = props;

const dispatch = useDispatch();

const createRegExpConfigWrapperApi = useApi(
MLOpsService.createRegExpConfigWrapper
);
const getTemplateListApi = useApi(MLOpsService.getTemplateList);
const validateRegexConfigsApi = useApi(MLOpsService.validateRegexConfigs);
const getAppId = useAppId('search');
const [name, setName] = useState('');
const [type, setType] = useState('');
const [pattern, setPattern] = useState('');
const [testConfigValue, setTestConfigValue] = useState('');
const [dropDownItems1, setDropdownItems1] = useState<any>([]);
const [dropDownItems2, setDropdownItems2] = useState<any>([]);
const [testResults, setTestResults] = useState<any>([]);
const [templateData, setTemplateData] = useState<any>();
const [loading, setLoading] = useState(false);
const [testingLoading, setTestingLoading] = useState(false);
// const { validateRegexConfigs } = useSelector(
// (store: StoreType) => store.modelsReducer
// );

// const dropDownItems1 = ['Term', 'Range', 'Sort'];

const dropdownProps1 = {
value: type,
setValue: setType,
placeholderText: 'Choose Type',
isCompact: true,
isResponse: idForEdit?.length > 0,
};
// const dropDownItems2 = [
// 'Number (real or decimal) followed by literal',
// 'Between / In Min Price to Max Price',
// 'Literal followed by a number (real or decimal)',
// ];
const dropdownProps2 = {
value: pattern,
setValue: setPattern,
placeholderText: 'Choose Pattern',
isCompact: true,
isResponse: idForEdit ? true : type === '',
};

const handleTestRegex = () => {

if (testConfigValue?.length !== 0) {
setTestingLoading(true);
const modifiedTemplateFields = templateData?.template_fields?.map(
(item: any) => {
delete item?.inputText;
if (item?.type !== 'literals') {
return {
...item,
value: item?.value?.map((innerItem: any) => {
delete innerItem?.inputText;
return innerItem?.value;
}),
};
}
return { ...item };
}
);

const dataToSend = {
// ...templateData,
name,
 description: templateData?.description,
template: templateData?.template,
// template_fields:templateData?.template_fields,
output_type: templateData?.output_type,
template_id: templateData?._id,
template_name: templateData?.name,
// template_id: templateData?._id,
// template_name: templateData?.template_name,
test_queries: testConfigValue?.split('\n')?.filter(item => item !== ''),
template_fields: modifiedTemplateFields,
example: 'rupees',
};
// dispatch(
// modelsDataAction(VALIDATE_REGEX_CONFIGS, {
// params: {
// path: '/v1/regex/pattern/validate',
// method: 'POST',
// },
// data: {
// params: {
// app_id: getAppId,
// },
// payload: dataToSend,
// },
// })
// )
validateRegexConfigsApi
.request({
params: {
path: '/v1/regex/pattern/validate',
method: 'POST',
},
data: {
params: {
app_id: getAppId,
},
payload: dataToSend,
},
})
.then((res: any) => {
setTestResults(res?.data?.data?.results);
setTestingLoading(false);
})
.catch((errors: { msg: string }[]) => {
dispatch(
showAlert({
message: errors?.[0]?.msg || 'Something went wrong',
severity: 'error',
})
);
setTestingLoading(false);
});
} else {
handleCloseDrawer();
}
};

const handleSaveConfig = () => {

const modifiedTemplateFields = templateData?.template_fields?.map(
 (item: any) => {
delete item?.inputText;
if (item?.type !== 'literals') {
return {
...item,
value: item?.value?.map((innerItem: any) => {
delete innerItem?.inputText;
return innerItem?.value;
}),
};
}
return { ...item };
}
);
const commonData = {
// ...templateData,
template_fields: modifiedTemplateFields,
test_queries: testConfigValue?.split('\n')?.filter(item => item !== ''),
name,
description: templateData?.description,
template: templateData?.template,
// template_fields:templateData?.template_fields,
output_type: templateData?.output_type,
template_id: templateData?._id,
template_name: templateData?.name,
_id: editItem?._id,
// template_id: templateData?._id,
// template_name: templateData?.template_name,
// test_queries: testConfigValue?.split('\n')?.filter(item => item !== ''),
// template_fields: modifiedTemplateFields,
example: 'rupees',
};
if (idForEdit) {
const dataToSend = {
...commonData,
};
// dispatch(
// modelsDataAction(CREATE_REGEX_CONFIG, {
// params: {
// path: '/v1/regex/pattern',
// method: 'PUT',
// },
// data: {
// params: {
// app_id: getAppId,
// },
// payload: [{ ...dataToSend }],
// },
// })
// );
createRegExpConfigWrapperApi
.request({
params: {
path: '/v1/regex/pattern',
method: 'PUT',
},
data: {
params: {
app_id: getAppId,
 },
payload: [{ ...dataToSend }],
},
})
.then((res: any) => {
setLoading(false);
handleCloseDrawer();
handleListingApiCall();
dispatch(
showAlert({
message: res?.data?.message,
severity: 'success',
})
);
})
.catch((errors: { msg: string }[]) => {
dispatch(
showAlert({
message: errors?.[0]?.msg || 'Something went wrong',
severity: 'error',
})
);
setLoading(false);
});
} else {
setLoading(true);
const dataToSend = {
...commonData,
name,
template_name: pattern,
template_id: templateData?._id,
};
// dispatch(
// modelsDataAction(CREATE_REGEX_CONFIG, {
// params: {
// path: '/v1/regex/pattern',
// method: 'POST',
// },
// data: {
// params: {
// app_id: getAppId,
// },
// payload: [{ ...dataToSend }],
// },
// })
// )
createRegExpConfigWrapperApi
.request({
params: {
path: '/v1/regex/pattern',
method: 'POST',
},
data: {
params: {
app_id: getAppId,
},
payload: [{ ...dataToSend }],
},
})
 .then((res: any) => {
setLoading(false);
handleCloseDrawer();
handleListingApiCall();
dispatch(
showAlert({
message: res?.data?.message,
severity: 'success',
})
);
})
.catch((errors: { msg: string }[]) => {
dispatch(
showAlert({
message: errors?.[0]?.msg || 'Something went wrong',
severity: 'error',
})
);
setLoading(false);
});
}
};

const propsData = {
page: 0,
rowsPerPage: 25,
handleChangePage: () => {},
handleChangeRowsPerPage: () => {},
// info: postWrapperMlOps?.data,
// msg: 'No Data',
// info: fieldData,
// loading: postWrapperMlOps?.loading,
columns: [
{ name: 'Query', p: '0px 8px' },
{ name: 'Match', p: '0px 8px' },
{ name: 'Values', p: '0px 8px' },
],
order: 1,
// order: sortOrder,
onRequestSort: () => {},
sortBy: '',
// includingHeaderList: returnIntersectionList(columns, sortableHeaders),
// rowCount: getList?.data?.data?.length,
fromFacetsCuration: true,
fromModelConfiguration: true,
height: 'fit-content',
};

useEffect(() => {
if (idForEdit) {
setName(editItem?.name);
const dropdownItem1 =
editItem?.output_type?.[0]?.toUpperCase() +
editItem?.output_type?.substring(1, editItem?.output_type?.length);
setType(dropdownItem1);
setDropdownItems1([dropdownItem1]);
setDropdownItems2([editItem]);
setPattern(editItem?.template_name);
setTestConfigValue(editItem?.example);
 const modifiedData = editItem?.template_fields?.map((item: any) => {
if (item?.type === 'grouped_literals') {
return {
...item,
value: item?.value?.map((it: any) => {
return {
inputText: '',
value: it,
};
}),
};
}
return {
...item,
inputText: '',
};
});
const data = {
...editItem,

template_fields: modifiedData,
};
setTemplateData(data);
} else {
setTemplateData({});
setDropdownItems1(['Term', 'Range', 'Sort']);
setPattern('');
// dispatch(
// modelsDataAction(GET_TEMPLATE_LIST, {
// params: {
// path: '/v1/regex/template/list',
// method: 'POST',
// },
// data: {
// payload: { app_id: getAppId },
// },
// })
// );
getTemplateListApi
.request({
params: {
path: '/v1/regex/template/list',
method: 'POST',
},
data: {
payload: { app_id: getAppId },
},
})
.then((res: any) => {
const filteredData = res?.data?.data?.filter(
(item: any) => item?.output_type === type.toLowerCase()
);
setDropdownItems2(filteredData);
})
.catch((errors: { msg: string }[]) => {
dispatch(
showAlert({
message: errors?.[0]?.msg || 'Something went wrong',
severity: 'error',
 })
);
// setLoading(false);
});
}
}, [type]);
useEffect(() => {
if (!idForEdit) {
if (dropDownItems2?.length !== 0) {
let data: any = dropDownItems2?.find(
(item: any) => item?.name === pattern
);

if (data !== undefined) {

const modifiedData = data?.template_fields?.map((item: any) => {
if (item?.type === 'grouped_literals') {
return {
...item,
value: item?.value?.map((it: any) => {
return {
inputText: '',
value: it,
};
}),
};
}
return {
...item,
inputText: '',
};
});
data = {
...data,
template_fields: modifiedData,
};
setTemplateData(data);
}
} else setTemplateData({});
}
}, [pattern]);

const disableLiteral = templateData?.template_fields?.some((item: any) =>

item?.value?.some((valueItem: any) => valueItem?.value?.length === 0)
);

const example = dropDownItems2?.filter(

(item: any) => item?.name === pattern
)?.[0]?.example;

return (
<Stack
spacing={2}
sx={{
width: '100%',
}}
>
<Stack
spacing={0.5}
sx={{
 padding: '16px 16px 0px 16px',
}}
>
<Typography
sx={{ color: theme.palette.text.secondary, fontSize: '12px' }}
>
Name
</Typography>
<TextField
autoComplete="off"
type="text"
placeholder="Enter a name"
variant="outlined"
value={name}
onChange={event => {
setName(event.target.value);
}}
size="small"
sx={{
width: '100%',
backgroundColor: 'white',
borderRadius: '6px',
}}
/>
</Stack>
<Stack
spacing={0.5}
sx={{
padding: '0px 16px',
}}
>
<Typography
sx={{ color: theme.palette.text.secondary, fontSize: '12px' }}
>
Type
</Typography>
<Dropdown {...dropdownProps1}>
{dropDownItems1?.map((item: string, menuIndex: number) => (
<MenuItem key={String(menuIndex)} value={item}>
{item}
</MenuItem>
))}
</Dropdown>
</Stack>
<Stack
spacing={0.5}
sx={{
padding: '0px 16px',
}}
>
<Typography
sx={{ color: theme.palette.text.secondary, fontSize: '12px' }}
>
Pattern
</Typography>
<Dropdown {...dropdownProps2}>
{dropDownItems2?.map((item: any, menuIndex: number) => (
<MenuItem
key={String(menuIndex)}
 value={idForEdit ? item?.template_name : item?.name}
>
{idForEdit ? item?.template_name : item?.name}
</MenuItem>
))}
</Dropdown>
{pattern && (
<>
<Typography
sx={{
fontSize: '12px',
color: theme.palette.text.secondary,
paddingLeft: '5px',
}}
>
<Stack direction="row" spacing={1}>
<Stack>Eg.</Stack>
<Stack
direction="row"
spacing={0.3}
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(example),
}}
></Stack>
</Stack>
</Typography>
<Divider />
</>
)}
</Stack>
{pattern && (
<Stack spacing={1}>
<Stack
spacing={1}
sx={{
padding: '0px 16px',
}}
>
<Typography
sx={{ fontSize: '12px', color: theme.palette.text.secondary }}
>
Fields
</Typography>
<Divider sx={{ borderStyle: 'dotted' }} />
{templateData?.template_fields?.map(
(template: any, templateIndex: number) => {
const literalsBtnDisable = templateData?.template_fields?.some(
(item: any, index4: number) => {
return (
index4 === templateIndex &&
item?.value?.some(
(valueItem: any) => valueItem?.value?.length === 0
)
);
}
);
return (
<>
{template?.type === 'literals' ? (
<Stack
key={String(templateIndex)}
spacing={1}
sx={{
padding: '8px',
border: `1px dotted ${theme.palette.text.disabled}`,
borderRadius: '6px',
}}
>
<Stack>
<Typography
sx={{
fontSize: '12px',
color: theme.palette.text.secondary,
display: 'flex',
alignItems: 'center',
gap: '0.3rem',
}}
>
{template?.text}
<MuiHtmlTooltip
title={
<Typography fontSize="13px">
{template?.description}
</Typography>
}
>
<InfoOutlinedIcon
sx={{
color: theme.palette.grey[500],
fontSize: '14px',
}}
/>
</MuiHtmlTooltip>
</Typography>
</Stack>
{template?.value?.length !== 0 && (
<Stack
direction="row"
sx={{
// padding: '0px 16px',
gap: '0.5rem',
flexWrap: 'wrap',
}}
>
{template?.value?.map(
(innerItem: string, innerIndex: number) => (
<Chip
key={String(innerIndex)}
deleteIcon={<CloseIcon fontSize="small" />}
onDelete={() => {
setTemplateData((prev: any) => {
const newTemplateField = [
...prev?.template_fields,
];
const newValues = [
...newTemplateField[templateIndex]
?.value,
];
 newValues?.splice(innerIndex, 1);
newTemplateField[templateIndex] = {
...newTemplateField[templateIndex],
value: newValues,
};
return {
...prev,
template_fields: newTemplateField,
};
});
}}
sx={{
borderRadius: '6px',
color: theme.palette.text.primary,
backgroundColor: theme.palette.common.white,
border: `1px solid $
{theme.palette.text.secondary}`,
'& svg:hover': {
color: `${theme.palette.secondary.hover} !
important`,
},
}}
label={innerItem}
/>
)
)}
</Stack>
)}
<Stack>
<TextField
autoComplete="off"
type="text"
placeholder="Type to add"
variant="outlined"
value={template?.inputText}
onChange={event => {
setTemplateData((prev: any) => {
const newTemplateField = [
...prev?.template_fields,
];
newTemplateField[templateIndex] = {
...newTemplateField[templateIndex],
inputText: event.target.value,
};
return {
...prev,
template_fields: newTemplateField,
};
});
}}
size="small"
onKeyUp={e => {
const { value } = e.target as HTMLInputElement;
if (e.key === 'Enter') {
const isValuePresent = template?.value?.find(
(item: string) =>
item.toLowerCase() === value?.toLowerCase()
);
if (isValuePresent === undefined) {
 setTemplateData((prev: any) => {
const newTemplateField = [
...prev.template_fields,
];
const newValues = [
...newTemplateField[templateIndex]?.value,
];
newValues.push(value);
newTemplateField[templateIndex] = {
...newTemplateField[templateIndex],
inputText: '',
value: newValues,
};
return {
...prev,
template_fields: newTemplateField,
};
});
}
}
}}
sx={{
width: '100%',
backgroundColor: 'white',
borderRadius: '6px',
}}
/>
{template?.inputText && (
<EnterAdd width="300px">
{template?.inputText}
</EnterAdd>
)}
</Stack>
</Stack>
) : (
<Stack
key={String(templateIndex)}
spacing={1}
sx={{
padding: '8px',
border: `1px dotted ${theme.palette.text.disabled}`,
borderRadius: '6px',
}}
>
<Stack spacing={1}>
<Typography
sx={{
color: theme.palette.text.secondary,
display: 'flex',
alignItems: 'center',
gap: '0.3rem',
}}
>
{template?.text}
<MuiHtmlTooltip
title={
<Typography fontSize="13px">
{template?.description}
</Typography>
 }
>
<InfoOutlinedIcon
sx={{
color: theme.palette.grey[500],
fontSize: '14px',
}}
/>
</MuiHtmlTooltip>
</Typography>
{template?.value?.map(
(valueObj: any, valueArrIndex: number) => {
return (
<Stack
key={String(valueArrIndex)}
direction="row"
justifyContent="space-between"
alignItems="center"
spacing={0.5}
>
<Stack
spacing={1}
sx={{
padding: '8px',
border: `1px dotted $
{theme.palette.text.disabled}`,
borderRadius: '6px',
width: '95%',
}}
>
{valueObj?.value?.length !== 0 && (
<Stack
direction="row"
sx={{
// padding: '0px 16px',
gap: '0.5rem',
flexWrap: 'wrap',
}}
>
{valueObj?.value?.map(
(
valueItem: string,
valueIndex: number
) => (
<Chip
key={String(valueIndex)}
deleteIcon={
<CloseIcon fontSize="small" />
}
onDelete={() => {
setTemplateData((prev: any) => {
const newTemplateFields = [
...prev.template_fields,
];
const newValueArr = [
...newTemplateFields[
templateIndex
]?.value,
];
 const newValue = [
...newValueArr[
valueArrIndex
]?.value,
];
newValue.splice(
valueIndex,
1
);
newValueArr[valueArrIndex] = {
...newValueArr[
valueArrIndex
],
value: newValue,
};
newTemplateFields[
templateIndex
] = {
...newTemplateFields[
templateIndex
],
value: newValueArr,
};
// return {
// ...prev,
// template_fields:
prev?.template_fields?.map(
// (temp: any) => {
// const valueArr = [
// ...temp.value,
// ];
// valueArr[
// valueArrIndex
// ]?.value?.splice(
// valueIndex,
// 1
// );
// return {
// ...temp,
// value: valueArr,
// };
// }
// ),
// };
return {
...prev,
template_fields:
newTemplateFields,
};
});
}}
sx={{
borderRadius: '6px',
color:
theme.palette.text.primary,
backgroundColor:
theme.palette.common.white,
border: `1px solid $
{theme.palette.text.secondary}`,
 '& svg:hover': {
color: `$
{theme.palette.secondary.hover} !important`,
},
}}
label={valueItem}
/>
)
)}
</Stack>
)}
<Stack>
<TextField
autoComplete="off"
type="text"
placeholder="Type to add"
variant="outlined"
value={valueObj?.inputText}
onChange={event => {
setTemplateData((prev: any) => {
return {
...prev,
template_fields:
prev?.template_fields?.map(
(item: any, index1: number) => {
// const updatedTemplateFields=
if (
index1 === templateIndex
) {
const newValueArr = [
...item?.value,
];
newValueArr[
valueArrIndex
] = {
...newValueArr[
valueArrIndex
],
inputText:
event.target.value,
};

return {
...item,
value: newValueArr,
};
}
return {
...item,
};
}
),
};
});
}}
size="small"
onKeyUp={e =>
//
handleSearchWordKeyUpForVariationGroups(
 // e,
// item?.literals,
// index
// )
{
const {
value,
} = e.target as HTMLInputElement;
if (e.key === 'Enter') {
// if (
// valueObj?.value?.length !== 0
// ) {
const isValuePresent =
valueObj?.value?.find(
(item: string) =>
item.toLowerCase() ===
value?.toLowerCase()
);
if (
isValuePresent === undefined
) {
setTemplateData((prev: any) => {
return {
...prev,
template_fields:
prev?.template_fields?.map(
(
temp: any,
index2: number
) => {
if (
templateIndex ===
index2
) {
const newValueArr = [
...temp?.value,
];
const newValuesArr = [
...newValueArr[
valueArrIndex
]?.value,
];
newValuesArr.push(
value
);
newValueArr[
valueArrIndex
] = {
...newValueArr[
valueArrIndex
],
inputText: '',
value: newValuesArr,
};
return {
...temp,
value: newValueArr,
};
}
 return temp;
}
),
};
});
}
}
}
}
sx={{
width: '100%',
backgroundColor: 'white',
borderRadius: '6px',
}}
/>
{valueObj?.inputText && (
<EnterAdd width="300px">
{valueObj?.inputText}
</EnterAdd>
)}
</Stack>
</Stack>
<Stack>
<CloseIcon
color="primary"
onClick={() => {
setTemplateData((prev: any) => {
return {
...prev,
template_fields:
prev?.template_fields?.map(
(temp: any) => {
const newValueArr = [
...temp?.value,
];
newValueArr.splice(
valueArrIndex,
1
);
return {
...temp,
value: newValueArr,
};
}
),
};
});
}}
sx={{
cursor: 'pointer',
}}
/>
</Stack>
</Stack>
);
}
)}
</Stack>
<Typography
 sx={{
textDecoration: 'underline',
color: literalsBtnDisable
? theme.palette.text.disabled
: theme.palette.primary.main,
cursor: literalsBtnDisable ? '' : 'pointer',
}}
onClick={
literalsBtnDisable
? () => {}
: () => {
setTemplateData((prev: any) => {
return {
...prev,
template_fields: prev?.template_fields?.map(
(temp: any, index3: number) => {
if (templateIndex === index3) {
const newValueArr = [
...temp?.value,
];
newValueArr.push({
inputText: '',
value: [],
});
return {
...temp,
value: newValueArr,
};
}
return temp;
}
),
};
});
}
}
>
+ Literal Variations Group
</Typography>
</Stack>
)}
</>
);
}
)}
</Stack>
<Divider sx={{ borderBottomWidth: 'medium' }} />
<Stack
spacing={0.5}
sx={{
padding: '0px 16px',
}}
>
<Typography>Test Configuration</Typography>
<Typography
sx={{ color: theme.palette.text.secondary, fontSize: '12px' }}
>
Enter multiple queries, 1 query per line
</Typography>
<textarea
rows={8}
cols={8}
value={testConfigValue}
onChange={e => setTestConfigValue(e.target.value)}
/>
<Stack alignItems="flex-end">
<MuiButton
variant="outlined"
onClick={handleTestRegex}
startIcon={testingLoading && <Loading />}
disabled={testConfigValue?.length === 0}
>
Test
</MuiButton>
</Stack>
{testResults?.length > 0 && (
<Stack>
<Typography>Test Results</Typography>
<Divider />
<CommonTable {...propsData}>
{testResults?.map((item: any, index: number) => {
return (
<TableRow
sx={{ ...tableBorderStyles }}
key={String(index)}
>
<TableCell>{item?.query}</TableCell>
{item?.modifiers?.map(
(innerItem: any, innerIndex: number) => {
return (
<React.Fragment key={String(innerIndex)}>
<TableCell>
{innerItem?.modifier?.words?.join(',')}
</TableCell>
<TableCell
sx={{
display: 'flex',
gap: '0.5rem',
flexWrap: 'wrap',
width: '200px',
}}
>
{innerItem?.modifier?.values?.map(
(value: any, valueIndex: number) => {
return (
<Chip
label={value}
key={String(valueIndex)}
/>
);
}
)}
</TableCell>
</React.Fragment>
);
}
)}
</TableRow>
 );
})}
</CommonTable>
</Stack>
)}
</Stack>
</Stack>
)}
<Stack
spacing={2}
sx={{
position: pattern ? 'relative' : 'absolute',
bottom: 0,
right: 0,
left: 0,
}}
>
{MuiDottedDivider}
<Stack
spacing={2}
direction="row"
sx={{ p: 2, pt: 0 }}
justifyContent="flex-end"
>
<MuiButton variant="outlined" onClick={handleCloseDrawer}>
Cancel
</MuiButton>
<BootstrapTooltip
title={
testConfigValue?.length === 0
? 'Testing Regex Config is Mandatory'
: ''
}
>
<span>
<MuiButton
variant="contained"
onClick={handleSaveConfig}
startIcon={loading && <Loading />}
disabled={
name?.length === 0 ||
type?.length === 0 ||
pattern?.length === 0 ||
disableLiteral ||
testConfigValue?.length === 0
}
>
Save Config
</MuiButton>
</span>
</BootstrapTooltip>
</Stack>
</Stack>
</Stack>
);
};