import { CommonModule } from '@angular/common';
import { Component, computed, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MeetLayoutMode } from '../../models/layout.model';
import { MeetingContextService } from '../../services/meeting-context.service';
import { MeetingLayoutService } from '../../services/meeting-layout.service';

/**
 * Component for additional settings in the Settings Panel.
 */
@Component({
	selector: 'ov-meeting-settings-extensions',
	imports: [
		CommonModule,
		MatIconModule,
		MatListModule,
		MatRadioModule,
		MatSliderModule,
		MatFormFieldModule,
		MatSelectModule,
		FormsModule
	],
	templateUrl: './meeting-settings-extensions.component.html',
	styleUrl: './meeting-settings-extensions.component.scss'
})
export class MeetingSettingsExtensionsComponent {
	private readonly layoutService = inject(MeetingLayoutService);
	protected readonly meetingContextService = inject(MeetingContextService);

	/**
	 * Expose LayoutMode enum to template
	 */
	readonly LayoutMode = MeetLayoutMode;

	/**
	 * Whether the layout switching feature is allowed
	 */
	protected readonly isLayoutSwitchingAllowed = this.meetingContextService.allowLayoutSwitching;

	/**
	 * Current layout mode
	 */
	protected readonly layoutMode = computed(() => this.layoutService.layoutMode());

	/**
	 * Current participant count
	 */
	protected readonly participantCount = computed(() => this.layoutService.maxRemoteSpeakers());

	/**
	 * Minimum number of participants that can be shown when Smart Mosaic layout is enabled
	 */
	protected readonly minParticipants = this.layoutService.MIN_REMOTE_SPEAKERS;

	/**
	 * Maximum number of participants that can be shown
	 */
	protected readonly maxParticipants = this.layoutService.MAX_REMOTE_SPEAKERS_LIMIT;

	/**
	 * Computed property to check if Smart Mosaic mode is active
	 */
	readonly isSmartMode = this.layoutService.isSmartMosaicEnabled;

	/**
	 * Handler for layout mode change
	 */
	onLayoutModeChange(mode: MeetLayoutMode): void {
		this.layoutService.setLayoutMode(mode);
	}

	/**
	 * Handler for participant count change
	 */
	onParticipantCountChange(count: number): void {
		this.layoutService.setMaxRemoteSpeakers(count);
	}

	/**
	 * Format label for the participant count slider
	 */
	formatLabel(value: number): string {
		return `${value}`;
	}
}
