import * as React from "react";
import { Panel, PanelType, Label, IconButton } from "office-ui-fabric-react";
import { FormattedMessage } from "react-intl";
import { PrimaryButton } from "./PrimaryButton";
import { RecordService } from "src/Services";
import { LoadingService } from "src/Services/LoadingService";
import { Editor } from "src/Controls/HtmlEditor";
import { RecordField } from "src/Models";

export class UpdateLetterDetails extends React.Component<any, any> {
    private _recordService: RecordService = new RecordService();
    private _loadingService = new LoadingService();
    constructor(props: any) {
        super(props);
        this.state = {
         
        }
    }

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

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

    private updateLetterDetails(button: any) {
        if (button && button.block) button.block();

        if (this.props.Record) {
            this._loadingService.show();

            this._recordService.updateLetterDetails(this.props.Record).then(
                () => {
                    if (this.props.closeUpdateLetterDetailsPanel)
                        this.props.closeUpdateLetterDetailsPanel();

                    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>
        )
    }

    _handleEditorStateChange(item: RecordField, e: any) {
        // if(item)

        item.data = e.target.getContent();
        if (item.data.trim() == "<p></p>") item.data = null;
        this.forceUpdate();
    }

    render() {
        let letterDetailsField: any;
        if (this.props.Record.fields) {
            this.props.Record.fields.forEach((field: any) => {
                if (field.id == 161)
                    letterDetailsField = field;
            });
        }
        
        return (<Panel
            className="panelStyle"
            isOpen={this.props.open}
            onDismissed={this.props.closeUpdateLetterDetailsPanel.bind(this)}
            type={PanelType.medium}
            headerText="Update"
            isFooterAtBottom={true}
            isLightDismiss={true}
            hasCloseButton={false}
            onRenderFooter={this._showUpdateLetterDetailsbtn}
            onRenderHeader={this._onReadnderHader}
        >
            <div className="ms-Grid-row">
                <div className="ms-Grid-col ms-sm12">
                    <Label htmlFor="acceptComment"><FormattedMessage id="Letter Details" /></Label>
                    <Editor initialValue={letterDetailsField.data}
                        onChange={this._handleEditorStateChange.bind(
                            this,
                            letterDetailsField
                        )}>

                    </Editor>
                </div>
            </div>

        </Panel>);
    }
}