import * as React from "react";
import { FieldsControl } from "../FieldsControl";
import { LoadingService } from "../../../Services/LoadingService";
import { RecordService } from "../../../Services";
import { Panel, PanelType, IconButton } from "office-ui-fabric-react";
import { FormattedMessage } from "react-intl";

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

    private _loadingService = new LoadingService();
    private _recordService: RecordService = new RecordService();

    constructor(props: any) {
        super(props);

        this.state = {
            selectedRecord: {}
        }

        this._getRecord();
    }

    private _saveRecord(record: any) {
        // let _this = this;
        this._loadingService.show();
        //debugger;
        return this._recordService.saveRecord(this.state.selectedRecord).then(
            result => {
                this._loadingService.hide();
                this.props.closePanel();

                if (this.props.onExecute)
                    this.props.onExecute();
            },
            err => {
                // err.response.data
                this._loadingService.hide();
            }
        );
    }

    private _getRecord() {
        let _this = this;
        this._loadingService.show();

        this._recordService.getRecord(33, this.props.recordId)
            .then(result => {
                this.setState({ selectedRecord: result });

                this._loadingService.hide();
            },
                error => {
                    this._loadingService.hide();
                })
            .catch(err => {
                _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>
        )
    }

    private renderListPanelBody() {
        return (
            <FieldsControl
                isWizard={true}
                Record={this.state.selectedRecord}
                fields={this.state.selectedRecord.fields}
                actions={this.state.selectedRecord.actions}
                onSubmit={this._saveRecord.bind(this)}
                saveAsDraft={this._saveRecord.bind(this)}
                key={1}
                hashKey={"1"}
                cancelFunction={this.props.closePanel.bind(this)} />
        );
    }

    public render(): JSX.Element {
        return (
            <Panel
                className="panelStyle"
                isOpen={this.props.open}
                onDismissed={this.props.closePanel.bind(this)}
                type={PanelType.large}
                onRenderBody={this.renderListPanelBody.bind(this)}
                headerText="Edit Meeting Details"
                isFooterAtBottom={true}
                //styles={{ IsFooterSticky: true }}
                headerClassName="panelHeaderStyle"
                hasCloseButton={false}
                isBlocking={true}
                onRenderHeader={this._onReadnderHader}
            >

            </Panel>

        );
    }
}