import { useDispatch, useSelector } from 'react-redux';
import {
  resetState as setResetState,
  setCourse,
  handleChangeCourseTitle,
  handleChangeCourseDescription,
  handleChangeCourseStatus,
  handleChangeCourseThumbnail,
  handleChangeChapterTitle,
  handleAddDocument,
  handleAddVideo,
  handleAddChapter,
  handleDeleteChapter,
  handleVideoChange,
  handleDocumentChange,
  handleDeleteVideoOrDocument,
} from '@/app/slices/course';
import { RootState } from '@/app/store';

function useCourse() {
  const dispatch = useDispatch();

  const course = useSelector(
    (state: RootState) => state.course
  ) as Snai3iCourseI;
  const title = useSelector((state: RootState) => state.course.title) as string;
  const description = useSelector(
    (state: RootState) => state.course.description
  ) as string;
  const status = useSelector(
    (state: RootState) => state.course.status
  ) as string;
  const chapters = useSelector(
    (state: RootState) => state.course.chapters
  ) as ChapterI[];
  const thumbnail = useSelector(
    (state: RootState) => state.course.thumbnail
  ) as string;
  const resetState = () => {
    dispatch(setResetState());
  };
  const set = (course: Snai3iCourseI) => {
    dispatch(setCourse(course));
  };
  const setTitle = (title: string) => {
    dispatch(handleChangeCourseTitle(title));
  };
  const setDescription = (description: string) => {
    dispatch(handleChangeCourseDescription(description));
  };
  const setStatus = (status: string) => {
    dispatch(handleChangeCourseStatus(status));
  };
  const setThumbnail = (thumbnail: string) => {
    dispatch(handleChangeCourseThumbnail(thumbnail));
  };
  const setChapterTitle = (value: string, position: number) => {
    dispatch(handleChangeChapterTitle({ value, position }));
  };
  const addDocument = (
    e: React.MouseEvent<HTMLButtonElement>,
    position: number
  ) => {
    dispatch(handleAddDocument({ e, position }));
  };
  const addVideo = (
    e: React.MouseEvent<HTMLButtonElement>,
    position: number
  ) => {
    dispatch(handleAddVideo({ e, position }));
  };
  const addChapter = (e: React.MouseEvent<HTMLButtonElement>) => {
    dispatch(handleAddChapter({ e }));
  };
  const deleteChapter = (
    e: React.MouseEvent<HTMLButtonElement>,
    position: number
  ) => {
    dispatch(handleDeleteChapter({ e, position }));
  };
  const videoChange = (
    values: VideoI,
    chapterPosition: number,
    position: number
  ) => {
    dispatch(handleVideoChange({ values, chapterPosition, position }));
  };
  const documentChange = (
    values: DocumentI,
    chapterPosition: number,
    position: number,
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    dispatch(handleDocumentChange({ values, chapterPosition, position, e }));
  };
  const deleteVideoOrDocument = (
    e: React.MouseEvent<HTMLButtonElement>,
    chapterPosition: number,
    position: number
  ) => {
    dispatch(handleDeleteVideoOrDocument({ e, chapterPosition, position }));
  };

  return {
    resetState,
    setCourse: set,
    setTitle,
    setDescription,
    setStatus,
    setThumbnail,
    setChapterTitle,
    addDocument,
    addVideo,
    addChapter,
    deleteChapter,
    handleVideoChange: videoChange,
    handleDocumentChange: documentChange,
    deleteVideoOrDocument,
    course,
    title,
    description,
    status,
    chapters,
    thumbnail,
  };
}

export default useCourse;