import { shortcut, store } from '@core/core';
import { CollapseModel } from './collapse.model';
import { IconLabel } from '@fui/core';

export const EVENT_CHANGE = 'EVENT_CHANGE';
@shortcut()
@store(CollapseModel)
export class Collapse extends BI.BasicButton {
    static xtype = 'dec.dcm.components.collapse';

    props = {
        name: '',
        isCollapse: true,
        $testId: 'dec-dcm-components-collapse',
    }

    rightFont: IconLabel;
    downFont: IconLabel;

    model: CollapseModel['model'];
    store: CollapseModel['store'];

    watch = {
        isCollapse: (isCollapse: boolean) => {
            this.rightFont.setVisible(isCollapse);
            this.downFont.setVisible(!isCollapse);
            this.fireEvent(EVENT_CHANGE, isCollapse);
        },
    }

    render() {
        this.store.setCollapse(this.options.isCollapse);
        
        return {
            type: BI.FloatLeftLayout.xtype,
            items: [
                {
                    type: BI.IconLabel.xtype,
                    height: 17,
                    cls: 'dcm-triangle-collapse-font icon-size-16',
                    ref: (_ref: IconLabel) => {
                        this.rightFont = _ref;
                    },
                    invisible: !this.model.isCollapse,
                },
                {
                    type: BI.IconLabel.xtype,
                    height: 17,
                    cls: 'dcm-triangle-expand-font icon-size-16',
                    ref: (_ref: IconLabel) => {
                        this.downFont = _ref;
                    },
                    invisible: this.model.isCollapse,
                },
                {
                    type: BI.Label.xtype,
                    lgap: 2,
                    text: this.options.name,
                },
            ],
        };
    }

    doClick() {
        this.store.setCollapse(!this.model.isCollapse);
    }

    setCollapse(v: boolean) {
        this.store.setCollapse(v);
    }
}