import { actionAddins } from ".";
import $ from 'jquery';
import { IAction, IActionProperty, IActionNode, IActionResult } from "../types/ActionTypes";
/**
 * ボタン配置属性定義
 */
interface IButtonAddProps {
    //ボタン表示名
    buttonName: string;
    //配置位置
    position: string;
    //イベント名
    eventName:string
}   

export class ButtonAddAction implements IAction {
    name: string; 
    actionProps: IActionProperty[]; 
    props: IButtonAddProps;
    constructor() { 
        this.name = "ボタンの配置";
        this.actionProps = [];
        this.props = {
            buttonName: '',
            position: '',
            eventName:''
        }
        this.register();
    }

    /**
     * アクションの実行を呼び出す
     * @param actionNode 
     * @param event 
     * @returns 
     */
    async process(actionNode: IActionNode, event: any): Promise<IActionResult> { 
        let result = { 
            canNext: true,
            result: false
        };
        try { 
            this.actionProps = actionNode.actionProps;
            if (!('buttonName' in actionNode.ActionValue) && !('position' in actionNode.ActionValue)) { 
                return result
            }
            this.props = actionNode.ActionValue as IButtonAddProps; 
            //ボタンを配置する
            const menuSpace = kintone.app.record.getHeaderMenuSpaceElement();
            if(!menuSpace) return result;
            if($("style#alc-button-add").length===0){
                const css=`
                .alc-button-normal {
                    display: inline-block;
                    box-sizing: border-box;
                    padding: 0 16px;
                    margin-left: 16px;
                    margin-top: 8px;
                    min-width: 100px;
                    outline: none;
                    border: 1px solid #e3e7e8;
                    background-color: #f7f9fa;
                    box-shadow: 1px 1px 1px #fff inset;
                    color: #3498db;
                    text-align: center;
                    line-height: 32px;
                }
                .alc-button-normal:hover {
                    background-color: #c8d6dd;
                    box-shadow: none;
                    cursor: pointer;
                  }
                .alc-button-normal:active {
                    color: #f7f9fa;
                    background-color: #54b8eb;
                }`;
                const style = $("<style id='alc-button-add'>/<style>");
                style.text(css);
                $("head").append(style);
            }
            const button =$(`<button id='${this.props.eventName}' class='alc-button-normal' >${this.props.buttonName}</button>`);
            if(this.props.position==="一番左に追加する"){
                $(menuSpace).prepend(button);
            }else{
                $(menuSpace).append(button);
            }
            const clickEventName = `${event.type}.customButtonClick.${this.props.eventName}`;
            button.on("click",()=>{
                $(document).trigger(clickEventName,event);
            });
            return result;
        } catch (error) {
            event.error = error;
            console.error(error);
            result.canNext = false;
            return result;
        }
    }
  

    register(): void {
        actionAddins[this.name] = this;
    }

}
new ButtonAddAction();