import * as React from 'react';
import TextField from '@mui/material/TextField';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import CustomButton from '../../components/CustomButton';
import {useSnackbar} from 'notistack';
import instance from "../../../../api/Api";
import TextInsidePage from '../../components/TextInsidePage';
import {withFormik} from "formik";
import * as yup from "yup";
import {textFieldStyle} from "../../../../constants";


export default function ItemTypeUpdate({data, id, updateUI}) {


    const validationsForm = {
        name: yup.string().required("This field is required."),
    };

    const Form = withFormik({
        mapPropsToValues: ({name}) => {
            return {
                name: data["name"] || ""
            };
        },
        validationSchema: yup.object().shape(validationsForm),
        handleSubmit: (values, {setSubmitting}) => {
            data["name"] = values.name;
            update();
        }
    })((props) => {
        const {
            values,
            touched,
            errors,
            isSubmitting,
            handleChange,
            handleBlur,
            handleSubmit,
            handleReset
        } = props;

        return (
            <form onSubmit={handleSubmit}>
                <TextField
                    sx={textFieldStyle}
                    id="name"
                    value={values.name}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    helperText={touched.name ? errors.name : ""}
                    error={touched.name && Boolean(errors.name)}
                    margin="dense"
                    variant="outlined"
                    fullWidth
                />
                <DialogActions>
                    <CustomButton buttonType={"submit"} parentCallback={handleClose} text={"Cancel"}/>
                    <CustomButton parentCallback={handleSubmit} text={"Update"}/>
                </DialogActions>

            </form>
        );
    });

    const [open, setOpen] = React.useState(false);
    const handleClickOpen = () => {
        setOpen(true);
    };
    const handleClose = () => {
        setOpen(false);
    };
    const {enqueueSnackbar} = useSnackbar();

    const update = async (e) => {
        try {
            await instance({
                url: "itemtypesingle/update/" + id + "/",
                method: "POST",
                data: data,
            }).then((res) => {
                enqueueSnackbar("Item type updated succesfully", {variant: "success"});
                updateUI();
            });
        } catch (e) {
            enqueueSnackbar("Error occurred while update: " + e, {variant: "error"});
        }
        handleClose();
    };

    const handleCallback = (k, v) => {
        data[k] = v;
    }
    return (
        <>
            <CustomButton text={"Edit"} parentCallback={handleClickOpen}/>
            <Dialog fullWidth
                    maxWidth="sm" PaperProps={{
                style: {
                    padding: 50,
                    backgroundColor: '#F7ECEB',
                    boxShadow: 'none',
                },
            }}
                    open={open} onClose={handleClose}>
                <TextInsidePage text={"Item Type Name"}/>
                <Form/>
            </Dialog>
        </>
    );
}