@if(saveResult$ | async){}
@if(marketTypes$ | async){}
@if(commodities$ | async){}
@if(indexes$ | async){}

<global-bar></global-bar>

<div class="flex flex-col flex-grow overflow-hidden h-full">
  <form class="flex flex-col flex-grow" [formGroup]="formSelections">
    <fast-header [title]="title$ | async">
      <div class="flex flex-grow-0 items-center justify-start mt-px mr-0 mb-0.5 ml-2.5">
        <fast-label>Price Date: From&nbsp;</fast-label>
        <fast-datepicker formControlName="fromDate" class="min-w-30 w-30" (valueChange)="fromDateChange($event)" />
      </div>
      <div class="flex flex-grow items-center justify-start basis-3/10 mt-px mx-2.5 mb-0.5">
        <fast-label>To&nbsp;</fast-label>
        <fast-datepicker formControlName="toDate" class="min-w-30 w-30" (valueChange)="toDateChange($event)" />
      </div>
      <div class="flex flex-grow-0 items-center justify-end mt-px mr-2.5 mb-0.5 ml-0">
        <fast-upload #importTarget [hidden]="importing" [chunkable]="{size: 10485760 }" [saveUrl]="importUrl"
          [saveField]="'file'" [autoUpload]="true" [multiple]="false" [restrictions]="importRestrictions"
          (upload)="importStarted()" (success)="importCompleted($event)" (errorEvent)="importError($event)"
          (complete)="importComplete()" (selectEvent)="importSelect($event)" [showFileList]="false"
          [showDropZone]="false">
        </fast-upload>
        <fast-button [hidden]="!importing" [disabled]="true" [tabindex]="-1">Importing...<span
            class="k-icon k-i-loading"></span></fast-button>
      </div>
      <div class="flex flex-grow-0 items-center justify-end mt-px mr-2.5 mb-0.5 ml-0">
        <fast-button type="export" [exporting]="exporting" (click)="export()" [tabindex]="-1"></fast-button>
      </div>
    </fast-header>
    <div class="flex flex-row max-w-175">
      <div class="flex flex-col flex-grow items-stretch jusitfy-center basis-3/10 mx-2.5 mt-0.5 mb-2">
        <fast-label>Market Type</fast-label>
        <fast-combobox formControlName="marketType" [data]="marketTypes$ | async" [textField]="'name'"
          [valueField]="'id'" (valueChange)="marketTypeChange($event)" [valuePrimitive]="false">
        </fast-combobox>
      </div>
      <div class="flex flex-col flex-grow items-stretch jusitfy-center basis-3/10 mx-2.5 mt-0.5 mb-2">
        <fast-label>Commodity</fast-label>
        <fast-combobox formControlName="commodity" [data]="commodities$ | async" [textField]="'name'"
          [valueField]="'id'" (valueChange)="commodityChange($event)" [valuePrimitive]="false"></fast-combobox>
      </div>
    </div>
    <div class="flex flex-row !mt-2.5 max-w-175">
      <div class="flex flex-col flex-grow items-stretch jusitfy-center basis-3/10 mx-2.5 mt-0.5 mb-2">
        <fast-label>Indexes</fast-label>
        <fast-multiselect formControlName="indexes" [data]="indexes$ | async" [textField]="'name'"
          [valuePrimitive]="false" [valueField]="'fakeId'" [placeholder]="'Select an Index'"
          (valueChange)="indexesChange($event)" (filterChange)="indexesFilter($event)"></fast-multiselect>
      </div>
    </div>
    @if((requiredData$ | async) === null){<fast-spinner />}
    <fast-hr />
    <div class="flex flex-col flex-grow overflow-auto h-full">
      <div class="flex flex-col flex-grow items-stretch content-start basis-3/10 !mt-2.5 overflow-auto">
        <div class="flex flex-row flex-grow basis-100 overflow-auto">
          @for (res of marketPriceResults$ | async; track res.indexId){
          <div class="flex flex-col min-w-97.5 max-w-97.5">
            <fast-grid class="h-full px-2" [data]="res" [pageSize]="res.state.take"
              [pageable]="{responsive:false, buttonCount: 2}" [skip]="res.state.skip" [sort]="res.state.sort"
              [sortable]="{mode: 'multiple'}" [filter]="res.state.filter" filterable="menu" [loading]="res.loading"
              (dataStateChange)="dataStateChange($event, res)">
              <fast-grid-tooblar>
                <div class="flex flex-nowrap flex-grow max-w-full">
                  <!-- must be block display for ellipsis -->
                  <div class="block m-auto text-center truncate">
                    {{res.indexSynonym}}
                  </div>
                  <div class="flex whitespace-nowrap mr-2.5">
                    <fast-button class="w-7" (click)="editIndex(res)" title="edit prices">
                      <kendo-svg-icon class="fileIconMouseOver icon-extension"
                        [icon]="icons.pencilIcon"></kendo-svg-icon>
                    </fast-button>
                  </div>
                </div>
              </fast-grid-tooblar>
              <fast-grid-col [type]="res.marketTypeId === 3 ? 'date-month' : 'date-short'" field="priceDate"
                [title]="res.marketTypeId === 3 ? 'Price Month' : 'Price Date'" [width]="120" />
              @if(res.marketTypeId === 1 || res.marketTypeId === 2) {
              <fast-grid-col type="date-month" field="contractMonth" title="Contract Month" [width]="150" />
              }
              @if(res.marketTypeId === 3) {
              <fast-grid-col type="date-short" field="publishDate" title="Publish Date" [width]="150" />
              }
              <fast-grid-col type="num-c5" field="price" title="Price" filter="numeric" [width]="100" />
            </fast-grid>
          </div>
          }
        </div>
      </div>
    </div>
  </form>
