import { PiniaPluginContext, StoreGeneric, _ActionsTree, _StoreOnActionListenerContext } from 'pinia';

const cloneDeep = <T>(obj: T): T => {
  try {
    return JSON.parse(JSON.stringify(obj));
  } catch {
    return { ...obj };
  }
};
const formatTime = (date = new Date()) => {
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');

  return `${hours}:${minutes}:${seconds}`;
};

export interface PiniaLoggerOptions {
  disabled?: boolean;
  expanded?: boolean;
  showDuration?: boolean
  showStoreName?: boolean;
  logErrors?: boolean;
}

export type PiniaActionListenerContext = _StoreOnActionListenerContext<StoreGeneric, string, _ActionsTree>;

const defaultOptions: PiniaLoggerOptions = {
  logErrors: true,
  disabled: false,
  expanded: true,
  showStoreName: true,
  showDuration: false,
};

export const PiniaLogger = (config = defaultOptions) => (ctx: PiniaPluginContext) => {
  const options = {
    ...defaultOptions,
    ...config,
  };

  if (options.disabled) return;


  ctx.store.$onAction((action: PiniaActionListenerContext) => {
    const startTime = Date.now();
    const prevState = cloneDeep(ctx.store.$state);

    const log = (isError?: boolean, error?: any) => {
      const endTime = Date.now();
      const duration = endTime - startTime + 'ms';
      const nextState = cloneDeep(ctx.store.$state);
      const storeName = action.store.$id;
      const title = `${formatTime()} action 🍍 ${options.showStoreName ? `[${storeName}] ` : ''}${action.name} ${isError ? `failed after ` : ''}in ${duration}`;

      console[options.expanded ? 'group' : 'groupCollapsed'](`%c${title}`, `font-weight: bold; ${isError ? 'color: #ed4981;' : ''}`);
      console.log('%cprev state', 'font-weight: bold; color: grey;', prevState);
      console.log('%caction', 'font-weight: bold; color: #69B7FF;', {
        type: action.name,
        args: action.args.length > 0 ? { ...action.args } : undefined,
        ...(options.showStoreName && { store: action.store.$id }),
        ...(options.showDuration && { duration }),
        ...(isError && { error }),
      });
      console.log('%cnext state', 'font-weight: bold; color: #4caf50;', nextState);
      console.groupEnd();
    };

    action.after(() => {
      log();
    });

    if (options.logErrors) {
      action.onError((error) => {
        log(true, error);
      });
    }
  });
};

export default PiniaLogger;