import { SC, ReactComponent, CanvasItem } from 'smartclient-pro/react';
let isc = window.isc;

SC.defineClass("FlowTextListItem", CanvasItem);
class FlowTextListItem extends CanvasItem {
    static ISC_CLASS_NAME = "FlowTextListItem";
    static IS_CLASS = true;
    static PROPERTY_TYPES = {};

    static height = 23;
    static overflow = "visible";
    static tileMargin = 5;
    static margin = 5;
    static canReorderTiles = false;
    static canEdit = true;
    static canSelect = true;
    static canFocus = true;
    static showFocused = true;
    static multiple = true;
    static adaptWidth = true;
    static controlStyle = "flowText";
    static alwaysShowControlBox = true;
    static itemStyleName = "flowTextItem";
    static pickerIconHeight = 20;
    static pickerIconWidth = 18;
    static pickerIconSrc = "[SKINIMG]pickers/comboBoxPicker.png";
    static pickerIconStyle = "flowTextPickerIcon";
    constructor(props) {
        super(props);
        this.props = props;
    };

    static createCanvas = function (form, item) {
        this.value = this.value || [];
        if (this.valueMap) {
            this.showPickerIcon = true;
            this.click = this.pickerIconClick.bind(this);
        }
        this.selectedValues = [];
        return item.grid = this.getValuesGrid(this.value);
    };
    static getValuesGrid = function (values) {
        let grid = isc.FlowLayout.create({
            owner: this,
            width: "100%",
            autoWrapLines: true,
            tileMargin: this.tileMargin,
        });
        for (const value of values) {
            const tile = this.getNewTile(value);
            grid.addTile(tile);
        }
        return grid;
    };
    static getNewTile = function (value) {
        const tile = isc.Label.create({
            owner: this,
            height: 20,
            autoFit: true,
            styleName: this.itemStyleName,
            contents: value,
        });
        if (this.canSelect) {
            tile.showRollOver = true;
            tile.cursor = "pointer";
            tile.click = this.tileClick;
        } else {
            tile.showRollOver = false;
            tile.cursor = "arrow";
        }
        return tile;
    };
    static tileClick = function () {
        const value = this.contents;
        const owner = this.owner;
        if (this.selected = !this.selected) {
            owner.selectedValues.push(value);
        } else {
            const i = owner.selectedValues.indexOf(value);
            if (i != -1) {
                owner.selectedValues.splice(i, 1);
            }
        }
        if (owner.selectValue) {
            owner.selectValue(value, this.selected);
        }
        return false;
    };

    static findValue = function (value) {
        return this.value.find(element => element === value);
    };
    static addValue = function (value) {
        this.value.push(value);
        const tile = this.getNewTile(value);
        this.canvas.addTile(tile);
        if (this.changed) {
            this.changed(this.form, this, this.value);
        }
        //        this.storeValue(this.value);
    };
    static removeValue = function (value) {
        const i = this.value.indexOf(value);
        if (i != -1) {
            this.value.splice(i, 1);
            this.canvas.removeTile(i);
            if (this.changed) {
                this.changed(this.form, this, this.value);
            }
            //            this.storeValue(this.value);
        }
    };
    static selectValue = function (value, state) {
        if (this.selectionChanged) {
            this.selectionChanged(value, state);
        }
    };

    static pickerIconClick = function (form, item, pickerIcon) {
        if (item.commonPicker) item.picker = window[item.commonPicker];
        let picker = item.picker;
        function setPickerPosition() {
            picker.setWidth(picker.item.getWidth());
            var h = picker.item.getVisibleHeight();
            if (!h) return;
            setTimeout(() => {
                var y = picker.item.getPageTop();
                var h1 = picker.form.getVisibleHeight();
                var wh = isc.Page.getHeight() - isc.Page.getScrollTop();
                picker.setLeft(picker.item.getPageLeft());
                picker.setTop(((y + h + h1) < wh) ? y + h : y - h1);
                picker.show();
            }, 30);
        };
        form.itemsResized = setPickerPosition;

        if (!picker) {
            let _form;
            picker = item.picker = isc.Window.create({
                ID: item.commonPicker, width: item.getWidth(), height: 1, visibility: "hidden",
                isModal: true, showModalMask: false, dismissOnOutsideClick: true,
                autoCenter: false, autoSize: true, border: "0px", showHeader: false, showEdges: false, showFooter: false, showResizer: false, showShadow: false,
                items: [
                    _form = isc.EvolutionForm.create({
                        fields: [
                            {
                                name: "valueMap",
                                editorType: "FlowTextListItem",
                                controlStyle: "flowTextPicker",
                                showTitle: false,
                                value: item.valueMap,
                                selectValue: function (value, state) {
                                    picker.item[state ? "addValue" : "removeValue"](value);
                                }
                            }
                        ],
                    })
                ],
            });
            picker.form = _form;
        }
        picker.item = item;
        const toSelectMap = {};
        for (const value of (item.value || [])) {
            toSelectMap[value] = true;
        }
        for (const child of (picker.form.items[0].grid.children || [])) {
            child.selected = toSelectMap[child.contents];
            child.redraw();
        }
        setPickerPosition();
        return false;
    };
};

isc.FlowTextListItem.addProperties(FlowTextListItem);
Object.defineProperty(FlowTextListItem, 'name', { value: 'FlowTextListItem' });
ReactComponent.registerClass('FlowTextListItem', FlowTextListItem);

export default FlowTextListItem;