// #region Imports
import { noChange } from 'lit';
import { directive } from 'lit/directive.js';
import { RendererServiceLocator } from '../../../Dom/Renderer';
import { DirectiveBase, PartType } from '../Abstracts/DirectiveBase';
/**
 * @private
 */
class FlexDirective extends DirectiveBase {
    // #region Fields
    _justify;
    _alignItems;
    _alignContent;
    _direction;
    _wrap;
    _gap;
    _fill;
    // #endregion
    // #region Ctor
    /**
     * Constructs a new instance of the `FlexDirective` class.
     *
     * @public
     */
    constructor(args) {
        super(args);
        if (args.type !== PartType.ELEMENT) {
            throw new Error('The `flex` directive can only be used on elements.');
        }
        this._justify = undefined;
        this._alignItems = undefined;
        this._alignContent = undefined;
        this._direction = undefined;
        this._wrap = undefined;
        this._gap = undefined;
        this._fill = undefined;
    }
    // #endregion
    /**
     * @public
     */
    render(options) {
        this._justify = options?.justify;
        this._alignItems = options?.alignItems;
        this._alignContent = options?.alignContent;
        this._direction = options?.direction;
        this._wrap = options?.wrap;
        this._gap = options?.gap;
        this._fill = options?.fill;
        return noChange; // Directive does not manipulate the part directly
    }
    /**
     * @public
     * @override
     */
    update(part, [options]) {
        const element = part.element;
        let isFlexPropertyNeeded = false;
        isFlexPropertyNeeded = this.updateFlexProperty(element, 'flex-direction', options?.direction) || isFlexPropertyNeeded;
        isFlexPropertyNeeded = this.updateFlexProperty(element, 'justify-content', options?.justify) || isFlexPropertyNeeded;
        isFlexPropertyNeeded = this.updateFlexProperty(element, 'align-items', options?.alignItems) || isFlexPropertyNeeded;
        isFlexPropertyNeeded = this.updateFlexProperty(element, 'align-content', options?.alignContent) || isFlexPropertyNeeded;
        isFlexPropertyNeeded = this.updateFlexProperty(element, 'flex-wrap', options?.wrap) || isFlexPropertyNeeded;
        isFlexPropertyNeeded = this.updateFlexProperty(element, 'gap', options?.gap) || isFlexPropertyNeeded;
        if (options?.fill !== undefined) {
            this.updateFillProperty(element, options.fill);
        }
        if (isFlexPropertyNeeded) {
            RendererServiceLocator.current.setStyle(element, 'display', 'flex');
        }
        return this.render({
            ...options
        });
    }
    /**
     * @private
     */
    updateFlexProperty(element, property, value) {
        if (value !== undefined) {
            RendererServiceLocator.current.setStyle(element, property, value);
            return true;
        }
        return false;
    }
    /**
     * @private
     */
    updateFillProperty(element, fill) {
        if (typeof fill === 'boolean') {
            RendererServiceLocator.current.setStyle(element, 'flex', fill ? '1' : '0');
        }
        else {
            RendererServiceLocator.current.setStyle(element, 'flex', fill.toString());
        }
    }
}
/**
 * @public
 */
export const flex = directive(FlexDirective);
//# sourceMappingURL=FlexDirective.js.map