import * as React from "react";
import { FormView as CoreFormView } from "../../Controls/FormView";
import { PrimaryButton as NewPrimaryButton } from "../PrimaryButton";
import { FormattedMessage } from "react-intl";
import { Panel, PanelType, IconButton } from "office-ui-fabric-react";
import BigCalendar from "react-big-calendar";
import { CalendarToolbar } from "../../../Controls/CalendarToolbar/CalendarToolbar";
import { CachingService } from "../../../Services";

let moment = require("moment");
const localizer = BigCalendar.momentLocalizer(moment);

const messagesEn = {
    allDay: "All day",
    previous: "<",
    next: ">",
    today: "Today",
    month: "Month",
    week: "Week",
    day: "Day",
    agenda: "Agenda",
    date: "Date",
    time: "Time",
    event: "Event",
    showMore: (total: any) => `+ Show more (${total})`
  };
  
  const messagesAr = {
    allDay: "طول اليوم",
    previous: "<",
    next: ">",
    today: "اليوم",
    month: "شهر",
    week: "اسبوع",
    day: "يوم",
    agenda: "اجندة",
    date: "تاريخ",
    time: "وقت",
    event: "حدث",
    showMore: (total: any) => `+ طول اليوم (${total})`
  };

export class FormView extends React.Component<any, any> {
    // private fieldsControl: FieldsControl;
    private _cachingService = new CachingService();
    constructor(props: any) {
        super(props);

        this.state = {
            buttons: this._getButtons(),
            showViewAvailabilityPanel: false
        }
    }

    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 _getButtons() {
        return <div className="sticky-footer-btns">
            <NewPrimaryButton
                onClick={this.showAvailability.bind(this)}
                className="panel-footer-btn">
                <FormattedMessage id="View Availability" />
            </NewPrimaryButton>

        </div>
    }

    private showAvailability() {
        this.setState({ showViewAvailabilityPanel: true })
        //this.props.history.push("/createMeeting?templateId=" + this.props.Record.id)
    }

    private closeShowAvailabilityPanel() {
        this.setState({ showViewAvailabilityPanel: false })
    }

    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 renderPanelBody() {
        return (<div style={{padding:'12px'}} className="ms-Grid-col ms-sm6 ms-md6 ms-lg12">
            <BigCalendar
                className="big-calendar-height"
                events={[]}
                views={["month"]}
                components={{
                    toolbar: CalendarToolbar
                }}
                messages={
                    this._cachingService.readPersistant("Language") == 1
                        ? messagesAr
                        : messagesEn
                }
                culture={
                    this._cachingService.readPersistant("Language") == 1
                        ? "ar-sa"
                        : "en"
                }
                localizer={localizer}
                // onSelectEvent={this.getRecordsForDay.bind(this)}
            />
        </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>
                <i className="fal fa-tasks" style={{ float: 'right', fontSize: 40, padding: '5px 20px 0 0', opacity: .4 }}></i>

                <CoreFormView setColWidth={this._setColWidth.bind(this)}  {...this.props}></CoreFormView>

                {this.state.buttons}

                <Panel
                    className="panelStyle"
                    isOpen={this.state.showViewAvailabilityPanel}
                    onDismissed={this.closeShowAvailabilityPanel.bind(this)}
                    type={PanelType.large}
                    onRenderBody={this.renderPanelBody.bind(this)}
                    headerText="Room Availability"
                    isFooterAtBottom={true}
                    //styles={{ IsFooterSticky: true }}
                    headerClassName="panelHeaderStyle"
                    hasCloseButton={false}
                    isBlocking={true}
                    onRenderHeader={this._onReadnderHader}
                >

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