import { Observable } from '@dsf/lib/observable';
import { Direction } from '../shared';
import LayoutBuilder from './layout-builder';
import { IWidgetBuilder, createWidget } from './widget-builder';
import { WidgetBuilderContext } from './widgets-builder';

export default class GroupBoxBuilder implements IWidgetBuilder<DzGroupBox> {
    private _title: Observable<string>
    private _direction: Direction = 'vertical'
    private _style: { flat?: boolean }
    private _visible: Observable<boolean>
    private _enabled: Observable<boolean>
    private _checked: Observable<boolean>
    private _columns: number = 1
    private _height: number | null = null
    private _minHeight: number | null = null
    private _maxHeight: number | null = null

    constructor(private context: WidgetBuilderContext) {
    }

    title(text: string | Observable<string>): this {
        this._title = typeof text === 'string'
            ? new Observable(text)
            : text
        return this
    }

    vertical(): this {
        this._direction = 'vertical'
        return this
    }

    horizontal(): this {
        this._direction = 'horizontal'
        return this
    }

    orientation(direction: Direction): this {
        this._direction = direction
        return this
    }

    style(options: { flat?: boolean }): this {
        this._style = options
        return this
    }

    flat(): this {
        this._style = { flat: true }
        return this
    }

    checkable(value: boolean | Observable<boolean> = true): this {
        this._checked = typeof value === 'boolean'
            ? new Observable(value)
            : value
        return this
    }

    visible(value: boolean | Observable<boolean>): this {
        this._visible = typeof value === 'boolean'
            ? new Observable(value)
            : value
        return this
    }

    enabled(value: boolean | Observable<boolean>): this {
        this._enabled = typeof value === 'boolean'
            ? new Observable(value)
            : value
        return this
    }

    height(value: number): this {
        this._height = value
        return this
    }

    minHeight(value: number): this {
        this._minHeight = value
        return this
    }

    maxHeight(value: number): this {
        this._maxHeight = value
        return this
    }

    columns(value: number): this {
        this._columns = value
        return this
    }

    build(then?: (layout: DzVBoxLayout | DzHBoxLayout, groupBox: DzGroupBox) => void): DzGroupBox {
        let groupBox = createWidget(this.context).build(DzGroupBox)

        groupBox.title = this._title?.value
        groupBox.flat = this._style?.flat
        groupBox.columns = this._columns
        if (this._checked) {
            groupBox.checkable = true
            groupBox.checked = this._checked.value
        }
        if (this._height !== null) groupBox.height = this._height
        if (this._minHeight !== null) groupBox.minHeight = this._minHeight
        if (this._maxHeight !== null) groupBox.maxHeight = this._maxHeight

        this._title?.connect((text) => {
            groupBox.title = text
        })

        if (this._checked) {
            this._checked.connect((checked) => {
                groupBox.checked = checked
            })
            groupBox.toggled.scriptConnect((checked) => {
                this._checked.value = checked
            })
        }

        new LayoutBuilder(this.context)
            .parent(groupBox)
            .direction(this._direction)
            .build((layout) => {
                then?.(layout, groupBox)
            })

        if (this._visible) {
            if (this._visible.value === false)
                groupBox.hide()
            this._visible.connect((visible) => {
                if (visible)
                    groupBox.show()
                else
                    groupBox.hide()
            })
        }

        if (this._enabled) {
            groupBox.enabled = this._enabled.value
            this._enabled.connect((enabled) => {
                groupBox.enabled = enabled
            })
        }

        return groupBox
    }
}