import React, { useState, useEffect } from "react";
import { Grid } from "@material-ui/core";
import { useForm, Form } from "./useForm";
import { FormControl } from "@mui/material";
import Select from "./controls/Select";
import Input from "./controls/Input";
import axios from "axios";
import Button from "@mui/material/Button";

const genderItems = [
  { id: "male", title: "Male" },
  { id: "female", title: "Female" },
  { id: "other", title: "Other" },
];

const initialFValues = {
  subject: "",
  sender: "",
  recipient: "",
  date: new Date(),
  cc: "",
  body: "",
  type: "",
  sign: [],
};

export default function EmailForm() {
  const [types, setTypes] = useState([]);
  const [signs, setSigns] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:8000/api/types/")
      .then((res) => setTypes(res.data));

    axios
      .get("http://localhost:8000/api/signs/")
      .then((res) => setSigns(res.data));
  }, []);

  const validate = (fieldValues = values) => {
    let temp = { ...errors };

    if ("subject" in fieldValues)
      temp.subject = fieldValues.subject ? "" : "This field is required.";
    if ("sender" in fieldValues)
      temp.sender = fieldValues.sender ? "" : "This field is required.";
    if ("recipient" in fieldValues)
      temp.recipient = fieldValues.recipient ? "" : "This field is required.";
    if ("type" in fieldValues) {
      temp.type = fieldValues.type ? "" : "Type is required.";
    }
    if ("sign" in fieldValues) {
      console.log(fieldValues.sign.length);
      temp.sign =
        fieldValues.sign.length !== 0 ? "" : "Choose at least one sign.";
    }
    setErrors({
      ...temp,
    });

    if (fieldValues === values)
      return Object.values(temp).every((x) => x === "");
  };

  const { values, setValues, errors, setErrors, handleInputChange, resetForm } =
    useForm(initialFValues, true, validate);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      axios.post("http://localhost:8000/api/emails/", values);
    }
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Grid container>
        <Grid item xs={6}>
          <Input
            name="subject"
            label="Subject"
            value={values.subject}
            onChange={handleInputChange}
            error={errors.subject}
          />
          <Input
            label="Sender"
            name="sender"
            value={values.sender}
            onChange={handleInputChange}
            error={errors.sender}
          />
          <Input
            label="Recipient"
            name="recipient"
            value={values.recipient}
            onChange={handleInputChange}
            error={errors.recipient}
          />
          <Input
            label="Date"
            name="date"
            value={values.date}
            onChange={handleInputChange}
            error={errors.date}
          />
          <Input
            label="Cc"
            name="cc"
            value={values.cc}
            onChange={handleInputChange}
            error={errors.cc}
          />
          <Input
            label="Body"
            name="body"
            value={values.body}
            multiline={true}
            onChange={handleInputChange}
            error={errors.body}
          />
          <Select
            name="type"
            label="Type"
            value={values.type}
            onChange={handleInputChange}
            options={types}
            error={errors.type}
            type={"type"}
          />
          <Select
            name="sign"
            label="Signs"
            value={values.sign}
            onChange={handleInputChange}
            options={signs}
            multiple={true}
            type={"sign"}
            error={errors.sign}
          />
          <Button type="submit">Create</Button>
        </Grid>
      </Grid>
    </Form>
  );
}
