import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const initialState: Snai3iCourseI = {
  title: '',
  description: '',
  status: 'active',
  thumbnail: '',
  chapters: [
    {
      title: 'Untitled Chapter',
      position: 1,
      data: [
        {
          title: 'Untitled Video',
          url: '',
          videoLength: 0,
          position: 1,
        },
        {
          title: 'Untitled Document',
          url: '',
          position: 2,
        },
      ],
    },
  ],
  type: 'snai3i',
};

const courseSlice = createSlice({
  name: 'course',
  initialState: initialState,
  reducers: {
    resetState: () => initialState,
    setCourse: (_, action: PayloadAction<Snai3iCourseI>) => {
      return action.payload;
    },
    handleChangeCourseTitle: (state, action: PayloadAction<string>) => {
      state.title = action.payload;
    },
    handleChangeCourseDescription: (state, action: PayloadAction<string>) => {
      state.description = action.payload;
    },
    handleChangeCourseStatus: (state, action: PayloadAction<string>) => {
      state.status = action.payload;
    },
    handleChangeCourseThumbnail: (state, action: PayloadAction<string>) => {
      state.thumbnail = action.payload;
    },
    handleChangeChapterTitle: (
      state,
      action: PayloadAction<{ value: string; position: number }>
    ) => {
      state.chapters = state.chapters?.map((chap) => {
        if (chap.position === action.payload.position) {
          return {
            ...chap,
            title: action.payload.value,
          };
        }
        return chap;
      });
    },
    handleAddDocument: (
      state,
      action: PayloadAction<{
        e: React.MouseEvent<HTMLButtonElement>;
        position: number;
      }>
    ) => {
      state.chapters = state.chapters?.map((chap) => {
        const { e, position } = action.payload;
        e.preventDefault();
        if (chap.position === position) {
          return {
            ...chap,
            data: [
              ...chap.data,
              {
                chapter_id: chap.chapter_id ? chap.chapter_id : undefined,
                title: '',
                url: '',
                position: chap.data.length + 1,
              },
            ],
          };
        }
        return chap;
      });
    },
    handleAddVideo: (
      state,
      action: PayloadAction<{
        e: React.MouseEvent<HTMLButtonElement>;
        position: number;
      }>
    ) => {
      state.chapters = state.chapters?.map((chap) => {
        const { e, position } = action.payload;
        e.preventDefault();
        if (chap.position === position) {
          return {
            ...chap,
            data: [
              ...chap.data,
              {
                chapter_id: chap.chapter_id ? chap.chapter_id : undefined,
                title: '',
                url: '',
                videoLength: 0,
                position: chap.data.length + 1,
              },
            ],
          };
        }
        return chap;
      });
    },
    handleAddChapter: (
      state,
      action: PayloadAction<{ e: React.MouseEvent<HTMLButtonElement> }>
    ) => {
      const { e } = action.payload;
      e.preventDefault();
      state.chapters = [
        ...state.chapters!,
        {
          title: '',
          position: state.chapters!.length + 1,
          data: [],
        },
      ];
    },
    handleDeleteChapter: (
      state,
      action: PayloadAction<{
        e: React.MouseEvent<HTMLButtonElement>;
        position: number;
      }>
    ) => {
      const { e, position } = action.payload;
      e.preventDefault();
      state.chapters = state.chapters
        ?.filter((chap) => chap.position !== position)
        .map((chap, index) => {
          return {
            ...chap,
            position: index + 1,
          };
        });
    },
    handleVideoChange: (
      state,
      action: PayloadAction<{
        values: VideoI;
        chapterPosition: number;
        position: number;
      }>
    ) => {
      const { values, chapterPosition, position } = action.payload;
      state.chapters = state.chapters?.map((chap) => {
        if (chap.position === chapterPosition) {
          return {
            ...chap,
            data: chap.data.map((data) => {
              if (data.position === position) {
                return {
                  chapter_id: values.chapter_id ? values.chapter_id : undefined,
                  title: values.title,
                  url: values.url,
                  videoLength: values.videoLength,
                  position: values.position,
                };
              }
              return data;
            }),
          };
        }
        return chap;
      });
    },
    handleDocumentChange: (
      state,
      action: PayloadAction<{
        values: DocumentI;
        chapterPosition: number;
        position: number;
        e: React.ChangeEvent<HTMLInputElement>;
      }>
    ) => {
      const { values, chapterPosition, position, e } = action.payload;
      e.preventDefault();
      state.chapters = state.chapters?.map((chap) => {
        if (chap.position === chapterPosition) {
          return {
            ...chap,
            data: chap.data.map((data) => {
              if (data.position === position) {
                return {
                  chapter_id: values.chapter_id ? values.chapter_id : undefined,
                  title: values.title,
                  url: values.url,
                  position: values.position,
                };
              }
              return data;
            }),
          };
        }
        return chap;
      });
    },
    handleDeleteVideoOrDocument: (
      state,
      action: PayloadAction<{
        e: React.MouseEvent<HTMLButtonElement>;
        chapterPosition: number;
        position: number;
      }>
    ) => {
      const { e, chapterPosition, position } = action.payload;
      e.preventDefault();
      state.chapters = state.chapters?.map((chap) => {
        if (chap.position === chapterPosition) {
          return {
            ...chap,
            data: chap.data
              .filter((d) => d.position !== position)
              .map((d, index) => {
                return {
                  ...d,
                  position: index + 1,
                };
              }),
          };
        }
        return chap;
      });
    },
  },
});

export const {
  resetState,
  setCourse,
  handleChangeCourseTitle,
  handleChangeCourseDescription,
  handleChangeCourseStatus,
  handleChangeChapterTitle,
  handleChangeCourseThumbnail,
  handleAddDocument,
  handleAddVideo,
  handleAddChapter,
  handleDeleteChapter,
  handleVideoChange,
  handleDocumentChange,
  handleDeleteVideoOrDocument,
} = courseSlice.actions;
export default courseSlice.reducer;