import { GenericObject } from 'vee-validate';
import { Slot } from 'vue';

import FormInstance, { FormPayload, FormProps } from '../form';
import { WangsIcons } from '../icon';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';

export interface DialogFormLocaleConfig {
  /**
   * @example 'Cancel'
   */
  cancelBtnLabel?: string;

  /**
   * @example 'Clear Field'
   */
  clearBtnLabel?: string;

  /**
   * @example 'Stay after submit'
   */
  stayCheckboxLabel?: string;

  /**
   * @example 'Submit'
   */
  submitBtnLabel?: string;

  /**
   * Set the label for button expand sidebar right when it is expanded.
   *
   * @example 'Tutup <'
   */
  asideRightExpandedButtonLabel?: string;

  /**
   * Set the label for button expand sidebar right when it is collapsed.
   *
   * @example 'Lihat data yang ada >'
   */
  asideRightCollapsedButtonLabel?: string;
}

/**
 * Props for DialogForm component
 */
export interface DialogFormProps extends FormProps {
  /**
   * The template for form buttons.
   */
  buttonsTemplate?: ('clear' | 'submit' | 'cancel')[];

  /**
   * Value binding to show/hide the dialog.
   */
  visible: boolean;

  /**
   * The dialog header.
   */
  header?: string;

  /**
   * With in pixel
   *
   * @default 260
   */
  asideRightWidth?: number;
  class?: string | string[] | object[];

  /**
   * Custom button cancel label.
   *
   * @default - The default value from locale configuration {@link DialogFormLocaleConfig.cancelBtnLabel}
   *
   */
  cancelBtnLabel?: string;

  /**
   * Custom button clear label.
   *
   * @default - The default value from locale configuration {@link DialogFormLocaleConfig.clearBtnLabel}
   */
  clearBtnLabel?: string;

  /**
   * Wether show the Close icon or not.
   */
  closable?: boolean;

  /**
   * Close dialog after form validated and submitted.
   *
   * @default true
   */
  closeOnSubmit?: boolean;

  /**
   * @deprecated
   */
  contentClass?: string | string[] | object[];

  /**
   * Show Date time on header.
   */
  dateHeader?: string;

  /**
   * Set the header icon left beside of the title.
   */
  headerIcon?: WangsIcons;

  /**
   * Sets the invalid state.
   *
   * @default false
   */
  invalid?: boolean;

  /**
   * Prevent form resets after submitted. Default is resetted.
   *
   * @default true
   */
  resetAfterSubmit?: boolean;

  /**
   * The severity of the dialog.
   * The severity will determine the dialog icons and color scheme.
   */
  severity?: 'success' | 'danger' | 'primary';

  /**
   * Show or hide the checkbox 'Stay after submit.'
   *
   * @default false
   */
  showStayCheckbox?: boolean;

  /**
   * Custom label for stay checkbox.
   *
   * @default - The default value from locale configuration {@link DialogFormLocaleConfig.stayCheckboxLabel}
   */
  stayCheckboxLabel?: string;

  /**
   * Custom button submit label.
   * @default - The default value from locale configuration {@link DialogFormLocaleConfig.submitBtnLabel}
   */
  submitBtnLabel?: string;

  /**
   * Define the invalid message to be shown on invalid state above the Form submit button.
   *
   * @default undefined
   */
  validatorMessage?: string;

  /**
   * Additional validation function.
   * Within this this function, you need to set the invalid props value.
   *
   * If after executing this function the props invalid is true, the form will not be submitted.
   * Otherwise, 'submit' event will be emitted.
   *
   * @param values - the Form values
   */
  validationFunction?: (values: GenericObject) => void | Promise<void>;

  /**
   * Set the dialog size.
   *
   * - small: 400px
   * - medium: 500px
   * - large: 572px
   * - semi-xlarge: 600px
   * - xlarge: 800px
   *
   * @default 'small';
   */
  width?: 'small' | 'medium' | 'large' | 'semi-xlarge' | 'xlarge';
}

export interface ConfirmSlots {
  /**
   * The Visible state.
   */
  visible: boolean;

  /**
   * Hide the confirm dialog.
   */
  hide: () => void;

  /**
   * The submit function to be called after confirmation.
   */
  submit: (submitFn: (value: FormPayload) => Promise<void> | void) => void;
}

export interface ActionSlots {
  /**
   * Triggers form validation and emits the submit event if validation passes.
   */
  submit: () => void;
}

/**
 * Slots for DialogForm component
 */
export interface DialogFormSlots {
  /**
   * Slot for action buttons.
   */
  'actionButtons': Slot<ActionSlots>;

  /**
   * Slot for aside right expansion.
   */
  'aside-right': Slot;

  /**
   * Slot for dialog confirm.
   */
  'confirm': Slot<ConfirmSlots>;

  /**
   * The fields slot for the Dialogform. Here is where you can put your Dialogform fields.
   */
  'fields': Slot<{ formValues: GenericObject; key?: number }>;

  /**
   * Slot for dialog header.
   */
  'header': Slot;
}

/**
 * Emits for DialogForm component
 */
export type DialogFormEmits = {
  /**
   * Emits when 'Clear Field' button clicked.
   */
  'clear': [];

  /**
   * When dialog is closed by close button.
   */
  'close': [];

  /**
   * Callback to invoke when dialog is hidden.
   */
  'hide': [];

  /**
   * Callback to invoke when dialog is shown.
   */
  'show': [];

  /**
   * Emits when the form validation succes and props.invalid is 'false'.
   */
  'submit': [values: FormPayload];

  /**
   * When dialog is closed.
   */
  'update:visible': [state: boolean];
};

/**
 * **WangsVue - DialogForm**
 *
 * _DialogForm is combination of Form and Dialog. Handles validation on submit using vee-validate.
 * You need to install vee-validate while using this component._
 *
 * --- ---
 * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
 *
 * @group components
 */
declare class DialogForm extends ClassComponent<
  DialogFormProps,
  DialogFormSlots,
  DialogFormEmits
> {
  /**
   * Exposed function to clears the form fields.
   */
  clearField: () => void;

  /**
   * The ref of form element.
   */
  form?: FormInstance;

  /**
   * Set initial values for all fields.
   */
  setValues: (values: GenericObject) => void;

  /**
   * Set value for specific field.
   */
  setFieldValue: <T extends string>(
    field: T,
    value: GenericObject[T],
    shouldValidate?: boolean,
  ) => void;

  /**
   * Set errors fields
   * @param fields - {
   *   name: 'This name already exists'
   * }
   */
  setErrors(fields: GenericObject): void;
}

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    DialogForm: GlobalComponentConstructor<DialogForm>;
  }
}

export default DialogForm;