<os-head-bar [nav]="false">
    <!-- Title -->
    <div class="title-slot"><h2 translate>Import participants</h2></div>

    <div class="menu-slot">
        <button *ngIf="hasFile && newCount" mat-button (click)="doImport()">
            <span class="upper" translate> Import</span>
        </button>
    </div>
</os-head-bar>
<mat-card class="os-form-card import-table">
    <mat-tab-group (selectedTabChange)="onTabChange()">
        <!-- textarea import tab -->
        <mat-tab label="{{ 'Text import' | translate }}">
            <br>
            <div [formGroup]="textAreaForm">
                <div>
                    <span translate> Copy and paste your participant names in this textbox.</span>
                    <span translate> Keep each person in a single line. </span><br />
                    <span translate> Comma separated names will be read as 'Surname, given name(s)'. </span>
                </div>
                <mat-form-field>
                    <textarea
                        matInput
                        osAutofocus
                        formControlName="inputtext"
                        placeholder="{{ 'Insert participants here' | translate }}"
                        cdkTextareaAutosize
                        cdkAutosizeMinRows="3"
                        cdkAutosizeMaxRows="10"
                    ></textarea>
                </mat-form-field>
            </div>
            <div>
                <button mat-button color="accent" (click)="parseTextArea()"><span translate>Preview</span></button>
            </div>
        </mat-tab>
        <!-- CSV import tab -->
        <mat-tab label="{{ 'CSV import' | translate }}">
            <br>
            <span translate
                >Required comma or semicolon separated values with these column header names in the first row:</span
            ><br />
            <div class="code red-warning-text">
                <span translate>Title</span>, <span translate>Given name</span>, <span translate>Surname</span>,
                <span translate>Structure level</span>, <span translate>Participant number</span>,
                <span translate>Groups</span>, <span translate>Comment</span>, <span translate>Is active</span>,
                <span translate>Is present</span>, <span translate>Is committee</span>, <span translate>Initial password</span>,
                <span translate>Email</span>, <span translate>Username</span>, <span translate>Gender</span>
            </div>
            <ul>
                <li translate>
                    One of given name, surname and username has to be filled in. All other fields are optional and may be empty.
                </li>
                <li translate>
                    Additional columns after the required ones may be present and won't affect the import.
                </li>
            </ul>
            <button mat-button color="accent" (click)="downloadCsvExample()" translate>
                Download CSV example file
            </button>
            <div class="wrapper">
                <mat-form-field>
                    <mat-label translate>Encoding of the file</mat-label>
                    <mat-select
                        class="selection"
                        placeholder="translate.instant('Select encoding')"
                        (selectionChange)="selectEncoding($event)"
                        [value]="encodings[0].value"
                    >
                        <mat-option *ngFor="let option of encodings" [value]="option.value">
                            {{ option.label | translate }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-form-field>
                    <mat-label translate>Column separator</mat-label>
                    <mat-select class="selection" (selectionChange)="selectColSep($event)" value="">
                        <mat-option *ngFor="let option of columnSeparators" [value]="option.value">
                            {{ option.label | translate }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-form-field>
                    <mat-label translate>Text separator</mat-label>
                    <mat-select class="selection" (selectionChange)="selectTextSep($event)" value='"'>
                        <mat-option *ngFor="let option of textSeparators" [value]="option.value">
                            {{ option.label | translate }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
            <div>
                <div>
                    <input
                        id="user-import-file-input"
                        type="file"
                        class="hidden-input"
                        accept="text"
                        #fileInput
                        (change)="onSelectFile($event)"
                    />
                    <button
                        mat-button
                        color="accent"
                        onclick="document.getElementById('user-import-file-input').click()"
                    >
                        <span translate> Select file</span>
                    </button>
                </div>
            </div>
        </mat-tab>
    </mat-tab-group>
</mat-card>

<!-- preview table -->
<mat-card *ngIf="hasFile" class="os-form-card import-table">
    <h3 translate>Preview</h3>
    <div class="summary">
        <!-- new entries -->
        <div *ngIf="newCount">
            &nbsp;
            <mat-icon inline>playlist_add</mat-icon>
            <span>&nbsp;{{ newCount }}&nbsp;</span> <span translate>Participant(s) will be imported.</span>
        </div>
        <!-- errors/duplicates -->
        <div *ngIf="nonImportableCount" class="red-warning-text">
            &nbsp;
            <mat-icon inline>warning</mat-icon>
            <span>&nbsp;{{ nonImportableCount }}&nbsp;</span> <span translate>entries will be ommitted.</span>
        </div>
        <!-- have been imported -->
        <div *ngIf="doneCount" class="green-text">
            &nbsp;
            <mat-icon inline>done</mat-icon>
            <span>&nbsp;{{ doneCount }}&nbsp;</span> <span translate>Participants have been imported.</span>
        </div>
    </div>
    <div *ngIf="newCount">
        <span translate>After verifiy the preview click on 'import' please (see top right).</span>
    </div>
    <mat-select *ngIf="nonImportableCount" class="filter-imports" [(value)]="shown" (selectionChange)="setFilter()">
        <mat-option value="all" translate>Show all</mat-option>
        <mat-option value="error" translate>Show errors only</mat-option>
        <mat-option value="noerror" translate>Show correct entries only</mat-option>
    </mat-select>
    <div class="table-container">
        <table mat-table [dataSource]="dataSource" matSort>
            <!-- Status column -->
            <ng-container matColumnDef="status" sticky>
                <mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell>
                <mat-cell *matCellDef="let entry" class="first-column">
                    <div *ngIf="entry.status === 'error'">
                        <mat-icon
                            class="red-warning-text"
                            matTooltip="{{ entry.errors.length }} {{ 'errors' | translate }}"
                        >
                            {{ getActionIcon(entry) }}
                        </mat-icon>
                        <mat-icon
                            color="warn"
                            *ngIf="hasError(entry, 'ParsingErrors')"
                            matTooltip="{{ getVerboseError('ParsingErrors') | translate }}"
                        >
                            warning
                        </mat-icon>
                    </div>
                    <div *ngIf="entry.status === 'new'">
                        <mat-icon matTooltip="{{ 'Participant will be imported' | translate }}">
                            {{ getActionIcon(entry) }}
                        </mat-icon>
                    </div>
                    <div *ngIf="entry.status === 'done'">
                        <mat-icon matTooltip="{{ 'Participant has been imported' | translate }}">
                            {{ getActionIcon(entry) }}
                        </mat-icon>
                    </div>
                </mat-cell>
            </ng-container>

            <!-- Title column -->
            <ng-container matColumnDef="title">
                <mat-header-cell *matHeaderCellDef translate>Title</mat-header-cell>
                <mat-cell *matCellDef="let entry">
                    <span *ngIf="nameErrors(entry)">
                        <mat-icon color="warn" inline matTooltip="{{ nameErrors(entry) | translate }}">
                            warning
                        </mat-icon>
                        &nbsp;
                    </span>
                    {{ entry.newEntry.title }}
                </mat-cell>
            </ng-container>

            <!-- title column -->
            <ng-container matColumnDef="first_name">
                <mat-header-cell *matHeaderCellDef translate>Given name</mat-header-cell>
                <mat-cell *matCellDef="let entry">
                    <span *ngIf="nameErrors(entry)">
                        <mat-icon color="warn" inline matTooltip="{{ nameErrors(entry) | translate }}">
                            warning
                        </mat-icon>
                        &nbsp;
                    </span>
                    {{ entry.newEntry.first_name }}
                </mat-cell>
            </ng-container>

            <ng-container matColumnDef="last_name">
                <mat-header-cell *matHeaderCellDef translate>Surname</mat-header-cell>
                <mat-cell *matCellDef="let entry">
                    <span *ngIf="nameErrors(entry)">
                        <mat-icon color="warn" inline matTooltip="{{ nameErrors(entry) | translate }}">
                            warning
                        </mat-icon>
                        &nbsp;
                    </span>
                    {{ entry.newEntry.last_name }}
                </mat-cell>
            </ng-container>

            <ng-container matColumnDef="structure_level">
                <mat-header-cell *matHeaderCellDef translate>Structure level</mat-header-cell>
                <mat-cell *matCellDef="let entry"> {{ entry.newEntry.structure_level }} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="number">
                <mat-header-cell *matHeaderCellDef translate>Participant number</mat-header-cell>
                <mat-cell *matCellDef="let entry"> {{ entry.newEntry.number }} </mat-cell>
            </ng-container>

            <!-- groups column -->
            <ng-container matColumnDef="groups_id">
                <mat-header-cell *matHeaderCellDef translate>Groups</mat-header-cell>
                <mat-cell *matCellDef="let entry">
                    <div *ngIf="entry.newEntry.csvGroups.length">
                        <span *ngIf="hasError(entry, 'Groups')">
                            <mat-icon color="warn" matTooltip="{{ getVerboseError('Groups') | translate }}">
                                warning
                            </mat-icon>
                        </span>
                        <span *ngFor="let group of entry.newEntry.csvGroups">
                            {{ group.name }}
                            <mat-icon class="newBadge" color="accent" inline *ngIf="!group.id">add</mat-icon>
                            &nbsp;
                        </span>
                    </div>
                </mat-cell>
            </ng-container>

            <ng-container matColumnDef="comment">
                <mat-header-cell *matHeaderCellDef translate>Comment</mat-header-cell>
                <mat-cell *matCellDef="let entry"> {{ entry.newEntry.comment }} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="is_active">
                <mat-header-cell *matHeaderCellDef translate>Is active</mat-header-cell>
                <mat-cell *matCellDef="let entry">
                    <mat-checkbox disabled [checked]="entry.newEntry.is_active"> </mat-checkbox>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="is_present">
                <mat-header-cell *matHeaderCellDef translate>Is present</mat-header-cell>
                <mat-cell *matCellDef="let entry">
                    <mat-checkbox disabled [checked]="entry.newEntry.is_present"> </mat-checkbox>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="is_committee">
                <mat-header-cell *matHeaderCellDef translate>Is committee</mat-header-cell>
                <mat-cell *matCellDef="let entry">
                    <mat-checkbox disabled [checked]="entry.newEntry.is_committee"> </mat-checkbox>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="default_password">
                <mat-header-cell *matHeaderCellDef translate>Initial password</mat-header-cell>
                <mat-cell *matCellDef="let entry"> {{ entry.newEntry.default_password }} </mat-cell>
            </ng-container>
            <ng-container matColumnDef="email">
                <mat-header-cell *matHeaderCellDef translate>Email</mat-header-cell>
                <mat-cell *matCellDef="let entry"> {{ entry.newEntry.email }} </mat-cell>
            </ng-container>
            <ng-container matColumnDef="username">
                <mat-header-cell *matHeaderCellDef translate>Username</mat-header-cell>
                <mat-cell *matCellDef="let entry"> {{ entry.newEntry.username }} </mat-cell>
            </ng-container>
            <ng-container matColumnDef="gender">
                <mat-header-cell *matHeaderCellDef translate>Gender</mat-header-cell>
                <mat-cell *matCellDef="let entry"> {{ entry.newEntry.gender }} </mat-cell>
            </ng-container>

            <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
            <mat-row [ngClass]="getStateClass(row)" *matRowDef="let row; columns: getColumnDefinition()"> </mat-row>
        </table>
    </div>
</mat-card>
