Untitled

import React, { useState } from 'react';
import {Formik, Field, Form, ErrorMessage, FieldProps} from "formik";
import Modal from 'react-modal';
import * as Yup from "yup";
import DatePicker from "react-datepicker";
import "../cssFiles/AddTrainer.css"
import {showSuccessToast, showErrorToast} from "../../../../utils/toastify";
import {toast, ToastContainer} from "react-toastify";
import {addEventType} from "../../../services/eventType.service";

type Props = {}
export const AddEventType: React.FC<Props> = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [message, setMessage] = useState<string>("");

    const openModal = () => {
        setIsOpen(true);
    };

    const closeModal = () => {
        setIsOpen(false);
    };

    const initialValues: {
        type: string;
        maxParticipants: string;
        duration: string;
        price: string;
        description: string;
    } = {
        type: "",
        maxParticipants: "",
        duration: "",
        price: "",
        description: "",

    };

    const validationSchema = Yup.object().shape({
        firstName: Yup.string().required("To pole jest wymagane"),
        lastName: Yup.string().required("To pole jest wymagane"),
        dob: Yup.string().required("To pole jest wymagane"),
        phoneNumber: Yup.string().required("To pole jest wymagane"),
        email: Yup.string().required("To pole jest wymagane"),

    });

    const handleRegister = (formValue: { type: string; maxParticipants: string; duration: string; price: string; description: string; }) => {
        const { type, maxParticipants, duration, price, description } = formValue;

        setMessage("");

        addEventType(type, maxParticipants, duration, price, description ).then(
            (response) => {
                showSuccessToast('Dodanie typu jazd powiodło się.', toast.POSITION.BOTTOM_RIGHT, '😊');
                closeModal();
            },
            (error) => {
                const resMessage =
                    (error.response &&
                        error.response.data &&
                        error.response.data.message) ||
                    error.message ||
                    error.toString();
            }
        );
    };

    return (
        <div>

            <ToastContainer/>
            <button className="popUpButton" onClick={openModal}>Dodaj typ jazdy</button>
            <Modal
                isOpen={isOpen}
                onRequestClose={closeModal}
                contentLabel="Formularz rejestracji"
                className="AddTrainerForm">

                <Formik initialValues={initialValues}
                        validationSchema={validationSchema}
                        onSubmit={handleRegister}>

                    <Form>
                        <div className="addTrainer-bg">
                            <button className="close-button" onClick={closeModal}>X</button>
                            <h2 className="form-title">Dodaj typ jazdy</h2>
                            <div className="grid-container">
                                <div>
                                    <Field name="type" className="input" type="text" placeholder="Nazwa"/>
                                    <ErrorMessage name="firstName" component="div" className="errorText"/>
                                </div>
                                <div>
                                    <Field name="maxParticipants" className="input" type="text" placeholder="liczba uczestników"/>
                                    <ErrorMessage name="lastName" component="div" className="errorText"/>
                                </div>
                                <div>
                                    <Field name="duration" className="input" type="text" placeholder="Długość"/>
                                    <ErrorMessage name="email" component="div" className="errorText"/>
                                </div>
                                <div>
                                    <Field name="price" className="input" type="text" placeholder="Cena"/>
                                    <ErrorMessage name="phoneNumber" component="div" className="errorText"/>
                                </div>
                                <div>
                                    <Field name="description" className="input" type="text" placeholder="Opis"/>
                                    <ErrorMessage name="phoneNumber" component="div" className="errorText"/>
                                </div>
                            </div>

                            <div className="bottom-buttons">

                                <button type="submit" className="top-btn">
                                    <span>Dodaj</span>
                                </button>

                                {message && (
                                    <div className="form-group">
                                        <div className="alert alert-danger" role="alert">
                                            {message}

                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    </Form>
                </Formik>
            </Modal>

        </div>
    );
};