import { PayloadAction, createSlice } from "@reduxjs/toolkit";
import { Assignee, Task } from "api/api";
import { DictationState } from "./state";
import {
  getSortColumnAsync,
  listTasksAsync,
  listTypistGroupsAsync,
  listTypistsAsync,
  playbackAsync,
  updateAssigneeAsync,
} from "./operations";
import {
  SORTABLE_COLUMN,
  DIRECTION,
  DisplayInfoType,
  INIT_DISPLAY_INFO,
  LIMIT_TASK_NUM,
  DirectionType,
  SortableColumnType,
} from "./constants";

const initialState: DictationState = {
  domain: {
    limit: LIMIT_TASK_NUM,
    offset: 0,
    total: 0,
    tasks: [],
    typists: [],
    typistGroups: [],
  },
  apps: {
    displayInfo: INIT_DISPLAY_INFO,
    direction: DIRECTION.ASC,
    paramName: SORTABLE_COLUMN.JobNumber,
    selectedTask: undefined,
    assignee: {
      selected: [],
      pool: [],
    },
    isLoading: true,
  },
};

export const dictationSlice = createSlice({
  name: "dictation",
  initialState,
  reducers: {
    changeDisplayInfo: (
      state,
      action: PayloadAction<{ column: DisplayInfoType }>
    ) => {
      const { column } = action.payload;
      state.apps.displayInfo = column;
    },
    changeDirection: (
      state,
      action: PayloadAction<{ direction: DirectionType }>
    ) => {
      const { direction } = action.payload;
      state.apps.direction = direction;
    },
    changeParamName: (
      state,
      action: PayloadAction<{ paramName: SortableColumnType }>
    ) => {
      const { paramName } = action.payload;
      state.apps.paramName = paramName;
    },
    changeSelectedTask: (state, action: PayloadAction<{ task: Task }>) => {
      const { task } = action.payload;
      state.apps.selectedTask = task;
    },
    changeAssignee: (
      state,
      action: PayloadAction<{ selected: Assignee[] }>
    ) => {
      const { selected } = action.payload;

      const typists = state.domain.typists.map(
        (x) => ({ typistUserId: x.id, typistName: x.name } as Assignee)
      );
      const typistGroups = state.domain.typistGroups.map(
        (x) => ({ typistGroupId: x.id, typistName: x.name } as Assignee)
      );

      const transcriptionists = [...typists, ...typistGroups];

      const pool = transcriptionists.filter(
        (x) =>
          selected.find(
            (assign) =>
              assign.typistGroupId === x.typistGroupId &&
              assign.typistUserId === x.typistUserId
          ) === undefined
      );

      state.apps.assignee.selected = selected;
      state.apps.assignee.pool = pool;
    },
  },
  extraReducers: (builder) => {
    builder.addCase(listTasksAsync.pending, (state) => {
      state.apps.isLoading = true;
    });
    builder.addCase(listTasksAsync.fulfilled, (state, action) => {
      state.domain.limit = action.payload.limit;
      state.domain.offset = action.payload.offset;
      state.domain.total = action.payload.total;
      state.domain.tasks = action.payload.tasks;

      state.apps.isLoading = false;
    });
    builder.addCase(listTasksAsync.rejected, (state) => {
      state.apps.isLoading = false;
    });
    builder.addCase(getSortColumnAsync.fulfilled, (state, action) => {
      state.apps.direction = action.payload.direction;
      state.apps.paramName = action.payload.paramName;
    });
    builder.addCase(listTypistsAsync.fulfilled, (state, action) => {
      state.domain.typists = action.payload.typists;
    });
    builder.addCase(listTypistGroupsAsync.fulfilled, (state, action) => {
      state.domain.typistGroups = action.payload.typistGroups;
    });
    builder.addCase(updateAssigneeAsync.pending, (state) => {
      state.apps.isLoading = true;
    });
    builder.addCase(updateAssigneeAsync.fulfilled, (state) => {
      state.apps.isLoading = false;
    });
    builder.addCase(updateAssigneeAsync.rejected, (state) => {
      state.apps.isLoading = false;
    });
    builder.addCase(playbackAsync.pending, (state) => {
      state.apps.isLoading = true;
    });
    builder.addCase(playbackAsync.fulfilled, (state) => {
      state.apps.isLoading = false;
    });
    builder.addCase(playbackAsync.rejected, (state) => {
      state.apps.isLoading = false;
    });
  },
});

export const {
  changeDisplayInfo,
  changeDirection,
  changeParamName,
  changeSelectedTask,
  changeAssignee,
} = dictationSlice.actions;

export default dictationSlice.reducer;
