import * as React from "react";
import { FormView as CoreFormView } from "../../Controls/FormView";
import { Label } from "office-ui-fabric-react";
import { FormattedMessage } from "react-intl";
import { CachingService } from "../../../Services";

export class FormView extends React.Component<any, any> {
    private _cachingService = new CachingService();

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

    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 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";
            }
        }
    }

    private getExtraControls() {
        return (
            <div>
                {this.props.Record.fields ?
                    this.props.Record.fields.map((item: any) => {
                        if (item.type == 14 && item.extraData) {
                            if (item.extraData.entityId == 34)
                                return (<div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                    <Label><FormattedMessage id="Attendees"></FormattedMessage></Label>
                                    <div className="form-field-view">{(item.records ? item.records.totalNumberOfRecords : 0) +
                                        (this._cachingService.readPersistant("Language") == 0 ? ' attendees assosiated with meeting.' : ' المدعوون للاجتماع')}</div>
                                </div>);

                            if (item.extraData.entityId == 35)
                                return (<div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                    <Label><FormattedMessage id="Subjects"></FormattedMessage></Label>
                                    <div className="form-field-view">{(item.records ? item.records.totalNumberOfRecords : 0) +
                                        (this._cachingService.readPersistant("Language") == 0 ? ' subjects assosiated with meeting.' : ' مواضيع الاجتماع')}</div>
                                </div>);

                            if (item.extraData.entityId == 37)
                                return (<div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                    <Label><FormattedMessage id="Tasks"></FormattedMessage></Label>
                                    <div className="form-field-view">{(item.records ? item.records.totalNumberOfRecords : 0) +
                                        (this._cachingService.readPersistant("Language") == 0 ? ' tasks assosiated with meeting.' : ' مهام الاجتماع.')}</div>
                                </div>);

                        }
                        return '';
                    })
                    : ''
                }
            </div>);

    }

    public render(): JSX.Element {

        if (this.props.Record.fields) {
            this.props.Record.fields.forEach((field: any) => {
                if (field.type == 14)
                    field.hidden = true;
                else
                    field.hidden = false;
            });
        }

        return (
            <div>
                <CoreFormView
                    {...this.props} renderExtraControls={this.getExtraControls.bind(this)} setColWidth={this._setColWidth.bind(this)}>
                </CoreFormView>


            </div>
        );
    }
}