</div>

@if(opened){
<fast-window class="top-0" [height]="0 | winHeight" (close)="opened=false" [width]="500 | winWidth" [minWidth]="400"
  [minHeight]="150" [title]="editResult.indexSynonym">
  @if(editorLoading){<fast-spinner />}
  <form [formGroup]="formEditor" class="flex flex-col flex-grow overflow-auto">
    <div class="flex flex-col flex-grow overflow-auto">
      <div class="flex flex-col flex-grow overflow-hidden">
        <div class="flex flex-col flex-grow-0 basis-0">
          <div class="flex flex-row">
            <div class="flex flex-col flex-grow-0">
              @if(formEditorItems.controls.length >= 2) {
              <fast-label class="text-xs ml-2">
                *right-click a cell for more options
              </fast-label>}
            </div>
          </div>
          <div class="flex flex-row mr-5">
            <div class="flex flex-col flex-grow items-center justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
              <fast-label>{{editResult.marketTypeId === 3 ? 'Price Month' : 'Price Date'}}</fast-label>
            </div>
            @if(editResult.marketTypeId === 1 || editResult.marketTypeId === 2){
            <div class="flex flex-col flex-grow items-center justify-center basis-3/10 mt-0.5 mx-2.5 mb-0">
              <fast-label>Contract Month</fast-label>
            </div>
            }
            @if(editResult.marketTypeId === 3){
            <div class="flex flex-col flex-grow items-center justify-center basis-3/10 mt-0.5 mx-2.5 mb-0">
              <fast-label>Publish Date</fast-label>
            </div>
            }
            <div class="flex flex-col flex-grow items-center justify-center basis-3/10 mt-0.5 mx-2.5 mb-0">
              <fast-label>Price</fast-label>
            </div>
          </div>
        </div>
        <fast-hr />
        <div class="flex flex-col flex-grow items-stretch content-start basis-3/10 overflow-y-scroll"
          formArrayName="items">
          <div class="flex flex-row !mt-2.5">
            @if(formEditorItems.controls.length === 0) {
            <div class="flex flex-col flex-grow items-center justify-center basis-3/10 mx-2.5 mb-0 !mt-2.5">
              No records available.
            </div>
            }
          </div>
          @for (item of formEditorItems.controls; let i = $index; track $index) {
          <div class="flex flex-row priceEditSection" formGroupName="{{i}}">
            <div class="flex flex-col flex-grow items-stretch jusitfy-center basis-3/10 mx-2.5 mt-0.5 mb-0"
              #priceDateTarget>
              <fast-datepicker [tabindex]="-1" formControlName="priceDate"
                [type]="editResult.marketTypeId === 3 ? 'date-month' : 'date-short'" />
              <fast-contextmenu [target]="priceDateTarget" [items]="contextMenuCopyAndFillItems"
                (select)="onContextMenuSelect($event, 'priceDate', i)"></fast-contextmenu>
            </div>
            @if(editResult.marketTypeId === 1 || editResult.marketTypeId === 2){
            <div class="flex flex-col flex-grow items-stretch jusitfy-center basis-3/10 mx-2.5 mt-0.5 mb-0"
              #contractMonthTarget>
              <fast-datepicker type="date-month" [tabindex]="-1" formControlName="contractMonth" />
              <fast-contextmenu [target]="contractMonthTarget" [items]="contextMenuCopyAndFillItems"
                (select)="onContextMenuSelect($event, 'contractMonth', i)"></fast-contextmenu>
            </div>
            }
            @if(editResult.marketTypeId === 3){
            <div class="flex flex-col flex-grow items-stretch jusitfy-center basis-3/10 mx-2.5 mt-0.5 mb-0"
              #publishDateTarget>
              <fast-datepicker [tabindex]="-1" formControlName="publishDate" />
              <fast-contextmenu [target]="publishDateTarget" [items]="contextMenuCopyAndFillItems"
                (select)="onContextMenuSelect($event, 'publishDate', i)"></fast-contextmenu>
            </div>
            }
            <div class="flex flex-col flex-grow items-stretch jusitfy-center basis-3/10 mx-2.5 mt-0.5 mb-0"
              #priceTarget>
              <fast-numerictextbox formControlName="price" format="c5" [decimals]="5" [spinners]="false" [step]="0" />
              <fast-contextmenu [target]="priceTarget" [items]="contextMenuCopyItems"
                (select)="onContextMenuSelect($event, 'price', i)"></fast-contextmenu>
            </div>
          </div>
          }
        </div>
      </div>
    </div>
    <fast-hr />
    <div class="flex flex-row !mt-2.5">
      <div class="flex flex-col flex-grow-0 items-stretch justify-end mt-0.5 mr-0 mb-2 ml-2.5">
        <fast-numerictextbox class="w-15" [tabindex]="-1" formControlName="numRowsToAdd" format="n0" [step]="1"
          [autoCorrect]="true" [min]="1" [max]="50" />
      </div>
      <div class="flex flex-col flex-grow-0 items-stretch justify-end mt-0.5 mr-0 mb-2 ml-2.5">
        <fast-button [disabled]="editorLoading" (click)="addRows()"><kendo-svg-icon
            class="fileIconMouseOver icon-extension" [icon]="icons.plusIcon"></kendo-svg-icon>Add
          {{formEditor.value.numRowsToAdd}}
          {{formEditor.value.numRowsToAdd > 1 ? 'rows' : 'row'}}</fast-button>
      </div>
      <div class="flex flex-col flex-grow items-stretch jusitfy-center basis-3/10 mx-2.5 mt-0.5 mb-2"></div>
      <div class="flex flex-col flex-grow-0 items-stretch justify-end mt-0.5 mr-2.5 mb-2 ml-0">
        <fast-button type="primary" [disabled]="editorLoading" (click)="save()"><kendo-svg-icon
            class="fileIconMouseOver icon-extension" [icon]="icons.saveIcon"></kendo-svg-icon>Save</fast-button>
      </div>
      <div class="flex flex-col flex-grow-0 items-stretch justify-end mt-0.5 mr-2.5 mb-2 ml-0">
        <fast-button [disabled]="editorLoading" (click)="opened=false"><kendo-svg-icon
            class="fileIconMouseOver icon-extension" [icon]="icons.cancelIcon"></kendo-svg-icon>Cancel</fast-button>
      </div>
    </div>
  </form>
</fast-window>
}