import * as React from "react";
import { Notice } from "obsidian";

type ButtonProps = {
  title: string;
  action: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  longpress?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  icon: React.JSX.Element;
};

type ButtonState = {
  visible: boolean;
};

export class ActionButton extends React.Component<ButtonProps, ButtonState> {
  toastMessageTimeout: number = 0;
  longpressTimeout: number = 0;

  constructor(props: ButtonProps) {
    super(props);
    this.state = {
      visible: true,
    };
  }

  componentWillUnmount(): void {
    this.render = () => null;
  }

  render() {
    return (
      <button
        style={
          {
            //width: "fit-content",
            //padding: "2px",
            //margin: "4px",
          }
        }
        className="ToolIcon_type_button ToolIcon_size_small ToolIcon_type_button--show ToolIcon"
        title={this.props.title}
        onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
          if (this.toastMessageTimeout) {
            window.clearTimeout(this.toastMessageTimeout);
            this.toastMessageTimeout = 0;
            this.props.action(event); //don't invoke the action on long press
          }
          if (this.longpressTimeout) {
            window.clearTimeout(this.longpressTimeout);
            this.longpressTimeout = 0;
          }
        }}
        onPointerDown={(
          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
        ) => {
          this.toastMessageTimeout = window.setTimeout(() => {
            new Notice(this.props.title, 3000);
            //this.props.view.excalidrawAPI?.setToast({message:this.props.title, duration: 3000, closable: true});
            this.toastMessageTimeout = 0;
          }, 400);
          this.longpressTimeout = window.setTimeout(() => {
            if (this.props.longpress) {
              this.props.longpress(event);
            } else {
              new Notice("Cannot pin this action", 3000);
              //this.props.view.excalidrawAPI?.setToast({message:"Cannot pin this action", duration: 3000, closable: true});
            }
            this.longpressTimeout = 0;
          }, 1500);
        }}
      >
        <div className="ToolIcon__icon" aria-hidden="true">
          {this.props.icon}
        </div>
      </button>
    );
  }
}
