import * as React from "react";
import { Panel, PanelType, Label, TextField, Dropdown, IconButton } from "office-ui-fabric-react";
import { FormattedMessage } from "react-intl";
import { PrimaryButton } from "./PrimaryButton";
import { CorrespondenceReply } from "src/Models/CorrespondenceReply";
import { RecordService, EntityService } from "src/Services";
import { LoadingService } from "src/Services/LoadingService";

export class ApproveCorrespondence extends React.Component<any, any> {

    private _recordService: RecordService = new RecordService();
    private _entityService: EntityService = new EntityService();
    private _loadingService = new LoadingService();
    constructor(props: any) {
        super(props);
        this.state = {
            reasonLookupsForApprove: [],
            replyObj: new CorrespondenceReply()
        }

        this.getReasonsForApprove();
    }

    private _showApprovebtn = (): JSX.Element => {
        return (
            <div className="sticky-footer-btns" >

                <PrimaryButton
                    onClick={this.approveCorrespondence.bind(this)}
                    style={{ margin: '5px' }} >
                    <FormattedMessage id="Approve" />
                </PrimaryButton>
            </div>
        )
    }

    private _onReadnderHader = (item: any): JSX.Element | null => {
        return (
            <div className="ms-Panel-commands" data-is-visible="true">
                <div className="ms-Panel-navigation navigation_1033a520">
                    <h2 className="panel-header-text "><FormattedMessage id={item.headerText} /></h2>
                    <IconButton className="ms-Panel-closeButton ms-PanelAction-close custom" onClick={item.onDismissed.bind(this)}
                        iconProps={{ iconName: 'ChromeClose', style: { fontSize: 12 } }}></IconButton>
                </div>
            </div>
            // <div className="panel-header-text "><FormattedMessage id={item.headerText} /></div>
        )
    }

    _handleCorrespondenceReplyCommentsChange(comment: string) {
        if (this.state.replyObj) {
            let replyObj = this.state.replyObj;
            replyObj.comment = comment;
            this.setState({ replyObj: replyObj });
        }
    }

    _handleCorrespondenceReplyReasonsChange(reason: any) {
        //debugger;
        if (this.state.replyObj) {
            let replyObj = this.state.replyObj;
            replyObj.reason = reason.key;
            this.setState({ replyObj: replyObj });
        }
    }


    private approveCorrespondence(button: any) {
        if (button && button.block) button.block();
        if (this.state.replyObj) {
        this._loadingService.show();

            this.state.replyObj.correspondenceId = this.props.Record.id;
            this._recordService.approveCorrespondence(this.state.replyObj)
                .then(() => {
                    if (this.props.closeApprovePanel)
                        this.props.closeApprovePanel();
                    if (button && button.unblock) button.unblock();
                    this._loadingService.hide();

                    //this.loadRecorders();
                }, (error: any) => {
                    alert(error);
                    if (button && button.unblock) button.unblock();
                    this._loadingService.hide();

                });
        }
    }

    getReasonsForApprove() {
        this._loadingService.show();
        this._entityService.getReasonLookups('approve').then((result: any) => {

            // this.state.reasonLookups = result;
            this.setState({ reasonLookupsForApprove: result })
        this._loadingService.hide();

        }, error => {
            // alert(error.text());
            // this.toastr.error('', error.text());            
            //this.displayAlertModal(error.text());
            alert(error);
        this._loadingService.hide();

        });
    }

    public render() {
        return (
            <Panel
                className="panelStyle"
                isOpen={this.props.open}
                onDismissed={this.props.closeApprovePanel.bind(this)}
                type={PanelType.medium}
                headerText="Approve"
                isLightDismiss={true}
                isFooterAtBottom={true}
                hasCloseButton={false}
                onRenderFooter={this._showApprovebtn}
                onRenderHeader={this._onReadnderHader}
            >
                <div className="ms-Grid-row">
                    <div className="ms-Grid-col ms-sm12">

                        <Label htmlFor="acceptComment"><FormattedMessage id="Comment" /></Label>
                        <TextField id="acceptComment" value={this.state.replyObj.comment} className="ms-Grid-col ms-lg12" multiline rows={4}
                            onChanged={this._handleCorrespondenceReplyCommentsChange.bind(this)} />
                    </div>
                    <div className="ms-Grid-col ms-lg12" style={{ display: 'none' }}>
                        <Label htmlFor="acceptReason"><FormattedMessage id="Reason" /></Label>
                        <Dropdown className="ms-Grid-col ms-lg12"
                            options={this.state.reasonLookupsForApprove.map((lookup: any) => {
                                return { key: lookup.id, text: lookup.value }
                            })}
                            // value={this.state.selectedCorrespondenceTransfer.reason}
                            onChanged={this._handleCorrespondenceReplyReasonsChange.bind(this)} />

                    </div>
                    {/* <d
                        iv className="ms-Grid-col ms-lg12" style={{ marginTop: 15 }}>
                            <label className='ms-font-xl	ms-fontWeight-semibold	'>Handler Parameters</label>
                        </div>
                        {
                            this.state.selectedWorkflowHandler && this.state.selectedWorkflowHandler.handlerParams &&
                            this.state.selectedWorkflowHandler.handlerParams.map((element: any) => {
                                return (<div className="ms-Grid-col ms-lg12">
                                    <TextField label={element.name} required={element.required} />
                                </div>)
                            })} */}
                </div>

            </Panel>
        )
    }
}