import { createContext, useContext, useRef, useState } from "react";
import { Form } from "antd";

const preview = {
  categoryGroup: {},
  groupTasks: [],
  groupTasksSteps: [],
  startGroupTasksOpenModalRememberIdRef: null,
  paginationPage: 1,
  totalPages: 0,
  previousParamCategory: null,
  paginationPageRef: null,
  selectInputs: {},
  form: null,
};

const GroupTasksContext = createContext(preview);

export const useGroupTasksContext = () => useContext(GroupTasksContext);

export function GroupTasksProvider({ children }) {
  // will be set on open a category on side menu
  const [categoryGroup, setCategoryGroup] = useState({});
  // will be set on open a category on side menu - shown on the table
  const [groupTasks, setGroupTasks] = useState([]);
  // will be set on viewing the steps of a group task
  const [groupTasksSteps, setGroupTasksSteps] = useState([]);
  const startGroupTasksOpenModalRememberIdRef = useRef(null);
  // pagination
  const [paginationPage, setPaginationPage] = useState(1);
  const paginationPageRef = useRef(paginationPage);
  const [totalPages, setTotalPages] = useState(0);
  const previousParamCategory = useRef(null);
  // this is used for the <Select /> inputs as there is no way to manipulate the select value via the DOM (like we do on the text inputs) as it is needed by the websocket
  const [selectInputs, setSelectInputs] = useState({});

  const [form] = Form.useForm();

  return (
    <GroupTasksContext.Provider
      value={{
        categoryGroup,
        setCategoryGroup,
        groupTasks,
        setGroupTasks,
        groupTasksSteps,
        setGroupTasksSteps,
        startGroupTasksOpenModalRememberIdRef,
        paginationPage,
        setPaginationPage,
        totalPages,
        setTotalPages,
        previousParamCategory,
        paginationPageRef,
        selectInputs,
        setSelectInputs,
        form,
      }}
    >
      {children}
    </GroupTasksContext.Provider>
  );
}