import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useState } from 'react';
import Button from '../../Button';
import Typography from '../../Typography';
import Select from '../../Select';
import Form from '../../Form/Forms';
import './EditComponent.scss';
import Icon from '../../Icon';
//?DEMO COMPONENT
const EditComponent = ({ rowData, rowIndex, handleAdd, handleCancel }) => {
    const [initialFormState] = useState({
        ifFailed: '',
    });
    return (_jsxs("section", { className: 'edit_depends_on_script', children: [_jsxs("header", { className: 'edit_depends_on_script__header', children: [_jsxs("div", { className: "edit_depends_on_script__header_text", children: [_jsxs(Typography, { as: "div", color: "var(--nlp-option-color)", lineHeight: "18px", children: [rowIndex, ".", rowData?.name] }), _jsx(Icon, { name: "go_to_script" })] }), _jsxs("div", { className: 'edit_depends_on_script__header_buttons', children: [_jsx(Button, { variant: "tertiary", children: "Cancel", onClick: handleCancel }), _jsx(Button, { variant: "primary", type: "submit", label: "Update" })] })] }), _jsx(Form, { onSubmit: (data) => handleAdd(data, rowIndex), defaultValues: initialFormState, children: ({ register, setValue, formState: { errors }, watch, trigger }) => {
                    return (_jsx("div", { className: 'edit_depends_on_script__form', children: _jsx(Select, { label: "if Failed", optionsList: [
                                {
                                    label: 'Mark this script as Failed and continue dependant script execution',
                                    value: 'MARK_THIS_SCRIPT_AS_FAILED_AND_CONTINUE_DEPENDANT_SCRIPT_EXECUTION',
                                },
                                {
                                    label: 'Mark this script as Warning and continue dependant script execution',
                                    value: 'MARK_THIS_SCRIPT_AS_WARNING_AND_CONTINUE_DEPENDANT_SCRIPT_EXECUTION',
                                },
                            ], ...register('ifFailed'), onChange: (option) => {
                                setValue('ifFailed', option.label);
                            }, errorMsg: errors.ifFailed?.message, optionZIndex: 9999, selectedOption: {
                                label: watch('ifFailed'),
                                value: watch('ifFailed'),
                            }, onBlur: () => {
                                trigger('ifFailed');
                            } }) }));
                } })] }));
};
export default EditComponent;
//# sourceMappingURL=EditComponent.js.map