import { Constructor } from '../../../models/mixin.model';
import { ICaInput } from '../config';
import { InputChangeValue } from '../utils';
import { InputBase } from '../models/base.model';

export function InputHelperMixin<T extends Constructor<InputBase>>(Base: T) {
    return class extends Base {
        // Transform value after we get update from Angular
        public transformValue(inputConfig: ICaInput, value: InputChangeValue) {
            if (value) {
                if (inputConfig.mask)
                    return this.maskApplier.applyMask(
                        value as string,
                        inputConfig.mask
                    );
                else if (inputConfig.priceSeparator)
                    return this.thousandSeparatorPipe.transform(value);
            } else if (inputConfig.defaultValue) {
                return inputConfig.defaultValue;
            }

            return value;
        }

        // #region ToggleDropdownOptions
        public toggleDropdownOptions(): void {
            this.handleToggleDropdownOptions.emit();
            if (this._inputConfig.isDisabled) {
                return;
            }

            this.isDropdownToggler = !this.isDropdownToggler;

            // this.setShowHideDropdown.next(this.isDropdownToggler);

            if (this.isDropdownToggler) {
                this.inputElement.nativeElement.focus();
                this.isFocusInput = true;
            }
        }
        // #endregion

        // #region onPlaceholderIconevent
        public onPlaceholderIconEvent(event: Event): void {
            event.preventDefault();
            event.stopPropagation();
            if (this.isEditInput) {
                this.setCommandEvent.next({
                    data: this.inputElement.nativeElement?.value,
                    action: 'Toggle Dropdown',
                });
            } else {
                this.setCommandEvent.next({
                    data: this.inputElement.nativeElement?.value,
                    action: 'Placeholder Icon Event',
                });
            }
        }
        // #endregion
    };
}