<vdr-action-bar>
    <vdr-ab-left>
        <div class="flex clr-flex-row">
            <vdr-entity-info [entity]="entity$ | async"></vdr-entity-info>
            <clr-toggle-wrapper *vdrIfPermissions="'UpdateCatalog'">
                <input
                    type="checkbox"
                    clrToggle
                    name="enabled"
                    [formControl]="detailForm.get(['product', 'enabled'])"
                />
                <label>{{ 'common.enabled' | translate }}</label>
            </clr-toggle-wrapper>
        </div>
        <vdr-language-selector
            [disabled]="isNew$ | async"
            [availableLanguageCodes]="availableLanguages$ | async"
            [currentLanguageCode]="languageCode$ | async"
            (languageCodeChange)="setLanguage($event)"
        ></vdr-language-selector>
    </vdr-ab-left>

    <vdr-ab-right>
        <vdr-action-bar-items locationId="product-detail"></vdr-action-bar-items>
        <button
            class="btn btn-primary"
            *ngIf="isNew$ | async; else updateButton"
            (click)="create()"
            [disabled]="detailForm.invalid || detailForm.pristine || !variantsToCreateAreValid()"
        >
            {{ 'common.create' | translate }}
        </button>
        <ng-template #updateButton>
            <button
                *vdrIfPermissions="'UpdateCatalog'"
                class="btn btn-primary"
                (click)="save()"
                [disabled]="
                    (detailForm.invalid || detailForm.pristine) && !assetsChanged() && !variantAssetsChanged()
                "
            >
                {{ 'common.update' | translate }}
            </button>
        </ng-template>
    </vdr-ab-right>
</vdr-action-bar>

<form
    class="form"
    [formGroup]="detailForm"
    *ngIf="product$ | async as product"
    (keydown.enter)="$event.preventDefault()"
