import { Props, console, Component, Event } from "waft";
import { JSON, JSONObject } from "waft-json";

export class XButton extends Component {
  constructor(props: Props) {
    super(props);
  }

  buttonClick(e: Event): void {
    if (this.props.get("disabled").toString() == "true") {
      return;
    }
    this.props.dispatch("onTap", new JSONObject());
  }

  clickStart(e: Event): void {
    if (this.props.get("disabled").toString() == "true") {
      return;
    }
    this.setState(JSON.parseObject(`{
      "disabled": true
    }`));
  }

  clickEnd(e: Event): void {
    if (this.props.get("disabled").toString() == "true") {
      return;
    }
    this.setState(JSON.parseObject(`{
      "disabled": false
    }`));
  }

  willMount(props: JSONObject): void {
    let stateData: JSONObject = new JSONObject();
    // 根据 type 设置默认样式
    if (props.has("type")) {
      if (props.getString("type") == "primary") {
        stateData.set("bgColor", "#0082ff");
        stateData.set("borderColor", "#0082ff");
        stateData.set("textColor", "#ffffff");
      } else if (props.getString("type") == "secondary") {
        stateData.set("bgColor", "#ffffff");
        stateData.set("borderColor", "#0082ff");
        stateData.set("textColor", "#0082ff");
      } else if (props.getString("type") == "tip") {
        stateData.set("bgColor", "#ffffff");
        stateData.set("borderColor", "#ffffff");
        stateData.set("textColor", "#2B3852");
      } else {
        stateData.set("bgColor", "#ffffff");
        stateData.set("borderColor", "#E1E1E1");
        stateData.set("textColor", "#2b3852");
      }
    } else {
      stateData.set("textColor", "#2b3852");
    }
    // 使用业务指定的属性来覆盖默认属性
    if (props.has("bgColor")) {
      // 若设置bgcolor，则按钮字体颜色设置为白色
      stateData.set("textColor", "#ffffff");
      stateData.set("bgColor", props.getString("bgColor"));
    }
    if (props.has("borderColor")) {
      stateData.set("borderColor", props.getString("borderColor"));
    }
    if (props.has("textColor")) {
      stateData.set("textColor", props.getString("textColor"));
    }
    this.setState(stateData);
  }
}