import React from "react";
import _ from "lodash";
import {MuiThemeProvider, withStyles} from "@material-ui/core/styles";
import {theme} from "../saasintegrations/theme.js"; //TODO refactor
import MediaTab from "./tabs/media_tab/MediaTab.jsx";
import HistoryTab from "./tabs/history_tab/HistoryTabWrapper.jsx";
import DialogTitle from "@material-ui/core/DialogTitle";
import Dialog from "@material-ui/core/Dialog";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Close from "@material-ui/icons/Close";
import Snackbar from "./componentsUtils/Snackbar.jsx";
import {
    onAutocomplete,
    getContractDetails,
    getContractFromArchive,
    getContractFromHistory,
    restoreContract,
    getContractMeta,
    getErrorsModel,
    getFieldList,
    isMandatoryEmpty,
    fieldNotVisible,
    getContractMedia,
    sendContractMedia,
    setAsContractDisplayPhoto,
    deleteContractMedia,
    shouldShowByRelational,
    createContract,
    updateContract,
    getHistoryList,
    wfTriggerCheck,
    getInitialContractDetails,
    getSaveValue,
    pickRelevantData,
    hasChangesToSave,
    isEditable,
    formatBool,
    getFieldsConfiguredOnSB,
    getInitialVisibleFields
} from "./ContractDetailUtils";
import InfoTab from "./contracts/InfoTab.jsx";
import FieldsList from "./saas/FieldsList.jsx"; //TODO move to common
import UsersTab from "./tabs/contracts_users/UsersTab";
import env from "../util/Environment.js";
import {ARCHIVE, EDIT, NEW, VERSION, VIEW} from "./constants";

const maxWidth = 1360;
const maxHeight = 944;

const tabs = [
    {label: "Information", id: "info"},
    {label: "Users", id: "users"},
    {label: "Media", id: "media"},
    {label: "History", id: "history"}
];

const styles = {
    dialogTitle: {
        height: 25,
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        backgroundColor: "#f5f5f5"
    },
    dialogSaasName: {
        fontSize: 20,
        fontWeight: "bold",
        color: "#222"
    },
    closeIcon: {
        color: "#8a8a8a",
        cursor: "pointer"
    },
    paper: {
        position: "relative",
        maxWidth: maxWidth,
        maxHeight: maxHeight,
        overflow: "hidden",
        height: "calc(100% - 40px)",
        width: "100%",
        "& *": {
            fontFamily: "Roboto"
        }
    },
    tabsContainer: {
        margin: "0 12px"
    },
    tabsRoot: {
        backgroundColor: "#f5f5f5"
    },
    selectedTab: {
        color: "#1f1f1f"
    },
    disabledTab: {
        color: "#e0e0e0"
    },
    rootTab: {
        minWidth: 0,
        fontSize: "14px",
        fontWeight: 500,
    },
    snackBarError: {
        marginBottom: 20
    }
};

