import { Component, forwardRef } from '@angular/core'
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'

@Component({
	selector: 'kadi-checkbox-group',
	template: ` <ng-content /> `,
	providers: [
		{
			provide: NG_VALUE_ACCESSOR,
			useExisting: forwardRef(() => CheckboxGroupComponent),
			multi: true,
		},
	],
	standalone: false,
})
export class CheckboxGroupComponent implements ControlValueAccessor {
	private _model: unknown[] = []
	private onChange!: (m: unknown) => void
	private onTouched!: (m: unknown) => void

	get model() {
		return this._model
	}

	writeValue(value: unknown[]): void {
		this._model = value
	}

	registerOnChange(fn: (m: unknown) => void): void {
		this.onChange = fn
	}

	registerOnTouched(fn: (m: unknown) => void): void {
		this.onTouched = fn
	}

	set(value: unknown[]) {
		this._model = value
		this.onChange(this._model)
	}

	addOrRemove(value: unknown) {
		if (this.contains(value)) {
			this.remove(value)
		} else {
			this.add(value)
		}
	}

	contains(value: unknown): boolean {
		if (Array.isArray(this._model)) {
			return this._model.includes(value)
		} else if (this._model) {
			return this._model === value
		}

		return false
	}

	private add(value: unknown) {
		if (!this.contains(value)) {
			if (Array.isArray(this._model)) {
				this._model.push(value)
			} else {
				this._model = [value]
			}
			this.onChange(this._model)
		}
	}

	private remove(value: unknown) {
		const index = this._model.indexOf(value)
		if (!this._model || index === -1) {
			return
		}

		this._model.splice(index, 1)
		this.onChange(this._model)
	}
}