import * as React from "react";
import { RouteComponentProps } from "react-router";
import { RecordService } from "../../../../Services";
import { Record } from "../../../../Models";
// import { FormDisplay } from "src/Customizations/Controls/FormDisplay";
import { FormView } from "src/Customizations/Controls/FormView";
import { DocumentCard, Breadcrumb } from "office-ui-fabric-react";
import { FormattedMessage } from "react-intl";

export class RecordView extends React.Component<{} & RouteComponentProps<{ entityId: number, id: number }>, any>{
    private _recordService: RecordService = new RecordService();

    constructor(props: {} & RouteComponentProps<{ entityId: number, id: number }>) {
        super(props);
        this.state = {
            selectedItem: new Record(),
            screenTitle: "Record Details",
        }
        //debugger;
        this.getRecord(props.match.params.entityId, props.match.params.id);
    }

    private getRecord(entityId: number, recordId: number) {

        this._recordService.getRecord(entityId, recordId)
            .then(result => {
                this.setState({ selectedItem: result });
            }, error => {
                alert(error);
            });
    }

    private _onRenderItem = (item: any): JSX.Element | null => {
        // debugger;
        return <FormattedMessage id={item.text} />;
      };

    public render(): JSX.Element {
        return (
            <div>
                <div className="ms-Grid-row">
                    <div className="ms-Grid-col ms-sm12">
                        <div className="breadcrumb-container">
                            <i className={this.state.screenIconClassName} />
                            <Breadcrumb
                                items={[
                                    { text: this.state.screenTitle, key: this.state.screenTitle }
                                ]}
                                ariaLabel={"Website breadcrumb"}
                                onRenderItem={this._onRenderItem}
                            />
                        </div>
                        <DocumentCard className="w-100p layout-card">
                            <FormView Record={this.state.selectedItem} />
                        </DocumentCard>
                    </div>
                </div>
            </div>
        );
    }
}