import { Background, Card, Layer } from '@/store/useCardsStore/type';
 
export type CommandType =
  | 'ADD_LAYER'
  | 'DELETE_LAYER'
  | 'MODIFY_LAYER'
  | 'MODIFY_BACKGROUND'
  | 'ADD_CARD'
  | 'DELETE_CARD'
;
 
type BaseCommand = {
  type: CommandType;
  cardId: number;
};
 
type LayerCommand = BaseCommand & {
  type: 'ADD_LAYER' | 'DELETE_LAYER' | 'MODIFY_LAYER' | 'COPY' | 'PASTE';
  layerId: number;
  layerData: Layer;
};
 
type BackgroundCommand = BaseCommand & {
  type: 'MODIFY_BACKGROUND';
  backgroundData: Partial<Background>;
};
 
type CardCommand = BaseCommand & {
  type: 'ADD_CARD' | 'DELETE_CARD';
  cardData: Card;
};
 
export type Command = LayerCommand | BackgroundCommand | CardCommand;

// 타입 가드 함수
export const isLayerCommand = (command: Command): command is LayerCommand => {
  return ['ADD_LAYER', 'DELETE_LAYER', 'MODIFY_LAYER'].includes(command.type);
};
 
export const isBackgroundCommand = (command: Command): command is BackgroundCommand => {
  return command.type === 'MODIFY_BACKGROUND';
};

type commandStore = {
  past: Command[];
  future: Command[];
  clipboard: Layer | null;
 
  addCommand: (command: Command) => void;
  undo: () => void;
  redo: () => void;
 
  copy: (cardId: number, layerId: number) => void;
  paste: (cardId: number) => void;
};

addCommand: (command) => {
    set(
      produce((draft) => {
        const currentPast = get().past;
 
        // 과거 커맨드와 비교해서 같으면 추가하지 않음
        if (currentPast.length > 0) {
          const pastCommand = currentPast[currentPast.length - 1];
 
          if (areCommandsEqual(pastCommand, command)) return;
        }
        // 새로 수행된 작업을 기록하고, 미래는 초기화
        draft.past.push(command);
        draft.future = [];
      })
    );
  },

  undo: () =>
    set(
      produce((draft) => {
        if (draft.past.length > 0) {
          const pastCommand = draft.past.pop();
          const currentCommand = getCurrentCommand(pastCommand);
          draft.future.push(currentCommand);
 
          undoCommand(JSON.parse(JSON.stringify(pastCommand)));
        }
      })
    ),
 
  redo: () =>
    set(
      produce((draft) => {
        if (draft.future.length > 0) {
          const futureCommand = draft.future.pop();
          const currentCommand = getCurrentCommand(futureCommand);
          draft.past.push(currentCommand);
 
          executeCommand(JSON.parse(JSON.stringify(futureCommand)));
        }
      })
    ),

copy: (cardId, layerId) =>
    set(
      produce((draft) => {
        const cardsStore = useCardsStore.getState();
        const currentLayer = cardsStore.getLayer(cardId, layerId);
 
        if (!currentLayer) return;
 
        draft.clipboard = currentLayer;
      })
    ),
 
  paste: cardId => {
    set(
      produce(draft => {
        if (!draft.clipboard) return;
 
        const cardsStore = useCardsStore.getState();
        cardsStore.addDuplicateLayer(cardId, JSON.parse(JSON.stringify(draft.clipboard)));
      }),
    );
  },

// produce(초기 상태, 레시피 함수)
const nextState = produce(baseState, draftState => {
    draftState.push({title: "Tweet about it"})
    draftState[1].done = true
})

// 프록시할 원본 객체
const target = {
  message1: "hello",
  message2: "everyone",
};
 
// 가로채는 작업과 가로채는 작업을 재정의 하는 방법을 정의 해놓은 객체
// 현재 코드에서는 proxy 객체의 프로퍼티를 읽으면 world를 반환하는 행동을 하도록 정의
const handler2 = {
  get(target, prop, receiver) {
    return "world";
  },
};
 
const proxy2 = new Proxy(target, handler2);

/**
 * 현재 상태에 대한 command 가져오는 함수
 */
const getCurrentCommand = (command: Command): Command => {
  const cardsStore = useCardsStore.getState();
 
  switch (command.type) {
    case 'ADD_LAYER':
    case 'DELETE_LAYER':
    case 'MODIFY_LAYER':
      const layer = cardsStore.getLayer(command.cardId, command.layerId);
      if (!layer) return command;
 
      return {
        ...command,
        layerData: layer,
      };
    case 'MODIFY_BACKGROUND':
      const bg = cardsStore.getBackground(command.cardId);
      if (!bg) return command;
 
      return {
        ...command,
        backgroundData: bg,
      };
    default:
      return { ...command };
  }};

/**
 * 명령대로 실행하는 함수
 * 명령에 맞게 값을 변경,삭제,추가함 -> useCardStore의 값을 변경함
 */
