import * as React from "react";
// import { FormView as CoreFormView } from "../../Controls/FormView";
import { Label } from "office-ui-fabric-react";
import { RecordField } from "../Models";
import { FieldTypes } from "../Enums";
import { DateUtils } from "../Utils";

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


    //private _loggedInUserId: number;
    private _dateUtils: DateUtils = new DateUtils();

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

        this.state = {
            quickFields: this.props.quickFields ? this.props.quickFields : this.props.Record.Fields,
            comments: []
        };


    }

    private _setColWidth(id: any): string {
        if (this.props.setColWidth)
            return this.props.setColWidth(id);
        else
            return "";
    }

    public render(): JSX.Element {
        //debugger;
        return (
            <div>
                {
                    !this.state.quickFields ? "" :
                        this.state.quickFields.sort((a: RecordField, b: RecordField) => {
                            if (a.index < b.index) {
                                return -1;
                            }
                            if (a.index > b.index) {
                                return 1;
                            }
                            return 0;
                        }).map((item: RecordField, index: number) => {
                            // if (item.id == 181 || item.id == 182)
                            //     return "";
                            // if(item.hidden==true)
                            //     return "";
                            switch (item.type) {
                                case FieldTypes.Text:
                                    return <div className={this._setColWidth(item.id)} key={index}>
                                        {/* <TextField className="ms-Grid-col ms-lg12" label={item.displayName} value={item.data ? item.data : ""} onChanged={this._handleDataChange.bind(this, item)} /> */}
                                        <Label>{item.displayName}</Label>
                                        <div className="form-field-view">
                                            {item.data}
                                        </div>

                                    </div>
                                case FieldTypes.Percentage:
                                    return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                        <Label>{item.displayName}</Label>
                                        <div className="form-field-view">
                                            {item.data}
                                        </div>

                                    </div>;
                                case FieldTypes.SingleChoice:
                                    return <div className={this._setColWidth(item.id)} key={index}>
                                        {/* <Dropdown className="ms-Grid-col ms-lg12"
                                                    defaultSelectedKey={item.data}
                                                    options={item.lookups.map((lookup: any) => {
                                                        return { key: lookup.id, text: lookup.value }
                                                    })}
                                                    label={item.displayName}
                                                    onChanged={this._handleChoiceChange.bind(this, item)} /> */}
                                        {/* <TreeComboBox></TreeComboBox> */}
                                        <Label>{item.displayName}</Label>
                                        <div className="form-field-view">
                                            {item.extraData ? item.extraData.value : ""}
                                        </div>

                                    </div>;
                                // case FieldTypes.MultipleChoice:
                                //     return <div className={this._setColWidth(item.id)} key={index}>
                                //         {
                                //             item.lookups.map((lookup: any) => {
                                //                 return <Checkbox className="ms-Grid-col ms-lg12" defaultChecked={this.isChecked(item, lookup.id)} key={lookup.id} label={lookup.value} onChange={this._handleCheckboxChange.bind(this, item, lookup.id)} />
                                //             })
                                //         }
                                //     </div>
                                case FieldTypes.Multiline:
                                    return <div className={this._setColWidth(item.id)} key={index}>
                                        {/* <TextField className="ms-Grid-col ms-lg12" label={item.displayName} multiline rows={4} value={item.data ? item.data : ""} onChanged={this._handleDataChange.bind(this, item)} /> */}
                                        <Label>{item.displayName}</Label>
                                        <div className="form-field-view">
                                            {item.data}
                                        </div>
                                    </div>
                                case FieldTypes.Label:
                                    return <div className={this._setColWidth(item.id)} key={index}>
                                        <Label className="ms-Grid-col ms-lg11">{item.displayName}</Label>
                                    </div>
                                case FieldTypes.DateTime:
                                    return <div className={this._setColWidth(item.id)} key={index}>
                                        {/* <Label>{item.displayName}</Label> */}
                                        {/* <DatePicker
                                                    className="ms-Grid-col ms-lg12"
                                                    value={this.convertDate(item.data)}
                                                    isRequired={false}
                                                    placeholder="Select a date..."
                                                    allowTextInput={true}
                                                    onSelectDate={this._handleDataChange.bind(this, item)}
                                                /> */}
                                        <Label>{item.displayName}</Label>
                                        <div className="form-field-view">
                                            {/* {(new Date(item.data).toString())} */}
                                            {this._dateUtils.formatDateTime(item.data)}
                                        </div>
                                    </div>
                                case FieldTypes.Date:
                                    return <div className={this._setColWidth(item.id)} key={index}>
                                        {/* <Label>{item.displayName}</Label> */}
                                        {/* <DatePicker
                                                    className="ms-Grid-col ms-lg12"
                                                    value={this.convertDate(item.data)}
                                                    isRequired={false}
                                                    placeholder="Select a date..."
                                                    allowTextInput={true}
                                                    onSelectDate={this._handleDataChange.bind(this, item)}
                                                /> */}
                                        <Label>{item.displayName}</Label>
                                        <div className="form-field-view">
                                            {/* {(new Date(item.data).toString())} */}
                                            {this._dateUtils.formatDateTime(item.data)}
                                        </div>
                                    </div>
                                case FieldTypes.EntityReference:
                                    let label = "";
                                    if (item.records && item.records.records) {
                                        item.records.records.forEach((record: any) => {
                                            if (record.id == item.data) {
                                                label = record.name;
                                            }
                                        })
                                    }
                                    return item.records ? <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={index}>
                                        <div className="choiceGroup ms-Grid-col ms-lg11">
                                            <Label>{item.displayName}</Label>
                                            <div className="form-field-view">{label}</div>
                                            {/* <Dropdown
                                                        defaultSelectedKey={item.data}
                                                        disabled={true}
                                                        label={item.displayName}
                                                        id="Basicdrop3"
                                                        ariaLabel="Basic ComboBox example"
                                                        options={item.records.records.map((record: any) => { return { key: record.id, text: record.name } })}
                                                        onRenderOption={this._onRenderFontOption}
                                                        // tslint:disable:jsx-no-lambda
                                                        onFocus={() => console.log('onFocus called')}
                                                        onBlur={() => console.log('onBlur called')}
                                                        onChanged={this._handleChoiceChange.bind(this, item)}
                                                    // tslint:enable:jsx-no-lambda
                                                    />  */}
                                        </div>
                                    </div> : ""
                                case FieldTypes.ReferencedEntity:
                                // case FieldTypes.ManyToManyRelated:
                                //     return item.records ? <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg12" key={`form-field-${item.type}${item.id}`}>
                                //         <Label>{item.displayName}</Label>
                                //         <div><CommandsBar Commands={this.state.commands} /></div>
                                //         <div className="choiceGroup ms-Grid-col ms-lg11">
                                //             <RecordsListView Records={item.records.records} SelectedRecordChanged={this.selectedRecordChanged.bind(this, item.records.enableSelection, item.records.enableCreation)}></RecordsListView>
                                //         </div>
                                //     </div> : ""
                                case FieldTypes.Html:
                                    return <div className={this._setColWidth(item.id)} key={index}>
                                        {/* <Label>{item.displayName}</Label> */}
                                        {/* <ReactQuill value={item.data?item.data:""} onChange={this._handleDataChange.bind(this,item)} /> */}
                                        <Label>{item.displayName}</Label>
                                        {/* <DefaultButton secondaryText="Opens the Sample Panel" onClick={this._showPdf.bind(this, item.data)} text="ExportoTPdf" 
                                                onRenderText={this._onRenderButtonText} className="
                                                pdf-btn-m"/>
                                                <DefaultButton secondaryText="Opens the Sample Panel" onClick={this._download.bind(this, item.data)} text="DownloadPdf" 
                                                onRenderText={this._onRenderButtonText} className="
                                                pdf-btn-m"/> */}

                                        <div className="form-field-view" dangerouslySetInnerHTML={{ __html: item.data }} />


                                    </div>;
                                // case FieldTypes.MultipleDocuments:
                                //     return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg12 multiple-documents-readonly" key={index}>
                                //         <Label>{item.displayName}</Label>
                                //         <MultipleFileUpload initialFiles={item.extraData} ></MultipleFileUpload>
                                //         {/* <Label>{item.displayName}</Label>
                                //         <div className="form-field-view">
                                //             {item.extraData ? (
                                //                item.extraData.map((file: any) => {
                                //                 return <p><Link target="_blank" href={this._getFullPathForView(file)}>{file.name}</Link> </p>
                                //                 })
                                //             ) : (
                                //                 <p>No attachments</p>
                                //             )}

                                //         </div> */}
                                //     </div>;
                                case FieldTypes.OrganizationUnit:
                                    return <div className={this._setColWidth(item.id)} key={index}>
                                        {/* <TextField className="ms-Grid-col ms-lg12" label={item.displayName} multiline rows={4} value={item.data ? item.data : ""} onChanged={this._handleDataChange.bind(this, item)} /> */}
                                        <Label>{item.displayName}</Label>
                                        <div className="form-field-view">
                                            {item.extraData != null ? item.extraData.name : ""}
                                        </div>
                                    </div>;
                                case FieldTypes.ReadOnly:
                                    return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg12" key={index}>
                                        {/* <TextField className="ms-Grid-col ms-lg12" label={item.displayName} value={item.data ? item.data : ""} onChanged={this._handleDataChange.bind(this, item)} /> */}
                                        <Label>{item.displayName}</Label>
                                        <div className="form-field-view">
                                            {item.data}
                                        </div>

                                    </div>;

                            }
                            return ""
                        })
                }



            </div>
        );
    }

}