import * as React from "react";
import { Label } from "office-ui-fabric-react";
import { QuickFormView as CoreQuickFormView } from "../../../Controls/QuickFormView";
import { ListRecordsCriteria, FieldQuery, Pagination } from "../../../Models";
import { LoadingService } from "../../../Services/LoadingService";
import { UserService } from "../../../Services";
import { DynamicRecordService } from "../../../Services/DynamicRecordService";
import { FormattedMessage } from "react-intl";
import { DateUtils } from "../../../Utils";

export class QuickFormView extends React.Component<any, any> {
    // private fieldsControl: FieldsControl;
    private _dateUtils: DateUtils = new DateUtils();
    private _dynamicRecordService: DynamicRecordService = new DynamicRecordService();
    private _userService: UserService = new UserService();
    private _loadingService = new LoadingService();

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

        this.state = {
            quickFields: [],
            comments: []
        }

        this.getRecordComments();
    }

    private _setColWidth(id: any): string {
        switch (id) {
            case 155: {
                return " ms-Grid-col ms-sm12 ms-lg6";
            }
            case 156: {
                return " ms-Grid-col ms-sm12 ms-lg6";
            }
            case 157: {
                return "ms-Grid-col ms-sm12 ms-lg6";
            }
            case 159: {
                return "ms-Grid-col ms-sm12 ms-lg6";
            }
            case 163: {
                return "ms-Grid-col ms-sm12 ms-lg6";
            }
            case 164: {
                return "ms-Grid-col ms-sm12 ms-lg6";
            }
            case 165: {
                return "ms-Grid-col ms-sm12 ms-lg6";
            }
            case 175: {
                return "ms-Grid-col ms-sm12 ms-lg6";
            }
            case 176: {
                return "ms-Grid-col ms-sm12 ms-lg6";
            }
            case 182: {
                return "ms-Grid-col ms-sm12 ms-lg6";
            }
            case 189: {
                return "ms-Grid-col ms-sm12 ms-lg6";
            }
            case 191: {
                return "ms-Grid-col ms-sm12 ms-lg6";
            }
            case 227: {
                return "ms-Grid-col ms-sm12 ms-lg6";
            }
            case 228: {
                return "ms-Grid-col ms-sm12 ms-lg6";
            }


            default: {
                return "ms-Grid-col ms-sm12 ms-lg12";
            }
        }
    }

    componentWillMount() {
        if (this.props.Record.fields) {
            let fields;
            fields = this.props.Record.fields.filter((el: any) => {
                // debugger;
                return el.id == 191 || el.id == 153 || el.id == 190 || el.id == 159;
            })
            // this.props.Record.fields = fields;

            this.setState({ quickFields: fields })
        }

    }

    private getRecordComments() {
        if (this.props.Record.id) {
            let criteria: ListRecordsCriteria = new ListRecordsCriteria();
            criteria.asLookup = false;
            criteria.entityId = 23;
            criteria.query = new Array<FieldQuery>();
            let query = new FieldQuery();
            query.fieldId = 247;
            query.value = this.props.Record.id;
            criteria.query.push(query);
            criteria.pagination = new Pagination();
            criteria.pagination.start = 0;
            criteria.pagination.count = 99999;
            this._loadingService.show();
            this._dynamicRecordService.listRecords(criteria).then(
                (result: any) => {
                    this._loadingService.hide();
                    console.log(result);


                    if (result)
                        result.forEach((comment: any) => {
                            comment.CreatedByObj = {};
                            this._getCreatedBy(comment);
                        });

                    // this.state.reasonLookups = result;
                    this.setState({ comments: result });
                },
                error => {
                    // alert(error.text());
                    // this.toastr.error('', error.text());
                    //this.displayAlertModal(error.text());
                    alert(error);
                    this._loadingService.hide();
                }
            );
        }
    }

    private _getCreatedBy(obj: any) {
        if (obj && obj.CreatedBy) {
            this._userService.getUser(obj.CreatedBy)
                .then(result => {
                    obj.CreatedByObj = result.data;
                    this.forceUpdate();
                }, error => {

                    alert(error);
                });
        }
    }

    public render(): JSX.Element {
        return (<div>
            <CoreQuickFormView  {...this.props} setColWidth={this._setColWidth.bind(this)} quickFields={this.state.quickFields}></CoreQuickFormView>
            {this.state.comments && this.state.comments.length > 0 &&
                <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg12">
                    {/* <TextField className="ms-Grid-col ms-lg12" label={item.displayName} value={item.data ? item.data : ""} onChanged={this._handleDataChange.bind(this, item)} /> */}
                    <Label><FormattedMessage id="Comments" /></Label>
                    <div className="form-field-view">
                        {this.state.comments.map((comment: any) => {
                            return (<div>
                                <p>{this._dateUtils.formatDate(comment.CreatedDate)} - {comment.CreatedByObj.name}:
                                <br />
                                    {comment.Comments}</p>
                            </div>);
                        })}
                    </div>

                </div>
            }
        </div>
        );
    }
}