const executeCommand = (command: Command) => {
  const { type, cardId } = command;
  const cardStore = useCardsStore.getState();
 
  switch (type) {
    case "ADD_LAYER":
      if ("layerData" in command && command.layerData) {
        cardStore.addLayer(cardId, command.layerData as Layer);
      }
      break;
    case "DELETE_LAYER":
      if ("layerId" in command && command.layerId !== undefined) {
        cardStore.deleteLayer(cardId, command.layerId);
      }
      break;
    case "MODIFY_LAYER":
      if ("layerId" in command && "layerData" in command && command.layerId !== undefined && command.layerData) {
        cardStore.setLayer(cardId, command.layerId, command.layerData);
      }
      break;
    case "MODIFY_BACKGROUND":
      if ("backgroundData" in command) {
        cardStore.setBackground(cardId, command.backgroundData);
      }
  }
};

/**
 * 명령을 반대로 실행하는 함수
 * undo할 때 이전 명령을 취소하는 커맨드를 실행함
 */
const undoCommand = (command: Command) => {
  const { type, cardId } = command;
  const cardStore = useCardsStore.getState();
 
  switch (type) {
    case "ADD_LAYER":
      if ("layerData" in command && command.layerId !== undefined) {
        cardStore.deleteLayer(cardId, command.layerId);
      }
      break;
    case "DELETE_LAYER":
      if ("layerId" in command && command.layerData && command.layerId !== undefined) {
        cardStore.addLayer(cardId, command.layerData);
      }
      break;
    case "MODIFY_LAYER":
      if ("layerId" in command && "layerData" in command && command.layerId !== undefined && command.layerData) {
        cardStore.setLayer(cardId, command.layerId, command.layerData);
      }
      break;
    case "MODIFY_BACKGROUND":
      if ("backgroundData" in command) {
        cardStore.setBackground(cardId, command.backgroundData);
      }
  }
};

/**
 * 두 커맨드가 완전히 같은지 확인하는 함수 (깊은 비교)
 * 커맨드가 같은 경우에는 스택에 추가하지 않기 위해서 사용됨
 */
const areCommandsEqual = (command1: Command, command2: Command): boolean => {
  // 타입, 카드 아이디 비교
  if (command1.type !== command2.type || command1.cardId !== command2.cardId) {
    return false;
  }
 
  // LayerCommand 비교
  if (isLayerCommand(command1) && isLayerCommand(command2)) {
    return command1.layerId === command2.layerId && commonUtils.isEqual(command1.layerData, command2.layerData);
  }
 
  // BackgroundCommand 비교
  if (isBackgroundCommand(command1) && isBackgroundCommand(command2)) {
    return commonUtils.isEqual(command1.backgroundData, command2.backgroundData);
  }
 
  return false;
};

const isEqual = (obj1: any, obj2: any): boolean => {
  // 완전히 같은 객체, 같은 값을 가진 원사타입이면 true  if (obj1 === obj2) return true;
 
  // 객체가 아니거나 null이면 false
  if (typeof obj1 !== 'object' || obj1 === null
      || typeof obj2 !== 'object' || obj2 === null) return false;
 
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
 
  // key의 개수가 같지 않으면 false;
  if (keys1.length !== keys2.length) return false;
 
  for (const key of keys1) {
    // 각 key의 value들이 같은지 재귀로 검사
    if (!keys2.includes(key) || !isEqual(obj1[key], obj2[key])) return false;
  }
  return true;
};

// useCommandStore
paste: cardId => {
    set(
      produce(draft => {
        if (!draft.clipboard) return;
 
        const cardsStore = useCardsStore.getState();
 
        const newLayerData = cardsStore.addDuplicateLayer(cardId, JSON.parse(JSON.stringify(draft.clipboard)));
        if (newLayerData === null) return;
 
        const { layerId, layerData } = newLayerData;
        draft.past.push({
          type: 'ADD_LAYER',
          cardId,
          layerId: layerId,
          layerData: layerData,
        });
    }),
);
 
// useCardStore
addDuplicateLayer: (cardId, layer) => {
    let newLayerId: number | undefined;
    let newLayer: Layer | undefined;
 
    set(
      produce(
        (draft: Draft<{cards: Card[]; zIndexMap: ZIndexMap;}>,
        ) => {
          // ... 생략
          draft.cards[cardId].layers.push(newLayer);
 
          if (!draft.zIndexMap[cardId]) {
            draft.zIndexMap[cardId] = {};
          }        draft.zIndexMap[cardId][newLayerId] = newZIndex;
 
          useFocusStore.getState().updateFocus(cardId, newLayerId);
        },
     ),
    );
    if (newLayerId === undefined || newLayer === undefined) return null;
 
    return {
      layerId: newLayerId,
      layerData: newLayer,
    };
}

paste: cardId => {
  const cardsStore = useCardsStore.getState();
 
  if (get().clipboard) {
    cardsStore.addDuplicateLayer(cardId, get().clipboard as Layer);
  }},