<pa-demo-page>
  <pa-demo-title>Dropdown button</pa-demo-title>
  <pa-demo-description>
    <p>
      Sistema provides a standalone dropdown button component, which is wrapping a regular
      <code>pa-button</code>
      holding a
      <code>paPopup</code>
      (usually a dropdown) reference. A chevron up or down is displayed on the right of the button depending on the
      state of the dropdown (open or closed).
    </p>
  </pa-demo-description>

  <pa-demo-examples>
    <div class="dropdown-container">
      <div>
        <span>Default:</span>
        <nsi-dropdown-button
          [popupRef]="pageSizeMenu1"
          [open]="dropdown1Open"
          [disabled]="disabled">
          {{ pageSize1.value }}
        </nsi-dropdown-button>
      </div>
      <div>
        <span>Basic:</span>
        <nsi-dropdown-button
          [popupRef]="pageSizeMenu2"
          [open]="dropdown2Open"
          aspect="basic"
          [disabled]="disabled">
          {{ pageSize2.value }}
        </nsi-dropdown-button>
      </div>
      <div>
        <span>Small:</span>
        <nsi-dropdown-button
          [popupRef]="pageSizeMenu3"
          [open]="dropdown3Open"
          aspect="basic"
          size="small"
          [disabled]="disabled">
          {{ pageSize3.value }}
        </nsi-dropdown-button>
      </div>
    </div>
    <div class="options">
      <pa-checkbox [(value)]="disabled">Disable</pa-checkbox>
    </div>

    <pa-dropdown
      #pageSizeMenu1
      (onClose)="dropdown1Open = false"
      (onOpen)="dropdown1Open = true">
      @for (option of options; track option) {
        <pa-option
          [value]="option.key"
          (selectOption)="setPageSize(option, 1)">
          {{ option.value }}
        </pa-option>
      }
    </pa-dropdown>

    <pa-dropdown
      #pageSizeMenu2
      (onClose)="dropdown2Open = false"
      (onOpen)="dropdown2Open = true">
      @for (option of options; track option) {
        <pa-option
          [value]="option.key"
          (selectOption)="setPageSize(option, 2)">
          {{ option.value }}
        </pa-option>
      }
    </pa-dropdown>

    <pa-dropdown
      #pageSizeMenu3
      (onClose)="dropdown3Open = false"
      (onOpen)="dropdown3Open = true">
      @for (option of options; track option) {
        <pa-option
          [value]="option.key"
          (selectOption)="setPageSize(option, 3)">
          {{ option.value }}
        </pa-option>
      }
    </pa-dropdown>
  </pa-demo-examples>

  <pa-demo-usage>
    <h3>Inputs</h3>
    <dl>
      <dt>aspect</dt>
      <dd>
        Button aspect:
        <code>solid</code>
        |
        <code>basic</code>
        .
        <small>(Default: solid)</small>
      </dd>

      <dt>disabled</dt>
      <dd>Set disable state.</dd>

      <dt>freeWidth</dt>
      <dd>
        When enabled, frees the width of the dropdown.
        <small>(default: false, meaning the dropdown has the same width as the button by default)</small>
      </dd>

      <dt>fullWidth</dt>
      <dd>
        Add
        <code>full-width</code>
        class to the button.
        <small>(default: false)</small>
      </dd>

      <dt>kind</dt>
      <dd>
        Button kind:
        <code>primary</code>
        |
        <code>secondary</code>
        |
        <code>inverted</code>
        |
        <code>destructive</code>
        .
        <small>(Default: secondary)</small>
      </dd>

      <dt>open</dt>
      <dd>
        Flag corresponding to the state of the dropdown. This input drives the chevron icon displayed.
        <small>(Default: false)</small>
      </dd>

      <dt>popupRef</dt>
      <dd>Dropdown component reference.</dd>

      <dt>size</dt>
      <dd>
        Button size:
        <code>small</code>
        |
        <code>medium</code>
        |
        <code>large</code>
        .
        <small>(Default: medium)</small>
      </dd>
    </dl>
  </pa-demo-usage>

  <pa-demo-code>
    <pre><code>{{code}}</code></pre>
  </pa-demo-code>
</pa-demo-page>
