import {
  FieldContext,
  FieldState,
  GenericObject,
  MaybeArray,
} from 'vee-validate';
import { Ref, Slot } from 'vue';

import {
  ClassComponent,
  GlobalComponentConstructor,
  HintedString,
  Nullable,
} from '../ts-helpers.d';

export type Condition =
  | 'empty'
  | 'exceed'
  | 'invalidFormat'
  | 'exist'
  | 'mismatch';

export type CustomValidation<T extends Partial<Condition> = Condition> =
  Partial<Record<T, string>>;

type FieldValue =
  | Nullable<string>
  | Nullable<number>
  | string
  | string[]
  | number
  | number[]
  | boolean
  | undefined
  | null
  | object;

export type FieldValidation<T = FieldValue | undefined> =
  | {
      value: T;
      errorMessage?: Ref<string | undefined>;
      setErrors?: (errors?: string | string[]) => void;
      handleReset?: () => void;
      validate?: () => void;
      setValue?: (value: any, shouldValidate?: boolean) => void;
    }
  | (Omit<FieldContext, 'value'> & {
      value: T;
    });

export type FormValue =
  | string
  | boolean
  | number
  | File
  | GenericObject
  | MaybeArray<any>;

/**
 * Generic form payload, able to receive types from outside
 */
export type FormPayload<FormValuesType = Record<string, FormValue>> = {
  stayAfterSubmit: boolean;
  formValues: FormValuesType;
};

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

  /**
   * Conditionally disable submit button.
   */
  disableSubmit?: boolean;

  /**
   * Custom button cancel label.
   */
  cancelBtnLabel?: string;

  /**
   * Custom button clear label.
   */
  clearBtnLabel?: string;

  /**
   * The number of columns per row.
   * @default 1;
   */
  columnPerRow?: number;

  /**
   * Determines whether form footer should be hidden or not
   */
  hideFooter?: boolean;

  /**
   * Determines if the stay checkbox should be hidden.
   */
  hideStayCheckbox?: boolean;

  /**
   * Invalid form state.
   */
  invalid?: boolean;

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

  /**
   * Custom button save label.
   */
  saveBtnLabel?: string;

  /**
   * Custom button submit label.
   */
  submitBtnLabel?: string;

  /**
   * Custom label for stay checkbox.
   */
  stayCheckboxLabel?: string;

  /**
   * Custom submit form validator message.
   */
  validatorMessage?: string;

  /**
   * Determine whether button template "Save" should also behave like "Submit" (use validations)
   *
   * @default false
   */
  validateOnSave?: boolean;

  /**
   * Defines the style of the cancel button.
   */
  cancelBtnSeverity?: HintedString<
    | 'secondary'
    | 'success'
    | 'info'
    | 'warning'
    | 'help'
    | 'danger'
    | 'contrast'
  >;

  /**
   * Defines the style of the submit button.
   */
  saveBtnSeverity?: HintedString<
    | 'secondary'
    | 'success'
    | 'info'
    | 'warning'
    | 'help'
    | 'danger'
    | 'contrast'
  >;

  /**
   * Defines the style of the submit button.
   */
  submitBtnSeverity?: HintedString<
    | 'secondary'
    | 'success'
    | 'info'
    | 'warning'
    | 'help'
    | 'danger'
    | 'contrast'
  >;
}

/**
 * Slots for Form component
 */
export interface FormSlots {
  /**
   * The fields slot for the form. Here is where you can put your form fields.
   */
  fields: Slot<{ formValues: GenericObject; key?: number }>;
}

/**
 * Emits for Form component
 */
export type FormEmits = {
  /**
   * Emitted when button template `Cancel` clicked (doesn't matter its label)
   */
  cancel: [];

  /**
   * Emitted when button template `Clear` clicked (doesn't matter its label)
   */
  clear: [];

  /**
   * Emitted when button template `Save` clicked (doesn't matter its label)
   */
  save: [values: FormPayload];

  /**
   * Emitted when button template `Submit` clicked (doesn't matter its label)
   */
  submit: [values: FormPayload];
};

/**
 * **WangsVue - Form**
 *
 * _Form is a component for creating forms with 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 Form extends ClassComponent<FormProps, FormSlots, FormEmits> {
  /**
   * Exposed errors of form
   */
  errors: Partial<Record<string, string>>;

  /**
   * The ref of form element.
   */
  formElement: HTMLFormElement;

  /**
   * Whether to show validator or not
   */
  showValidator: boolean;

  /**
   * Whether to keep the dialog remains visible or not after submit.
   */
  stayAfterSubmit: boolean;

  /**
   * Exposed function to clears the form fields.
   */
  clearField: () => void;

  /**
   * Exposed function to clears the specific field.
   */
  resetField: (field: string, state?: Partial<FieldState>) => void;

  /**
   * Exposed function that handle submit inside form component
   */
  submit: (e?: Event | undefined) => Promise<void | undefined>;

  /**
   * Callback invoked on Button Submit clicked
   */
  onSubmitClicked: () => void;

  /**
   * Callback invoked on Button Save clicked
   */
  onSaveClicked: () => void;

  /**
   * Exposed function to set the outer fields wrapper height.
   */
  setOuterFieldsWrapperHeight: () => void;

  /**
   * Set the form values.
   */
  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;

  /**
   * The form values
   */
  values: GenericObject;

  isSubmitClicked: boolean;
}

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

export default Form;