<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', 'UpdateProduct']">
                <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', 'UpdateProduct']"
                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">
    <button type="submit" hidden x-data="prevents enter key from triggering other buttons"></button>
    <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 *ngIf="!(isNew$ | async)">
                                <ng-container *vdrIfMultichannel>
                                    <vdr-form-item
                                        [label]="'common.channels' | translate"
                                        *vdrIfDefaultChannelActive
                                    >
                                        <div class="flex channel-assignment">
                                            <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>
                                            <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>
                            </ng-container>
                            <vdr-form-field [label]="'catalog.product-name' | translate" for="name">
                                <input
                                    id="name"
                                    type="text"
                                    formControlName="name"
                                    [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
                                    (input)="updateSlug($event.target.value)"
                                />
                            </vdr-form-field>
                            <div
                                class="auto-rename-wrapper"
                                [class.visible]="
                                    (isNew$ | async) === false && detailForm.get(['product', 'name'])?.dirty
                                "
                            >
                                <clr-checkbox-wrapper>
                                    <input
                                        clrCheckbox
                                        type="checkbox"
                                        id="auto-update"
                                        formControlName="autoUpdateVariantNames"
                                    />
                                    <label>{{
                                        'catalog.auto-update-product-variant-name' | translate
                                    }}</label>
                                </clr-checkbox-wrapper>
                            </div>
                            <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', 'UpdateProduct'] | hasPermission)"
                                />
                            </vdr-form-field>
                            <vdr-rich-text-editor
                                formControlName="description"
                                [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
                                [label]="'common.description' | translate"
                            ></vdr-rich-text-editor>

                            <section formGroupName="customFields" *ngIf="customFields.length">
                                <label>{{ 'common.custom-fields' | translate }}</label>
                                <vdr-tabbed-custom-fields
                                    entityName="Product"
                                    [customFields]="customFields"
                                    [customFieldsFormGroup]="detailForm.get(['product', 'customFields'])"
                                    [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
                                ></vdr-tabbed-custom-fields>
                            </section>
                            <vdr-custom-detail-component-host
                                locationId="product-detail"
                                [entity$]="entity$"
                                [detailForm]="detailForm"
                            ></vdr-custom-detail-component-host>
                        </section>
                    </div>
                    <div class="clr-col-md-auto">
                        <vdr-assets
                            [assets]="assetChanges.assets || product.assets"
                            [featuredAsset]="assetChanges.featuredAsset || product.featuredAsset"
                            [updatePermissions]="updatePermissions"
                            (change)="assetChanges = $event"
                        ></vdr-assets>
                        <div class="facets">
                            <vdr-facet-value-chip
                                *ngFor="let facetValue of facetValues$ | async"
                                [facetValue]="facetValue"
                                [removable]="['UpdateCatalog', 'UpdateProduct'] | hasPermission"
                                (remove)="removeProductFacetValue(facetValue.id)"
                            ></vdr-facet-value-chip>
                            <button
                                class="btn btn-sm btn-secondary"
                                *vdrIfPermissions="['UpdateCatalog', 'UpdateProduct']"
                                (click)="selectProductFacetValue()"
                            >
                                <clr-icon shape="plus"></clr-icon>
                                {{ 'catalog.add-facets' | translate }}
                            </button>
                        </div>
                    </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>
                                <span class="full-label">{{ 'catalog.display-variant-cards' | translate }}</span>
                            </button>
                            <button
                                class="btn"
                                (click)="variantDisplayMode = 'table'"
                                [class.btn-primary]="variantDisplayMode === 'table'"
                            >
                                <clr-icon shape="table"></clr-icon>
                                <span class="full-label">{{ 'catalog.display-variant-table' | translate }}</span>
                            </button>
                        </div>
                        <div class="variant-filter">
                            <input
                                [formControl]="filterInput"
                                [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', 'UpdateProduct']"
                            [routerLink]="['./', 'manage-variants']"
                            class="btn btn-secondary edit-variants-btn mb0 mr0"
                        >
                            <clr-icon shape="add-text"></clr-icon>
                            {{ 'catalog.manage-variants' | translate }}
                        </a>
                    </div>

                    <div class="pagination-row mt-4" *ngIf="10 < (paginationConfig$ | async)?.totalItems">
                        <vdr-items-per-page-controls
                            [itemsPerPage]="itemsPerPage$ | async"
                            (itemsPerPageChange)="setItemsPerPage($event)"
                        ></vdr-items-per-page-controls>

                        <vdr-pagination-controls
                            [id]="(paginationConfig$ | async)?.id"
                            [currentPage]="currentPage$ | async"
                            [itemsPerPage]="itemsPerPage$ | async"
                            (pageChange)="setPage($event)"
                        ></vdr-pagination-controls>
                    </div>

                    <vdr-product-variants-table
                        *ngIf="variantDisplayMode === 'table'"
                        [variants]="variants$ | async"
                        [paginationConfig]="paginationConfig$ | async"
                        [optionGroups]="product.optionGroups"
                        [channelPriceIncludesTax]="channelPriceIncludesTax$ | async"
                        [productVariantsFormArray]="detailForm.get('variants')"
                        [pendingAssetChanges]="variantAssetChanges"
                    ></vdr-product-variants-table>
                    <vdr-product-variants-list
                        *ngIf="variantDisplayMode === 'card'"
                        [variants]="variants$ | async"
                        [paginationConfig]="paginationConfig$ | async"
                        [channelPriceIncludesTax]="channelPriceIncludesTax$ | async"
                        [pendingFacetValueChanges]="variantFacetValueChanges"
                        [optionGroups]="product.optionGroups"
                        [productVariantsFormArray]="detailForm.get('variants')"
                        [taxCategories]="taxCategories$ | async"
                        [customFields]="customVariantFields"
                        [customOptionFields]="customOptionFields"
                        [activeLanguage]="languageCode$ | async"
                        [pendingAssetChanges]="variantAssetChanges"
                        (assignToChannel)="assignVariantToChannel($event)"
                        (removeFromChannel)="removeVariantFromChannel($event)"
                        (assetChange)="variantAssetChange($event)"
                        (updateProductOption)="updateProductOption($event)"
                        (selectionChange)="selectedVariantIds = $event"
                    ></vdr-product-variants-list>
                </section>
                <div class="pagination-row mt-4" *ngIf="10 < (paginationConfig$ | async)?.totalItems">
                    <vdr-items-per-page-controls
                        [itemsPerPage]="itemsPerPage$ | async"
                        (itemsPerPageChange)="setItemsPerPage($event)"
                    ></vdr-items-per-page-controls>

                    <vdr-pagination-controls
                        [id]="(paginationConfig$ | async)?.id"
                        [currentPage]="currentPage$ | async"
                        [itemsPerPage]="itemsPerPage$ | async"
                        (pageChange)="setPage($event)"
                    ></vdr-pagination-controls>
                </div>
            </clr-tab-content>
        </clr-tab>
    </clr-tabs>
</form>
