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

export const EVENT_CHANGE = 'EVENT_CHANGE';
export const CollapseXtype = 'dec.dcm.components.collapse';
@shortcut(CollapseXtype)
@store(CollapseModelXtype)
export class Collapse extends BI.BasicButton {
    props = {
        name: '',
        isCollapse: true,
        $testId: 'dec-dcm-components-collapse',
    }

    rightFont: any;
    downFont: any;

    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: Left,
            items: [
                {
                    type: IconLabel,
                    height: 17,
                    cls: 'dcm-triangle-collapse-font icon-size-16',
                    ref: (_ref: any) => {
                        this.rightFont = _ref;
                    },
                    invisible: !this.model.isCollapse,
                },
                {
                    type: IconLabel,
                    height: 17,
                    cls: 'dcm-triangle-expand-font icon-size-16',
                    ref: (_ref: any) => {
                        this.downFont = _ref;
                    },
                    invisible: this.model.isCollapse,
                },
                {
                    type: BI.Label.xtype,
                    lgap: 2,
                    text: this.options.name,
                },
            ],
        };
    }

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