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

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

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

  const titleText = "Create a new Customer";
  const submitButtonText = "Add Customer";

  const fields = [
    {key: 1, name: "company",     label: "Company",     type: "text",  required: false},
    {key: 2, name: "firstname",   label: "Firstname",   type: "text",  required: true},
    {key: 3, name: "lastname",    label: "Lastname",    type: "text",  required: true },
    {key: 4, name: "street",      label: "street",      type: "text",  required: true },
    {key: 5, name: "mail",        label: "email",       type: "email", required: true },
    {key: 6, name: "phoneNumber", label: "phoneNumber", type: "text",  required: false },
    {key: 7, name: "city",        label: "city",        type: "text",  required: true },
    {key: 8, name: "zip",         label: "zip",         type: "text",  required: true },
    {key: 9, name: "country",     label: "country",     type: "text",  required: true },
  ]

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

export default NewJob;
