dros/src/states/print/printSlice.ts

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

export type FilmLayout = '1x1' | '1x2' | '2x1' | '2x2';
export type FilmOrientation = 'horizontal' | 'vertical';

interface Film {
  id: string;
  layout: FilmLayout;
  orientation: FilmOrientation;
  images: (string | null)[]; // 图像ID或null（空格子）
}

interface PrintState {
  films: Film[];
  activeFilmId: string;
  selectedImageIndex: number | null; // 当前选中的图像在格子中的索引
}

const initialFilm: Film = {
  id: '1',
  layout: '1x1',
  orientation: 'vertical',
  /**
   * 存储每个成员本质上是个sop instance uid
   */
  images: [null], // 1x1只有一个格子
};

const initialState: PrintState = {
  films: [initialFilm],
  activeFilmId: '1',
  selectedImageIndex: null,
};

const printSlice = createSlice({
  name: 'print',
  initialState,
  reducers: {
    // 添加新胶片
    addFilm: (state) => {
      const newId = String(state.films.length + 1);
      const newFilm: Film = {
        id: newId,
        layout: '1x1',
        orientation: 'vertical',
        images: [null],
      };
      state.films.push(newFilm);
      state.activeFilmId = newId;
    },

    // 删除胶片
    deleteFilm: (state, action: PayloadAction<string>) => {
      if (state.films.length <= 1) {
        // 至少保留一个胶片
        return;
      }
      state.films = state.films.filter((film) => film.id !== action.payload);
      // 如果删除的是当前胶片，切换到第一个
      if (state.activeFilmId === action.payload) {
        state.activeFilmId = state.films[0].id;
      }
    },

    // 切换当前胶片
    setActiveFilm: (state, action: PayloadAction<string>) => {
      state.activeFilmId = action.payload;
      state.selectedImageIndex = null; // 切换胶片时清除选中
    },

    // 设置胶片布局
    setFilmLayout: (state, action: PayloadAction<FilmLayout>) => {
      const film = state.films.find((f) => f.id === state.activeFilmId);
      if (!film) return;

      film.layout = action.payload;
      
      // 根据布局调整images数组大小
      const layoutSizes = {
        '1x1': 1,
        '1x2': 2,
        '2x1': 2,
        '2x2': 4,
      };
      const newSize = layoutSizes[action.payload];
      
      // 保留现有图像，补充或裁剪
      if (film.images.length < newSize) {
        film.images = [...film.images, ...Array(newSize - film.images.length).fill(null)];
      } else {
        film.images = film.images.slice(0, newSize);
      }
    },

    // 切换胶片方向
    toggleFilmOrientation: (state) => {
      const film = state.films.find((f) => f.id === state.activeFilmId);
      if (!film) return;
      
      film.orientation = film.orientation === 'horizontal' ? 'vertical' : 'horizontal';
    },

    // 设置选中的图像格子
    setSelectedImageIndex: (state, action: PayloadAction<number | null>) => {
      state.selectedImageIndex = action.payload;
    },

    // 删除选中的图像
    deleteSelectedImage: (state) => {
      if (state.selectedImageIndex === null) return;
      
      const film = state.films.find((f) => f.id === state.activeFilmId);
      if (!film) return;
      
      film.images[state.selectedImageIndex] = null;
      state.selectedImageIndex = null;
    },

    // 添加图像到指定格子
    addImageToCell: (state, action: PayloadAction<{ index: number; imageId: string }>) => {
      const film = state.films.find((f) => f.id === state.activeFilmId);
      if (!film) return;
      
      film.images[action.payload.index] = action.payload.imageId;
    },
  },
});

export const {
  addFilm,
  deleteFilm,
  setActiveFilm,
  setFilmLayout,
  toggleFilmOrientation,
  setSelectedImageIndex,
  deleteSelectedImage,
  addImageToCell,
} = printSlice.actions;

export default printSlice.reducer;