<vdr-action-bar>
    <vdr-ab-left>
        <vdr-entity-info [entity]="entity$ | async"></vdr-entity-info>
        <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="shipping-method-detail"></vdr-action-bar-items>
        <button
            class="btn btn-primary"
            *ngIf="isNew$ | async; else updateButton"
            (click)="create()"
            [disabled]="detailForm.pristine || detailForm.invalid || !selectedChecker || !selectedCalculator"
        >
            {{ 'common.create' | translate }}
        </button>
        <ng-template #updateButton>
            <button
                class="btn btn-primary"
                (click)="save()"
                *vdrIfPermissions="updatePermission"
                [disabled]="
                    detailForm.pristine || detailForm.invalid || !selectedChecker || !selectedCalculator
                "
            >
                {{ 'common.update' | translate }}
            </button>
        </ng-template>
    </vdr-ab-right>
</vdr-action-bar>

<form class="form" [formGroup]="detailForm" *ngIf="entity$ | async as shippingMethod">
    <vdr-form-field [label]="'common.name' | translate" for="name">
        <input
            id="name"
            type="text"
            formControlName="name"
            [readonly]="!(updatePermission | hasPermission)"
            (input)="updateCode(shippingMethod.code, $event.target.value)"
        />
    </vdr-form-field>
    <vdr-form-field
        [label]="'common.code' | translate"
        for="code"
        [readOnlyToggle]="updatePermission | hasPermission"
    >
        <input
            id="code"
            type="text"
            formControlName="code"
            [readonly]="!(updatePermission | hasPermission)"
        />
    </vdr-form-field>
    <vdr-rich-text-editor
        formControlName="description"
        [readonly]="!(updatePermission | hasPermission)"
        [label]="'common.description' | translate"
    ></vdr-rich-text-editor>
    <vdr-form-field [label]="'settings.fulfillment-handler' | translate" for="fulfillmentHandler" class="mb-2">
        <select
            name="fulfillmentHandler"
            formControlName="fulfillmentHandler"
            [vdrDisabled]="!(updatePermission | hasPermission)"
        >
            <option *ngFor="let handler of fulfillmentHandlers" [value]="handler.code">
                {{ handler.code }}: {{ handler.description }}
            </option>
        </select>
    </vdr-form-field>

    <section formGroupName="customFields" *ngIf="customFields.length">
        <label>{{ 'common.custom-fields' | translate }}</label>
        <vdr-tabbed-custom-fields
            entityName="ShippingMethod"
            [customFields]="customFields"
            [customFieldsFormGroup]="detailForm.get('customFields')"
            [readonly]="!(updatePermission | hasPermission)"
        ></vdr-tabbed-custom-fields>
    </section>

    <vdr-custom-detail-component-host
        locationId="shipping-method-detail"
        [entity$]="entity$"
        [detailForm]="detailForm"
    ></vdr-custom-detail-component-host>

    <div class="clr-row mt-4">
        <div class="clr-col">
            <label class="clr-control-label">{{ 'settings.shipping-eligibility-checker' | translate }}</label>
            <vdr-configurable-input
                *ngIf="selectedChecker && selectedCheckerDefinition"
                [operation]="selectedChecker"
                [operationDefinition]="selectedCheckerDefinition"
                [readonly]="!(updatePermission | hasPermission)"
                (remove)="selectedChecker = null"
                formControlName="checker"
            ></vdr-configurable-input>
            <div *ngIf="!selectedChecker || !selectedCheckerDefinition">
                <vdr-dropdown>
                    <button class="btn btn-outline" vdrDropdownTrigger>
                        <clr-icon shape="plus"></clr-icon>
                        {{ 'common.select' | translate }}
                    </button>
                    <vdr-dropdown-menu vdrPosition="bottom-left">
                        <button
                            *ngFor="let checker of checkers"
                            type="button"
                            vdrDropdownItem
                            (click)="selectChecker(checker)"
                        >
                            {{ checker.description }}
                        </button>
                    </vdr-dropdown-menu>
                </vdr-dropdown>
            </div>
        </div>
        <div class="clr-col">
            <label class="clr-control-label">{{ 'settings.shipping-calculator' | translate }}</label>
            <vdr-configurable-input
                *ngIf="selectedCalculator && selectedCalculatorDefinition"
                [operation]="selectedCalculator"
                [operationDefinition]="selectedCalculatorDefinition"
                [readonly]="!(updatePermission | hasPermission)"
                (remove)="selectedCalculator = null"
                formControlName="calculator"
            ></vdr-configurable-input>
            <div *ngIf="!selectedCalculator || !selectedCalculatorDefinition">
                <vdr-dropdown>
                    <button class="btn btn-outline" vdrDropdownTrigger>
                        <clr-icon shape="plus"></clr-icon>
                        {{ 'common.select' | translate }}
                    </button>
                    <vdr-dropdown-menu vdrPosition="bottom-left">
                        <button
                            *ngFor="let calculator of calculators"
                            type="button"
                            vdrDropdownItem
                            (click)="selectCalculator(calculator)"
                        >
                            {{ calculator.description }}
                        </button>
                    </vdr-dropdown-menu>
                </vdr-dropdown>
            </div>
        </div>
    </div>
</form>
<div class="testing-tool">
    <clr-accordion>
        <clr-accordion-panel>
            <clr-accordion-title>{{ 'settings.test-shipping-method' | translate }}</clr-accordion-title>
            <clr-accordion-content *clrIfExpanded>
                <div class="clr-row">
                    <div class="clr-col">
                        <vdr-test-order-builder
                            (orderLinesChange)="setTestOrderLines($event)"
                        ></vdr-test-order-builder>
                    </div>
                    <div class="clr-col">
                        <vdr-test-address-form
                            (addressChange)="setTestAddress($event)"
                        ></vdr-test-address-form>
                        <vdr-shipping-method-test-result
                            [currencyCode]="(activeChannel$ | async)?.currencyCode"
                            [okToRun]="allTestDataPresent() && testDataUpdated && detailForm.valid"
                            [testDataUpdated]="testDataUpdated"
                            [testResult]="testResult$ | async"
                            (runTest)="runTest()"
                        ></vdr-shipping-method-test-result>
                    </div>
                </div>
            </clr-accordion-content>
        </clr-accordion-panel>
    </clr-accordion>
</div>
