import * as React from "react";
import {
    Label,
    IconButton,
    PanelType,
    Panel
} from "office-ui-fabric-react";
import { FormattedMessage } from "react-intl";
import {
    TransferToDepartment,
    CorrespondenceTransfer
} from "src/Models/CorrespondenceTransfer";
import { CachingService } from "src/Services";
import { OrganizationalUnitsForTransferTreeComboBox } from "./OrganizationalUnitsForTransferTreeComboBox";
import { PrimaryButton as NewPrimaryButton } from "../Controls/PrimaryButton";

export class MoveDraftCorrespondence extends React.Component<any, any> {
    private _cachingService = new CachingService();
    private _loggedInUser: any;
    constructor(props: any) {
        super(props);

        this._loggedInUser = this._cachingService.read("LoggedInUser");

        let departmentId: number = -1;
        let disabledDepsId: number[] = [];
        if (this.props.Record.fields) {
            this.props.Record.fields.forEach((field: any) => {
                if (field.id == 165) departmentId = field.data;
            });
        }

        if (departmentId == -1) {
            departmentId = this._loggedInUser.department;
        }
        if (departmentId > -1) disabledDepsId.push(departmentId);

        this.state = {
            selectedDepartmentsTransfer: new Array<TransferToDepartment>(),
            recordsToTransfer: new Array<TransferToDepartment>(),
            selectedDepsId: [],
            disabledDepsId: disabledDepsId,
            attachedFiles: [],
            reasonLookups: [],
            isSubmitted: false
        };

    }

    _handleMultiCorrespondenceTranserToDepartmentsChange(
        ids: Array<number>,
        record: any
    ) {
        record.forEach((x: any) => {
            let isExist = this.state.selectedDepartmentsTransfer.findIndex(
                (y: any) => y.id == x.id
            );
            if (isExist <= -1) this.state.selectedDepartmentsTransfer.push(x);
        });
        this.setState({ selectedDepsId: ids });
        this.forceUpdate();
    }

    private moveDraftCorrespondence(button: any) {
        this.setState({ isSubmitted: true });
        if (
            this.state.selectedDepsId &&
            this.state.selectedDepsId.length > 0
        ) {
            var obj = new CorrespondenceTransfer();
            obj.correspondenceId = this.props.Record.id;
            obj.transferToDepartments = new Array<TransferToDepartment>();

            this.state.selectedDepsId.forEach((depId: number) => {
                obj.transferToDepartments.push({
                    toDepartmentId: depId,
                    toDepartmentName: "",
                    comment: "",
                    reason: 0,
                    attachments: []
                })
            });

            this.state.recordsToTransfer;

            if (this.props.onTransferSubmit)
                this.props.onTransferSubmit(obj, button);

        }
    }

    public render(): JSX.Element {
        return (
            <Panel
                className="panelStyle"
                isOpen={this.props.open}
                onDismissed={this.props.closeMoveDraftCorrespondencePanel.bind(this)}
                type={PanelType.medium}
                isFooterAtBottom={true}
                headerText="MoveCorrespondence"
                isLightDismiss={true}
                hasCloseButton={false}
                onRenderHeader={this._onReadnderHader.bind(this)}
                onRenderFooter={this._renderFooter.bind(this)}
            >
                <div>
                    <div className="ms-Grid-row">
                        <div className="ms-Grid-col ms-sm12">
                            <Label className="ms-fontSize-l">
                                <FormattedMessage id="SelectDepartment" />
                            </Label>
                        </div>
                        <div className="ms-Grid-col ms-sm12">
                            {!this.state.RemoveDepartmentsMultiSelect && (
                                <OrganizationalUnitsForTransferTreeComboBox
                                    multiple={false}
                                    correspondence={this.props.Record}
                                    value={this.state.selectedDepsId}
                                    disabledItems={this.state.disabledDepsId}
                                    onChanged={this._handleMultiCorrespondenceTranserToDepartmentsChange.bind(
                                        this
                                    )}
                                // value={this.state.selectedCorrespondenceTransfer.toDepartmentId}
                                />
                            )}
                        </div>



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

    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 } }}
                    />
                </div>
            </div>
            // <div className="panel-header-text "><FormattedMessage id={item.headerText} /></div>
        );
    };

    private _renderFooter = (): JSX.Element => {
        return (
            <div className="sticky-footer-btns">
                <NewPrimaryButton
                    disabled={this.state.selectedDepsId.length == 0}
                    onClick={this.moveDraftCorrespondence.bind(this)}
                    style={{ margin: "5px" }}
                >
                    <FormattedMessage id="Move" />
                </NewPrimaryButton>
            </div>
        );
    };
}
