import { EventManager } from '@foundation/Toast/type';

export const eventManager: EventManager = {
  list: new Map(), // 이벤트 리스너 저장
  emitQueue: new Map(), // 이벤트 지연을 위한 큐

  // 새로운 이벤트 리스너 등록
  on(event, callback) {
    this.list.has(event)
      ? this.list.get(event)!.push(callback)
      : this.list.set(event, [callback]);

    return this;
  },

  // 콜백이 있는경우 해당하는 리스너 제거, 없는 경우 이벤트에 대한 모든 리스너 제거
  off(event, callback) {
    if (callback) {
      const cb = this.list.get(event)?.filter((cb) => cb !== callback);
      cb && this.list.set(event, cb);
      return this;
    }
    this.list.delete(event);

    return this;
  },

  //대기중인 이벤트를 취소시킬 때 필요함
  cancelEmit(event) {
    const timers = this.emitQueue.get(event);
    if (timers) {
      timers.forEach(clearTimeout);
      this.emitQueue.delete(event);
    }

    return this;
  },

  // 이벤트 발생시키기
  // 타입문제는 일단 보류중! (라이브러리 내부도 해결 안되어있음)
  emit(event, ...args: never[]) {
    this.list.has(event) &&
      this.list.get(event)!.forEach((callback) => {
        const timer = setTimeout(() => {
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-expect-error
          callback(...args);
        }, 0);

        this.emitQueue.has(event)
          ? this.emitQueue.get(event)!.push(timer)
          : this.emitQueue.set(event, [timer]);
      });
  },
};

const useToastContainer = () => {
  const [toastList, setToastList] = useState(new Map<string, ToastProps>());

  // 토스트 추가
  const addToast = (props: ToastProps) => {
    setToastList((prev) => new Map(prev).set(props.toastId, props));
  };

  // 토스트 삭제
  const deleteToast = (id: string) => {
    setToastList((prev) => {
      const newMap = new Map(prev);
      newMap.delete(id);
      return newMap;
    });
  };

  useEffect(() => {
    eventManager.on(ToastEvent.Add, addToast);
    eventManager.on(ToastEvent.Delete, deleteToast);

    // 컴포넌트 언마운트 시 리스너 해제
    return () => {
      eventManager.off(ToastEvent.Add, addToast);
      eventManager.off(ToastEvent.Delete, deleteToast);
    };
  }, []);

  const toastListToArray = () => {
    return Array.from(toastList);
  };

  const getToastPositionGroupToRender = () => {
    const list = toastListToArray();
    const positionGroup = new Map<ToastPosition, ToastProps[]>();
    list.forEach(([_, toastProps]) => {
      const position = toastProps.position || 'topRight';
      positionGroup.has(position)
        ? positionGroup.get(position)!.push(toastProps)
        : positionGroup.set(position, [toastProps]);
    });
    return positionGroup;
  };

  return { getToastPositionGroupToRender };
};

export default useToastContainer;

export const ToastContainer = () => {
  const { getToastPositionGroupToRender } = useToastContainer();
  const positionGroup = getToastPositionGroupToRender();

  return Array.from(positionGroup).map(([position, toasts]) => (
    <div
      key={position}
      css={[
        css`
					position: fixed;
					display: flex;
					flex-direction: column;
					row-gap: 0.5rem;
					z-index: 9999;
					`,
					ToastPositionStyle[position],
					]} >
					{toasts.map((toastProps) => (
						<ToastItem key={toastProps.toastId} {...toastProps} />
		      ))}
    </div>
  ));
};

export const ToastProgressBarAnimation = keyframes`
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
`;

const ToastItem: React.FC<ToastProps> = ({
  toastId,
  text,
  autoClose = 3000,
  closeOnClick = true,
  type = 'default',
  pauseOnHover = true,
}) => {
  const toastRef = useRef<HTMLDivElement>(null);
  const [isExiting, setIsExiting] = useState(false);
  const [isPaused, setIsPaused] = useState(false);

  const handleExitingAnimationEnd = () => {
	  // 다음 내용에서 설명
  };

	const handleProgressAnimationEnd = () => {
	  autoClose && setIsExiting(true);
	};

	const handleClick = () => {
	  closeOnClick && handleProgressAnimationEnd();
	};

	const handleMouseEnter = () => {
	  pauseOnHover && autoClose && setIsPaused(true);
	};

	const handleMouseLeave = () => {
	  if (pauseOnHover && autoClose) {
		setIsPaused(false);
	  }
	};

  return (
    <div ref={toastRef}>
      <Box
        onClick={handleClick}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        onAnimationEnd={handleExitingAnimationEnd}
        css={css`
          animation: ${isExiting
            ? css`${ToastFadeOutUpAnimation} 0.8s forwards`
            : 'none'};
        `}
      >
        {text}
        <div
          onAnimationEnd={handleProgressAnimationEnd}
          css={css`
            transform-origin: left;
            animation: ${autoClose
              ? css`${ToastProgressBarAnimation} ${autoClose}ms linear forwards`
              : 'none'};
            animation-play-state: ${isPaused ? 'paused' : 'running'};
          `}
        />
      </Box>
    </div>
  );
};

export default ToastItem;

animation: ${isExiting
            ? css`${ToastFadeOutUpAnimation} 0.8s forwards`
            : 'none'};

export const ToastFadeOutUpAnimation = keyframes`
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-1.5rem);
  }
`;

// 위 애니메이션에 대한 animationend 이벤트 콜백함수
const handleExitingAnimationEnd = () => {
  eventManager.emit(ToastEvent.Delete, toastId);
};

const handleAnimationEnd = () => {
  requestAnimationFrame(() =>
    eventManager.emit(ToastEvent.Delete, toastId)
  );
};

export function collapseToast(
  node: HTMLDivElement,
  done: () => void,
  duration = 20000
) {
  const { scrollHeight, style } = node;

  requestAnimationFrame(() => {
    style.height = scrollHeight + 'px';
    style.transition = `all ${duration}ms`;

    requestAnimationFrame(() => {
      style.height = '0';
      setTimeout(done, duration);
    });
  });
}

const handleExitingAnimationEnd = () => {
  collapseToast(toastRef.current!, () => {
    eventManager.emit(ToastEvent.Delete, toastId);
  });
};

const generateUniqueId = () => {
  return Date.now().toString(36) + Math.random().toString(36).substring(4);
};

const emitToast = (type: ToastType, toastProps: ToastFunctionProps) => {
  const id = generateUniqueId();
  eventManager.emit(ToastEvent.Add, {
    ...toastProps,
    toastId: id,
    type,
  });
};

export const toast = {
  default: (text: string, toastOptions?: ToastOptions) =>
    emitToast('default', { text: text, ...toastOptions }),
  info: (text: string, toastOptions?: ToastOptions) =>
    emitToast('info', { text: text, ...toastOptions }),
  success: (text: string, toastOptions?: ToastOptions) =>
    emitToast('success', { text: text, ...toastOptions }),
  warning: (text: string, toastOptions?: ToastOptions) =>
    emitToast('warning', { text: text, ...toastOptions }),
  error: (text: string, toastOptions?: ToastOptions) =>
    emitToast('error', { text: text, ...toastOptions }),
};

toast.defualt("토스트에 들어갈 내용입니다");
toast.info("토스트에 들어갈 내용입니다");
toast.success("토스트에 들어갈 내용입니다");
toast.warning("토스트에 들어갈 내용입니다");
toast.error("토스트에 들어갈 내용입니다");

export type ToastOption = {
  autoClose?: false | number;
  closeOnClick?: boolean;
  pauseOnHover?: boolean;
  position?: ToastPosition;
};