import {
    ChangeDetectionStrategy,
    Component,
    Input,
    OnInit,
} from '@angular/core';
import { ITextAlign } from '@typings/common/align';
import { ITooltipPosition } from '@typings/common/position';

// If you change these types you also need to change maps in text.component.scss
export type ITextSize =
    | '10'
    | '12'
    | '14'
    | '16'
    | '18'
    | '20'
    | '22'
    | '26'
    | '30'
    | '36'
    | '42';
export type ITextWeight = 'light' | 'regular' | 'medium' | 'bold';
export type ITextColor =
    | 'default'
    | 'dark-blue'
    | 'blue'
    | 'light-gray'
    | 'light-blue'
    | 'red'
    | 'orange'
    | 'white';
export type ITextStyles = {
    size?: ITextSize;
    mobileSize?: ITextSize;
    weight?: ITextWeight;
    mobileWeight?: ITextWeight;
    color?: ITextColor;
};

@Component({
    selector: 'text',
    templateUrl: './text.component.html',
    styleUrls: ['./text.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TextComponent implements OnInit {
    @Input() size: ITextSize = '14';
    @Input() mobileSize: ITextSize;
    @Input() weight: ITextWeight = 'regular';
    @Input() mobileWeight: ITextWeight;
    @Input() color: ITextColor = 'default';
    @Input() align: ITextAlign = 'left';
    @Input() ellipsis = false;
    @Input() tooltip;
    @Input() tooltipPosition: ITooltipPosition = 'top';

    ngOnInit() {
        if (!this.mobileSize) {
            // set mobile size equal to size if mobileSize isn't provided
            this.mobileSize = this.size;
        }

        if (!this.mobileWeight) {
            this.mobileWeight = this.weight;
        }
    }

    get textClasses() {
        return {
            text: true,
            [`text--${this.size}`]: this.size !== '14',
            [`text--mobile-${this.mobileSize}`]: !!this.mobileSize,
            [`text--${this.weight}`]: this.weight !== 'regular',
            [`text--mobile-${this.mobileWeight}`]: !!this.mobileWeight,
            [`text--${this.color}`]: this.color !== 'default',
            [`text--${this.align}`]: this.align !== 'left',
            'text--ellipsis': this.ellipsis,
        };
    }
}