class ContractDetailsPopup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mode: props.mode,
            contract_id: props.contract_id,
            error: false,
            errorMessage: "",
            open: props.open,
            showActions: false,
            currentTab: "info",
            meta: {},
            errorModel: {},
            data: {},
            origData: {},
            media: [],
            history: [],
            contractsMeta: {},
            workflowList: [],
            dateFormat: "MM/DD/YY",
            visibleFields: getInitialVisibleFields()
        };

        this.loadData();
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            currentTab: "info",
            open: nextProps.open,
            media: [],
            history: [],
            showActions: false
        });
    }

    render() {
        const {classes} = this.props;
        const {currentTab, open, data, error, errorMessage} = this.state;
        return (<MuiThemeProvider theme={theme}>
            <Dialog
                aria-labelledby="simple-dialog-title"
                open={open}
                classes={{
                    paper: classes.paper
                }}
            >
                <DialogTitle
                    id="simple-dialog-title"
                    disableTypography
                    classes={{
                        root: classes.dialogTitle
                    }}
                >
                    <h2 className={classes.dialogSaasName}>
                        {data.saas_name}
                    </h2>
                    <div>
                        <Close onClick={this.handleClose} className={classes.closeIcon}/>
                    </div>
                </DialogTitle>
                <Tabs
                    value={currentTab}
                    indicatorColor="primary"
                    style={{color: "#09c"}}
                    onChange={this.changeTab}
                    classes={{
                        flexContainer: classes.tabsContainer,
                        root: classes.tabsRoot
                    }}
                >
                    {this.getTabs()}
                </Tabs>
                {this.getTabsContent(currentTab)}
                <Snackbar
                    style={{marginBottom: 20}}
                    open={error}
                    message={errorMessage}
                    handleClose={this.onCloseSnackbar}
                />
            </Dialog>
        </MuiThemeProvider>);
    }

    loadData = () => {
        $.when(
            getContractMeta(),
            this.getDateFormat()
        ).then(([meta], dateFormat) => {
            return this.getDetails(meta).then((data) => {
                const errorModel = getErrorsModel(meta);
                this.setState({
                    meta,
                    origData: _.cloneDeep(data),
                    data,
                    errorModel,
                    showActions: false,
                    dateFormat
                });
                return getFieldsConfiguredOnSB("CONTRACTS", getInitialVisibleFields())
                    .then(visibleFields => {
                        this.setState({visibleFields});
                    });
            });
        });
    };
    getDetails = (meta) => {
        const {parent_saas_id} = this.props;
        const {mode, contract_id} = this.state;
        if (mode == NEW) {
            let initialData = getInitialContractDetails(meta);
            if (parent_saas_id) {
                initialData.saas_id = parent_saas_id;
            }
            return Promise.resolve(initialData);
        }
        if (mode == ARCHIVE) {
            return getContractFromArchive(contract_id);
        }
        return getContractDetails(contract_id);
    };
    changeTab = (event, value) => {
        this.setState({currentTab: value});
    };

    getTabs = () => {
        const {classes: {rootTab: root, selectedTab: selected, disabledTab: disabled}} = this.props;
        const {showActions, currentTab, mode} = this.state;

        return tabs.map(({label, id}) => {
            let disableTab = currentTab !== id && showActions;
            if (mode == NEW || mode == ARCHIVE || mode == VERSION && id !== "info") {
                disableTab = true;
            }
            return <Tab
                key={id}
                value={id}
                disabled={disableTab}
                label={label}
                classes={{root, selected, disabled}}
            />;
        });
    };
    getTabsContent = (currentTab) => {
        const {
            showActions, media, data, history, workflowList,
            errorModel, mode, contract_id, dateFormat, error
        } = this.state;
        if (currentTab === "info") {
            return <InfoTab
                mode={mode}
                handleRestore={this.handleRestore}
                workflowList={workflowList}
                showActions={showActions}
                handleCancel={this.handleCancel}
                handleSave={this.handleSave}
                fieldsList={<FieldsList
                    mode={mode}
                    fields={this.getVisibleFields()}
                    errorModel={errorModel}
                    handleChange={this.handleChange}
                    onBlur={this.validateField}
                    onAutocomplete={onAutocomplete}
                    onAddValue={this.onAddValue}
                    width={"240px"}
                />}
            />;
        } else if (currentTab === "media") {
            return <MediaTab
                getMedia={this.getMedia}
                sendMedia={this.sendMedia}
                deleteMedia={this.deleteMedia}
                setAsDisplayPhoto={this.setAsDisplayPhoto}
                mediaList={media}
            />;
        } else if (currentTab === "history") {
            return <HistoryTab
                previewVersion={this.previewVersionFromHistory}
                getHistoryList={this.getHistoryList}
                historyList={history}
            />;
        } else if (currentTab === "users") {
            return <UsersTab
                error={error}
                data={data}
                contract_id={contract_id}
                dateFormat={dateFormat}
                failCallback={this.onOpenErrorMsg}
            />;
        }
    };

    getDateFormat = () => {
        return env.getDateFormat({moment: true});
    };

    getVisibleFields = () => {
        const {meta, data, mode, visibleFields} = this.state;
        return getFieldList(meta, data, mode, visibleFields);
    };

    onAddValue = (id, value) => {
        this.handleChange({id, value: {value, label: value}});
    };

    handleChange = ({id, value}) => {
        const {meta} = this.state;
        let updatedData = _.set(_.clone(this.state.data), id, getSaveValue(meta, id, value));
        const hasChanges = hasChangesToSave(pickRelevantData(meta, this.state.origData), pickRelevantData(meta, updatedData));
        this.setState({data: updatedData, showActions: hasChanges}, () => {
            this.validateField(id, "change");
            this.wfTriggerCheck();
        });
    };

    validateField = (id, event) => {
        let {errorModel, meta, data} = this.state;
        if (this.shouldValidateEvent(id, event) && isMandatoryEmpty(meta, id, data)) {
            errorModel[id] = "This is a mandatory field";
        } else {
            errorModel[id] = "";
        }
        this.setState({errorModel});
    };
    shouldValidateEvent = (id, event) => {
        let {errorModel} = this.state;
        return event === "blur" || (event === "change" && !!errorModel[id]);
    };
    validateOnSave = () => {
        let {meta, data, mode} = this.state;
        let errorModel = {};
        _.forEach(data, ((value, id) => {
            if (isMandatoryEmpty(meta, id, data)) {
                errorModel[id] = "This is a mandatory field";
            }
            if (fieldNotVisible(meta, id, data)) {
                errorModel[id] = "";
            }
            if (mode == NEW && (id == "contract_type" || !isEditable(formatBool(meta[id].editable), mode))) {
                errorModel[id] = ""; //Some fields are populated during creation
            }
        }));
        let stateApplied = $.Deferred();
        this.setState({errorModel}, () => stateApplied.resolve());
        return stateApplied;
    };

    handleCancel = () => {
        this.setState({
            data: _.cloneDeep(this.state.origData),
            errorModel: {},
            showActions: false,
            workflowList: []
        });
    };

    handleClose = () => {
        this.setState({open: false});
    };

    handleSave = () => {
        const {contract_id} = this.state;
        this.validateOnSave().then(() => {
            if (!this.hasErrors()) {
                let {meta, data, mode} = this.state;
                if (mode == NEW) {
                    return createContract(pickRelevantData(meta, data))
                        .then(({contract_id}) => {
                            this.setState({contract_id, mode: EDIT}, () => {
                                this.loadData();
                            });
                        });
                }
                return updateContract(contract_id, pickRelevantData(meta, data)).then(() => {
                    this.setState({showActions: false}, this.loadData);
                }).fail(oom.util.failCallback);
            }
        });
    };

    handleRestore = () => {
        const {contract_id} = this.state;
        restoreContract(contract_id).then(() => {
            this.setState({mode: EDIT})
        }).fail(oom.util.failCallback);
    };

    previewVersionFromHistory = (version) => {
        const {contract_id} = this.state;
        getContractFromHistory(contract_id, version).then((data) => {
            this.setState({data, mode: VERSION, currentTab: "info"})
        }).fail(oom.util.failCallback);
    };

    hasErrors = () => {
        return _.some(this.state.errorModel, (field) => {
            return !!field;
        });
    };

    wfTriggerCheck = () => {
        const {meta, data, mode, contract_id} = this.state;
        return wfTriggerCheck(contract_id, pickRelevantData(meta, data), mode)
            .then((workflowList) => {
                this.setState({workflowList});
            });
    };

    getMedia = () => {
        const {contract_id} = this.state;
        return getContractMedia(contract_id).then((media) => this.setState({media}));
    };
    sendMedia = (data) => {
        const {contract_id} = this.state;
        return sendContractMedia(contract_id, data);
    };
    deleteMedia = (id) => {
        const {contract_id} = this.state;
        return deleteContractMedia(contract_id, id);
    };
    setAsDisplayPhoto = (id) => {
        const {contract_id} = this.state;

        return setAsContractDisplayPhoto(contract_id, id);
    };
    getHistoryList = (skipCount, params) => {
        const {contract_id} = this.state;
        return getHistoryList(contract_id, skipCount, params)
            .then(({data: history, facets}) => {
                if (skipCount) {
                    this.setState({history: this.state.history.concat(history)});
                } else {
                    this.setState({history});
                }
                return [facets, skipCount];
            });
    };

    clearContractsList = () => {
        this.setState({contracts: []});
    };

    onOpenErrorMsg = (errorMessage) => {
        this.setState({error: true, errorMessage});
    };

    onCloseSnackbar = () => {
        this.setState({error: false, errorMessage: ""});
    };
}

export default withStyles(styles)(ContractDetailsPopup);