<vdr-dropdown [manualToggle]="true" #dropdown>
    <div class="filter-button" [ngClass]="state">
        <clr-icon shape="plus" size="12" *ngIf="state === 'new'"></clr-icon>
        <button *ngIf="state === 'active'" class="remove" (click)="deactivate()">
            <clr-icon shape="times" size="12"></clr-icon>
        </button>
        <button vdrDropdownTrigger class="">
            <span *ngIf="state === 'new'">{{ 'common.add-filter' | translate }}</span>
            <span *ngIf="state === 'active'">
                <vdr-data-table-filter-label [filterWithValue]="filterWithValue"></vdr-data-table-filter-label>
            </span>
            <clr-icon shape="ellipsis-vertical" size="12"></clr-icon>
        </button>
    </div>
    <vdr-dropdown-menu vdrPosition="bottom-left">
        <div *ngIf="!selectedFilter">
            <div class="filter-heading">Filter by:</div>
            <div *ngFor="let filter of filters.getFilters()">
                <button vdrDropdownItem (click)="selectFilter(filter)">
                    {{ filter.label | translate }}
                </button>
            </div>
        </div>
        <div *ngIf="selectedFilter" class="">
            <div class="filter-heading">Filter by {{ selectedFilter.label | translate }}:</div>
            <div class="mx-2 mt-1" [ngSwitch]="selectedFilter.type.kind">
                <div *ngSwitchCase="'select'" [formGroup]="formControl">
                    <label *ngFor="let option of $any(selectedFilter.type).options; index as i">
                        <input type="checkbox" [formControlName]="i" />
                        <span>{{ option.label | translate }}</span>
                    </label>
                </div>
                <div *ngSwitchCase="'boolean'">
                    <label
                        ><input type="checkbox" [formControl]="formControl" clrToggle />
                        <span *ngIf="formControl.value">{{ 'common.boolean-true' | translate }}</span>
                        <span *ngIf="!formControl.value">{{ 'common.boolean-false' | translate }}</span>
                    </label>
                </div>
                <div *ngSwitchCase="'text'">
                    <div [formGroup]="formControl">
                        <select clrSelect name="options" formControlName="operator" class="mb-1">
                            <option value="contains">{{ 'common.operator-contains' | translate }}</option>
                            <option value="eq">{{ 'common.operator-eq' | translate }}</option>
                            <option value="notContains">
                                {{ 'common.operator-not-contains' | translate }}
                            </option>
                            <option value="notEq">{{ 'common.operator-not-eq' | translate }}</option>
                            <option value="regex">{{ 'common.operator-regex' | translate }}</option>
                        </select>
                        <input type="text" formControlName="term" />
                    </div>
                </div>
                <div *ngSwitchCase="'number'">
                    <div [formGroup]="formControl">
                        <select clrSelect name="options" formControlName="operator" class="mb-1">
                            <option value="eq">{{ 'common.operator-eq' | translate }}</option>
                            <option value="gt">{{ 'common.operator-gt' | translate }}</option>
                            <option value="lt">{{ 'common.operator-lt' | translate }}</option>
                        </select>
                        <input
                            *ngIf="$any(selectedFilter.type).inputType !== 'currency'"
                            type="text"
                            formControlName="amount"
                        />
                        <vdr-currency-input
                            *ngIf="$any(selectedFilter.type).inputType === 'currency'"
                            formControlName="amount"
                        />
                    </div>
                </div>
                <div *ngSwitchCase="'dateRange'">
                    <div [formGroup]="formControl">
                        <label>
                            <div>{{ 'common.start-date' | translate }}</div>
                        </label>
                        <vdr-datetime-picker formControlName="start"></vdr-datetime-picker>
                        <label>
                            <div>{{ 'common.end-date' | translate }}</div>
                        </label>
                        <vdr-datetime-picker formControlName="end"></vdr-datetime-picker>
                    </div>
                </div>
            </div>
            <div class="apply-wrapper mt-2">
                <button class="button" (click)="activate()" [disabled]="!formControl.valid">
                    <span>{{ 'common.apply' | translate }}</span>
                    <clr-icon shape="check"></clr-icon>
                </button>
            </div>
        </div>
    </vdr-dropdown-menu>
</vdr-dropdown>
