import { Dom7Instance } from 'dom7';
import Framework7, { CSSSelector, Framework7EventsClass, Framework7Plugin } from '../app/app-class';

export namespace Actions {
  interface Actions extends Framework7EventsClass<Events> {
    /** Link to global app instance */
    app : Framework7
    /** Action sheet HTML element */
    el : HTMLElement
    /** Dom7 instance with action sheet HTML element */
    $el : Dom7Instance
    /** Backdrop HTML element */
    backdropEl : HTMLElement
    /** Dom7 instance with backdrop HTML element */
    $backdropEl : Dom7Instance
    /** Action sheet instance parameters */
    params : Parameters
    /** Boolean prop indicating whether action sheet is opened or not */
    opened : boolean

    /** Open action sheet. Where animate - boolean (by default true) - defines whether it should be opened with animation */
    open(animate? : boolean) : void
    /** Close action sheet. Where animate - boolean (by default true) - defines whether it should be closed with animation */
    close(animate? : boolean) : void
    /** Destroy action sheet */
    destroy() : void
  }

  interface Button {
    /** String with Button's text (could be HTML string) */
    text:string
    /** HTML string of icon */
    icon?:string
    /** Enables bold button text */
    bold?:boolean
    /** Button color, one of default colors */
    color?:string
    /** Button background color, one of default colors */
    bg?:string
    /** If enabled then it will be rendered as label instead of button */
    label?:boolean
    /** Defines whether the button is disabled or not. */
    disabled?:boolean
    /** If enabled then button click will close Action Sheet */
    close?:boolean
    /** Callback function that will be executed after click on this button */
    onClick?: (actions : Actions, e: unknown) => void
  }

  interface Parameters {
    /** Action Sheet element. Can be useful if you already have Action Sheet element in your HTML and want to create new instance using this element*/
    el?:HTMLElement
    /** Full Action Sheet HTML content string. Can be useful if you want to create Action Sheet element with custom HTML*/
    content?:string
    /** Enables Action Sheet backdrop (dark semi transparent layer behind)*/
    backdrop?:boolean
    /** When enabled, action sheet will be closed on backdrop click*/
    closeByBackdropClick?:boolean
    /** When enabled, action sheet will be closed on when click outside of it*/
    closeByOutsideClick?:boolean
    /** Whether the Action Sheet should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods*/
    animate?:boolean
    /** Action sheet groups/buttons. In this case Actions layout will be generated dynamically based on passed groups and buttons. In case of groups it should array where each item represent array with buttons for group.*/
    buttons?: Button[]
    /** Enables grid buttons layout*/
    grid?:boolean
    /** When enabled, action sheet will be converted to Popoveron large screens.*/
    convertToPopover?:boolean
    /** When enabled, action sheel will be always converted to Popover.*/
    forceToPopover?:boolean
    /** HTML element or string CSS selector of target element. Required when converstion to popover is in use*/
    targetEl?: HTMLElement | CSSSelector
    /** Virtual target element horizontal offset from left side of the screen. Required when converstion to popover is in use without using real target element (targetEl)*/
    targetX?:number
    /** Virtual target element vertical offset from top of the screen. Required when converstion to popover is in use without using real target element (targetEl)*/
    targetY?:number
    /** Virtual target element width (in px). Required when converstion to popover is in use without using real target element (targetEl)*/
    targetWidth?:number
    /** Virtual target element height (in px). Required when converstion to popover is in use without using real target element (targetEl)*/
    targetHeight?:number
    /** Callback function that will be executed after click on the Action Sheet button*/
    onClick?: (actions : Actions, e: unknown) => void
    /** Custom function to render Action Sheet. Must return Action Sheet html*/
    render?: () => string
    /** Custom function to render Popover when conversition to popover is in use. Must return Popover html*/
    renderPopover?: () => string
    /** Object with event handlers */
    on?: {
      [event in keyof Events]? : Events[event]
    }
  }

  interface Events {
    /** Event will be triggered when Action Sheet starts its opening animation. As an argument event handler receives action sheet instance */
    open : (actions : Actions) => void
    /** Event will be triggered after Action Sheet completes its opening animation. As an argument event handler receives action sheet instance */
    opened : (actions : Actions) => void
    /** Event will be triggered when Action Sheet starts its closing animation. As an argument event handler receives action sheet instance */
    close : (actions : Actions) => void
    /** Event will be triggered after Action Sheet completes its closing animation. As an argument event handler receives action sheet instance */
    closed : (actions : Actions) => void
    /** Event will be triggered right before Action Sheet instance will be destroyed. As an argument event handler receives action sheet instance */
    beforeDestroy : (actions : Actions) => void
  }

  interface DomEvents {
    /** Event will be triggered when Action Sheet starts its opening animation */
    'actions:open' : (actions : Actions) => void
    /** Event will be triggered after Action Sheet completes its opening animation */
    'actions:opened' : (actions : Actions) => void
    /** Event will be triggered when Action Sheet starts its closing animation */
    'actions:close' : (actions : Actions) => void
    /** Event will be triggered after Action Sheet completes its closing animation */
    'actions:closed' : (actions : Actions) => void
  }

  interface AppMethods {
    actions: {
      /** create Action Sheet instance */
      create(parameters : Parameters) : Actions;
      /** destroy Action Sheet instance */
      destroy(el : HTMLElement | CSSSelector | Actions) : void;
      /** get Action Sheet instance by HTML element */
      get(el? : HTMLElement | CSSSelector) : Actions;
      /** opens Action Sheet */
      open(el? : HTMLElement | CSSSelector, animate? : boolean) : Actions;
      /** closes Action Sheet */
      close(el? : HTMLElement | CSSSelector, animate? : boolean) : Actions;
    }
  }
  interface AppParams {
    actions?: Parameters | undefined
  }
  interface AppEvents {
    /** Event will be triggered when Action Sheet starts its opening animation. As an argument event handler receives action sheet instance */
    actionsOpen : (actions : Actions) => void
    /** Event will be triggered after Action Sheet completes its opening animation. As an argument event handler receives action sheet instance */
    actionsOpened : (actions : Actions) => void
    /** Event will be triggered when Action Sheet starts its closing animation. As an argument event handler receives action sheet instance */
    actionsClose : (actions : Actions) => void
    /** Event will be triggered after Action Sheet completes its closing animation. As an argument event handler receives action sheet instance */
    actionsClosed : (actions : Actions) => void
    /** Event will be triggered right before Action Sheet instance will be destroyed. As an argument event handler receives action sheet instance */
    actionsBeforeDestroy : (actions : Actions) => void
  }
}

declare const ActionsComponent: Framework7Plugin;

export default ActionsComponent;