>
    <clr-tabs>
        <clr-tab>
            <button clrTabLink (click)="navigateToTab('details')">
                {{ 'catalog.product-details' | translate }}
            </button>
            <clr-tab-content *clrIfActive="(activeTab$ | async) === 'details'">
                <div class="clr-row">
                    <div class="clr-col">
                        <section class="form-block" formGroupName="product">
                            <ng-container *vdrIfMultichannel>
                                <vdr-form-item
                                    [label]="'common.channels' | translate"
                                    *vdrIfDefaultChannelActive
                                >
                                    <div class="flex">
                                        <div class="product-channels">
                                            <ng-container *ngFor="let channel of productChannels$ | async">
                                                <vdr-chip
                                                    *ngIf="!isDefaultChannel(channel.code)"
                                                    icon="times-circle"
                                                    (iconClick)="removeFromChannel(channel.id)"
                                                >
                                                    <vdr-channel-badge
                                                        [channelCode]="channel.code"
                                                    ></vdr-channel-badge>
                                                    {{ channel.code | channelCodeToLabel }}
                                                </vdr-chip>
                                            </ng-container>
                                        </div>
                                        <button class="btn btn-sm" (click)="assignToChannel()">
                                            <clr-icon shape="layers"></clr-icon>
                                            {{ 'catalog.assign-to-channel' | translate }}
                                        </button>
                                    </div>
                                </vdr-form-item>
                            </ng-container>
                            <vdr-form-field [label]="'catalog.product-name' | translate" for="name">
                                <input
                                    id="name"
                                    type="text"
                                    formControlName="name"
                                    [readonly]="!('UpdateCatalog' | hasPermission)"
                                    (input)="updateSlug($event.target.value)"
                                />
                            </vdr-form-field>
                            <vdr-form-field
                                [label]="'catalog.slug' | translate"
                                for="slug"
                                [errors]="{ pattern: 'catalog.slug-pattern-error' | translate }"
                            >
                                <input
                                    id="slug"
                                    type="text"
                                    formControlName="slug"
                                    [readonly]="!('UpdateCatalog' | hasPermission)"
                                    pattern="[a-z0-9_-]+"
                                />
                            </vdr-form-field>
                            <vdr-rich-text-editor
                                formControlName="description"
                                [readonly]="!('UpdateCatalog' | hasPermission)"
                                [label]="'common.description' | translate"
                            ></vdr-rich-text-editor>

                            <section formGroupName="customFields" *ngIf="customFields.length">
                                <label>{{ 'common.custom-fields' | translate }}</label>
                                <ng-container *ngFor="let customField of customFields">
                                    <vdr-custom-field-control
                                        *ngIf="customFieldIsSet(customField.name)"
                                        entityName="Product"
                                        [customFieldsFormGroup]="detailForm.get(['product', 'customFields'])"
                                        [customField]="customField"
                                        [readonly]="!('UpdateCatalog' | hasPermission)"
                                    ></vdr-custom-field-control>
                                </ng-container>
                            </section>

                            <div class="facets">
                                <vdr-facet-value-chip
                                    *ngFor="let facetValue of facetValues$ | async"
                                    [facetValue]="facetValue"
                                    [removable]="'UpdateCatalog' | hasPermission"
                                    (remove)="removeProductFacetValue(facetValue.id)"
                                ></vdr-facet-value-chip>
                                <button
                                    class="btn btn-sm btn-secondary"
                                    *vdrIfPermissions="'UpdateCatalog'"
                                    (click)="selectProductFacetValue()"
                                >
                                    <clr-icon shape="plus"></clr-icon>
                                    {{ 'catalog.add-facets' | translate }}
                                </button>
                            </div>
                        </section>
                    </div>
                    <div class="clr-col-md-auto">
                        <vdr-product-assets
                            [assets]="product.assets"
                            [featuredAsset]="product.featuredAsset"
                            (change)="assetChanges = $event"
                        ></vdr-product-assets>
                    </div>
                </div>

                <div *ngIf="isNew$ | async">
                    <h4>{{ 'catalog.product-variants' | translate }}</h4>
                    <vdr-generate-product-variants
                        (variantsChange)="createVariantsConfig = $event"
                    ></vdr-generate-product-variants>
                </div>
            </clr-tab-content>
        </clr-tab>
        <clr-tab *ngIf="!(isNew$ | async)">
            <button clrTabLink (click)="navigateToTab('variants')">
                {{ 'catalog.product-variants' | translate }}
            </button>
            <clr-tab-content *clrIfActive="(activeTab$ | async) === 'variants'">
                <section class="form-block">
                    <div class="view-mode">
                        <div class="btn-group">
                            <button
                                class="btn btn-secondary-outline"
                                (click)="variantDisplayMode = 'card'"
                                [class.btn-primary]="variantDisplayMode === 'card'"
                            >
                                <clr-icon shape="list"></clr-icon>
                                {{ 'catalog.display-variant-cards' | translate }}
                            </button>
                            <button
                                class="btn"
                                (click)="variantDisplayMode = 'table'"
                                [class.btn-primary]="variantDisplayMode === 'table'"
                            >
                                <clr-icon shape="table"></clr-icon>
                                {{ 'catalog.display-variant-table' | translate }}
                            </button>
                        </div>
                        <div class="variant-filter">
                            <input
                                [formControl]="filterInput"
                                class="clr-input"
                                [placeholder]="'catalog.filter-by-name-or-sku' | translate"
                            />
                            <button class="icon-button" (click)="filterInput.setValue('')">
                                <clr-icon shape="times"></clr-icon>
                            </button>
                        </div>
                        <div class="flex-spacer"></div>
                        <a
                            *vdrIfPermissions="'UpdateCatalog'"
                            [routerLink]="['./', 'manage-variants']"
                            class="btn btn-secondary edit-variants-btn"
                        >
                            <clr-icon shape="add-text"></clr-icon>
                            {{ 'catalog.manage-variants' | translate }}
                        </a>
                    </div>

                    <vdr-product-variants-table
                        *ngIf="variantDisplayMode === 'table'"
                        [variants]="variants$ | async"
                        [optionGroups]="product.optionGroups"
                        [productVariantsFormArray]="detailForm.get('variants')"
                    ></vdr-product-variants-table>
                    <vdr-product-variants-list
                        *ngIf="variantDisplayMode === 'card'"
                        [variants]="variants$ | async"
                        [facets]="facets$ | async"
                        [optionGroups]="product.optionGroups"
                        [productVariantsFormArray]="detailForm.get('variants')"
                        [taxCategories]="taxCategories$ | async"
                        [customFields]="customVariantFields"
                        [customOptionFields]="customOptionFields"
                        [activeLanguage]="languageCode$ | async"
                        (assetChange)="variantAssetChange($event)"
                        (updateProductOption)="updateProductOption($event)"
                        (selectionChange)="selectedVariantIds = $event"
                        (selectFacetValueClick)="selectVariantFacetValue($event)"
                    ></vdr-product-variants-list>
                </section>
            </clr-tab-content>
        </clr-tab>
    </clr-tabs>
</form>
