<!--
  Questo file fa parte di MyTown.
  MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
  i termini della GNU Affero General Public License come pubblicata dalla
  Free Software Foundation, versione 3.
  Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
  Copyright (C) Kondor Consulting & Services S.r.l.
  SPDX-License-Identifier: AGPL-3.0-or-later
-->
<!-- mode 'section': recensione esistente oppure invito (niente se non eligibile) -->
@if (mode === 'section' && (canReview || existingReview)) {
	<div class="review-cta-section">
		<h6 class="review-cta-title">La tua recensione</h6>
		@if (existingReview) {
			<div class="review-existing">
				<div class="review-stars">
					@for (s of stars; track s) {
						<ion-icon [name]="s <= existingReview.rev_rating_overall ? 'star' : 'star-outline'"></ion-icon>
					}
					<span class="review-overall">{{ existingReview.rev_rating_overall | number: '1.1-1' }}</span>
				</div>
				@if (existingReview.rev_title) {
					<div class="review-title">{{ existingReview.rev_title }}</div>
				}
				@if (existingReview.rev_text) {
					<p class="review-text">{{ existingReview.rev_text }}</p>
				}
			</div>
		} @else {
			<p class="review-prompt">{{ prompt }}</p>
			<ion-button expand="block" color="success" (click)="openModal()">
				<ion-icon name="star-outline" slot="start"></ion-icon>
				Lascia una recensione
			</ion-button>
		}
	</div>
}

<!-- mode 'button': stato "Recensito" se già recensito, altrimenti il bottone -->
@if (mode === 'button') {
	@if (existingReview) {
		<div class="review-done">
			<div class="review-done-head">
				<ion-icon class="review-done-check" name="checkmark-circle"></ion-icon>
				<div class="review-stars">
					@for (s of stars; track s) {
						<ion-icon [name]="s <= existingReview.rev_rating_overall ? 'star' : 'star-outline'"></ion-icon>
					}
				</div>
				<span class="review-overall">{{ existingReview.rev_rating_overall | number: '1.1-1' }}</span>
			</div>
			@if (existingReview.rev_title) {
				<div class="review-title">{{ existingReview.rev_title }}</div>
			}
			@if (existingReview.rev_text) {
				<p class="review-text">{{ existingReview.rev_text }}</p>
			}
		</div>
	} @else {
		<ion-button size="small" fill="outline" color="success" (click)="onButtonClick()">
			<ion-icon name="star-outline" slot="start"></ion-icon>
			Lascia una recensione
		</ion-button>
	}
}

<!-- Modal recensione (stelle multi-criterio + titolo + testo) -->
<ion-modal [isOpen]="showModal" [breakpoints]="[0, 1]" [initialBreakpoint]="1" (didDismiss)="showModal = false">
	<ng-template>
		<ion-header>
			<ion-toolbar>
				<ion-title>Scrivi una recensione</ion-title>
				<ion-buttons slot="end">
					<ion-button (click)="showModal = false">Chiudi</ion-button>
				</ion-buttons>
			</ion-toolbar>
		</ion-header>
		<ion-content class="ion-padding">
			<div class="review-criteria">
				@for (c of reviewCriteria; track c) {
					<div class="review-criterion">
						<span class="review-criterion-label">{{ c.label }}</span>
						<div class="review-stars review-stars-input">
							@for (s of stars; track s) {
								<ion-icon [name]="s <= ratings[c.key] ? 'star' : 'star-outline'" (click)="setRating(c.key, s)"></ion-icon>
							}
						</div>
					</div>
				}
			</div>
			<ion-list>
				<ion-item>
					<ion-input label="Titolo" labelPlacement="stacked" [(ngModel)]="title" placeholder="In sintesi..." maxlength="150"></ion-input>
				</ion-item>
				<ion-item>
					<ion-textarea label="La tua recensione" labelPlacement="stacked" [(ngModel)]="text" placeholder="Racconta la tua esperienza..." [autoGrow]="true" rows="4"></ion-textarea>
				</ion-item>
			</ion-list>
			<ion-button expand="block" color="success" (click)="submit()" [disabled]="!complete" style="margin-top: 16px">
				<ion-icon name="send-outline" slot="start"></ion-icon>
				Invia recensione
			</ion-button>
		</ion-content>
	</ng-template>
</ion-modal>
