import { useState, useContext } from "react";
import * as api from "./../api/api";
import AuthContext from "./../contexts/AuthContext"
import CrudForm from "../components/CrudForm/CrudForm";

const Employee = () => {
  const authCtx = useContext(AuthContext)
  const [returnContent, setreturnContent] = useState("")

  const addEmployeeHandler = (usr) => {

    api
      .newEmployee(authCtx.accessToken, usr)
      .then((data) => {
        setreturnContent(`Success. ${data.success}`)
      })
      .catch((e) => {
        setreturnContent("An error occured... Please try again.")
      })
  };

  const titleText = "Create a new Employee"
  const submitButtonText = "Add Employee"

  const fields = [
    {key: 1, name: "firstname", label: "Firstname", type: "text",     required: true },
    {key: 2, name: "lastname",  label: "Lastname",  type: "text",     required: true },
    {key: 3, name: "mail",      label: "email",     type: "email",    required: true },
    {key: 4, name: "password",  label: "password",  type: "password", required: true },
  ]



  return (
    <CrudForm
      submitHandler={addEmployeeHandler}
      titleText={titleText}
      submitButtonText={submitButtonText}
      fields={fields}
      returnContent={returnContent}
    />
  );
};

export default Employee;
