import { VNode } from 'vue';

import { BadgeProps } from '../badge';
import { JSONContent } from '../editor';
import { ClassComponent } from '../ts-helpers.d';

export interface AttachmentFile {
  type: 'image' | 'xls' | 'doc' | 'pdf' | 'csv' | 'video' | 'data';
  filePath?: string;
}

export interface AttachmentLink {
  type: 'link';
  url?: string;
}

export interface LinkTaskURL {
  type: 'taskUrl';
  url: string;
}

export interface LinkTaskIframeEmbed {
  type: 'embed';
  code: string;
}

export interface DetailText {
  type: 'text';
  value: string;
}

export interface DetailBadge extends BadgeProps {
  type: 'badge';
}

export interface DetailUserText {
  type: 'userText';
  user: {
    _id: string;
    nickName: string;
  };
  text: string;
}

export interface DetailBullet {
  type: 'bullet';
  value: (string | DetailUserText)[];
}

export interface DetailJSONContent {
  type: 'json';
  value: JSONContent;
}

export type Attachment =
  | AttachmentLink
  | AttachmentFile
  | LinkTaskIframeEmbed
  | LinkTaskURL;

export type LinkTaskEditAction = Record<
  'Sebelum' | 'Sesudah',
  LinkTaskURL | LinkTaskIframeEmbed
>;

export type DetailType =
  | Attachment
  | LinkTaskEditAction
  | DetailText
  | DetailUserText
  | DetailBullet
  | DetailJSONContent
  | DetailBadge;

export type DetailAnyRecord = Record<string, any>;

export type SlotDetailType = string | DetailAnyRecord;

export type KeyValue = Record<string, string | DetailType>;

export type TimelineItem = {
  _id: string;
  action: string;
  createdAt: string;
  username?: string;
  user?: {
    _id: string;
    nickName: string;
  };
  // Detail can be a record of any type if using the detail slot
  detail?: KeyValue | DetailType | SlotDetailType;
};

export interface TimelineProps {
  value: TimelineItem[];
  /**
   * Whether the detail values should be aligned with each other or not.
   * @defaultValue false
   */
  alignDetail?: boolean;
  /**
   * Whether the timeline should be scrollable or not.
   * @defaultValue false
   */
  noScroll?: boolean;
  /**
   * Whether the createdAt field should be displayed in raw format or not.
   * @defaultValue false
   */
  noFormatDate?: boolean;
}

export interface TimelineSlots {
  /**
   * Custom detail template.
   *
   * Use this slot if you want to configure your own detail value in each timeline
   */
  detail: (slotProps: {
    key: string;
    value: SlotDetailType; // Type DetailAnyRecord only used when using slot since you can use your own object structure
  }) => VNode[];
  /**
   * Custom date template.
   *
   */
  date: (slotProps: { date: string }) => VNode[];
  /**
   * Custom user template.
   */
  user: (slotProps: { user: string; detail: DetailAnyRecord }) => VNode[];
}

/**
 * **WangsVue - Timeline**
 *
 * _Timeline visualizes a series of chained events._
 *
 * [Live Demo](https://fewangsit.github.io/wangsvue/timeline/)
 * --- ---
 *
 * @group Component
 */
declare class Timeline extends ClassComponent<
  TimelineProps,
  TimelineSlots,
  unknown
> {}

export default Timeline;