import { __decorate } from "tslib";
import { DesignSystem, DesignToken, FoundationElement } from '@ni/fast-foundation';
import { attr } from '@ni/fast-element';
import { Direction } from '@ni/fast-web-utilities';
import { template } from './template';
import { styles } from './styles';
import { Theme } from './types';
import { documentElementLang } from '../utilities/models/document-element-lang';
export { Direction };
function isValidLang(value) {
    try {
        // We are relying on the Locale constructor to validate the value
        // eslint-disable-next-line no-new
        new Intl.Locale(value);
        return true;
    }
    catch (_e) {
        return false;
    }
}
export const lang = DesignToken.create({
    name: 'lang',
    cssCustomPropertyName: null
}).withDefault(() => (isValidLang(documentElementLang.lang) ? documentElementLang.lang : 'en-US'));
// Not represented as a CSS Custom Property, instead available
// as an attribute of theme provider.
export const direction = DesignToken.create({
    name: 'direction',
    cssCustomPropertyName: null
}).withDefault(Direction.ltr);
export const theme = DesignToken.create({
    name: 'theme',
    cssCustomPropertyName: null
}).withDefault(Theme.light);
/**
 * The ThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
 * the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
 * @internal
 */
export class ThemeProvider extends FoundationElement {
    constructor() {
        super(...arguments);
        this.theme = Theme.light;
        this.langIsInvalid = false;
    }
    get validity() {
        return {
            invalidLang: this.langIsInvalid
        };
    }
    checkValidity() {
        return !this.langIsInvalid;
    }
    langChanged(_prev, next) {
        if (next === null || next === undefined) {
            lang.deleteValueFor(this);
            this.langIsInvalid = false;
            return;
        }
        if (isValidLang(next)) {
            lang.setValueFor(this, next);
            this.langIsInvalid = false;
        }
        else {
            lang.deleteValueFor(this);
            this.langIsInvalid = true;
        }
    }
    directionChanged(_prev, next) {
        if (next !== undefined && next !== null) {
            direction.setValueFor(this, next);
        }
        else {
            direction.deleteValueFor(this);
        }
    }
    themeChanged(_prev, next) {
        if (next !== undefined && next !== null) {
            theme.setValueFor(this, next);
        }
        else {
            theme.deleteValueFor(this);
        }
    }
}
__decorate([
    attr()
], ThemeProvider.prototype, "lang", void 0);
__decorate([
    attr()
], ThemeProvider.prototype, "direction", void 0);
__decorate([
    attr()
], ThemeProvider.prototype, "theme", void 0);
const nimbleDesignSystemProvider = ThemeProvider.compose({
    baseName: 'theme-provider',
    styles,
    template
});
DesignSystem.getOrCreate()
    .withPrefix('nimble')
    .register(nimbleDesignSystemProvider());
export const themeProviderTag = 'nimble-theme-provider';
//# sourceMappingURL=index.js.map