import axios from "axios";
import { ErrorMessage, Field, Form, Formik } from "formik";
import { useEffect, useState } from "react";
import { TrainingGoalTaskDto } from "../../dto/training-goal-task.dto";
import { convertDateForDatePicker } from "../../lib/time.library";
import { useStores } from "../../stores";
import Spinner from "../utils/spinner.component";

export default function TrainingGoalTaskForm({
  dogId,
  goalId,
  taskId,
}: {
  dogId: number;
  goalId: number;
  taskId: number;
}) {
  const [task, setTask] = useState<TrainingGoalTaskDto | null>(null);

  const { dogsStore } = useStores();

  useEffect(() => {
    dogsStore
      .findOneTask(dogId, goalId, taskId)
      .then((task: TrainingGoalTaskDto) => setTask(task));
  }, [dogId, goalId, taskId, dogsStore]);

  if (!task) {
    return <Spinner />;
  }
  return (
    <Formik
      initialValues={{
        description: task.description,
        startDate: convertDateForDatePicker(new Date(task.startingTraining)),
        endDate: convertDateForDatePicker(new Date(task.endingTraining)),
      }}
      onSubmit={(values, actions) => {
        axios.put(
          `/api/dogs/${dogId}/training-goals/${goalId}/tasks/${taskId}`,
          { ...values }
        );
      }}
    >
      <Form>
        <Field name="description" placeholder="description" />
        <ErrorMessage name="description" />

        <Field name="startDate" type="date" />
        <ErrorMessage name="startDate" />

        <Field name="endDate" type="date" />
        <ErrorMessage name="endDate" />

        <button type="submit">Save</button>
      </Form>
    </Formik>
  );
}