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 "../../../Models/CorrespondenceReply";
import { RecordService, EntityService} from "../../../Services";
import { LoadingService } from "../../../Services/LoadingService";

export class RejectCorrespondence 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 = {
            reasonLookupsForReject: [],
            replyObj: new CorrespondenceReply()
        }

        this.getReasonsForReject();
    }

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

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

    private rejectCorrespondence(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.rejectCorrespondence(this.state.replyObj)
                .then(() => {
                    if (this.props.OnPostSubmit)
                        this.props.OnPostSubmit();
                    //this.loadRecorders();
                    //this.setState({ showTransferPanel: false });
                    if (button && button.unblock) button.unblock();

        this._loadingService.hide();

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


                });
        }
    }
    
    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>
        )
    }
    
    _handleCorrespondenceReplyReasonsChange(reason: any) {
        //debugger;
        if (this.state.replyObj) {
            let replyObj = this.state.replyObj;
            replyObj.reason = reason.key;
            this.setState({ replyObj: replyObj });
        }
    }

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

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

        this._loadingService.hide();

            // this.state.reasonLookups = result;
            this.setState({ reasonLookupsForReject: result })

        }, 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.closeRejectPanel.bind(this)}
            type={PanelType.medium}
            headerText="Reject"
            isFooterAtBottom={true}
            isLightDismiss={true}
            hasCloseButton={false}
            onRenderFooter={this._showRejectbtn}
            onRenderHeader={this._onReadnderHader}
        >
            <div className="ms-Grid-row">
                <div className="ms-Grid-col ms-sm12">
                    <Label htmlFor="acceptComment"><FormattedMessage id="Comment" /></Label>
                    <TextField 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">

                    <Label htmlFor="acceptReason"><FormattedMessage id="Reason" /></Label>
                    <Dropdown className="ms-Grid-col ms-lg12"
                        options={this.state.reasonLookupsForReject.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>);
    }

}