import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '@/app/store';
import {
  addFormElement,
  moveFormElement,
  removeAllFormElements,
  removeFormElement,
  toggleRequired,
  updateLabel,
  addOption,
  updateOption,
  deleteOption,
  setFormElements,
} from '@/app/slices/formPlayground';

function useFormPlayground<
  T extends FormElementsType[] | null = FormElementsType[]
>() {
  const dispatch = useDispatch();
  const formElements = useSelector(
    (state: RootState) => state.formPlayground.formElements
  ) as T;

  const addFormElementAction = (label: string, type: string) => {
    dispatch(addFormElement({ label, type }));
  };

  const moveFormElementAction = (oldIndex: number, newIndex: number) => {
    dispatch(moveFormElement({ oldIndex, newIndex }));
  };

  const updateLabelAction = (id: string, label: string) => {
    dispatch(updateLabel({ id, label }));
  };

  const toggleRequiredAction = (id: string) => {
    dispatch(toggleRequired(id));
  };

  const addOptionAction = (id: string) => {
    dispatch(addOption(id));
  };

  const updateOptionAction = (id: string, optionId: string, label: string) => {
    dispatch(updateOption({ id, optionId, label }));
  };

  const deleteOptionAction = (id: string, optionId: string) => {
    dispatch(deleteOption({ id, optionId }));
  };

  const removeFormElementAction = (id: string) => {
    dispatch(removeFormElement(id));
  };

  const removeAllFormElementsAction = () => {
    dispatch(removeAllFormElements());
  };

  const set = (elements: FormElementsType[]) => {
    dispatch(setFormElements(elements));
  };

  return {
    formElements,
    addFormElement: addFormElementAction,
    moveFormElement: moveFormElementAction,
    updateLabel: updateLabelAction,
    toggleRequired: toggleRequiredAction,
    addOption: addOptionAction,
    updateOption: updateOptionAction,
    deleteOption: deleteOptionAction,
    removeFormElement: removeFormElementAction,
    removeAllFormElements: removeAllFormElementsAction,
    setFormElements: set,
  };
}

export default useFormPlayground;