import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"

component ButtonGroup {
  outputs {
    click(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    select(payload: { value: string | number | boolean | null | object; previousValue: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number })
    change(payload: { value: string | number | boolean | null | object; previousValue: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number })
  }

  props {
items: unknown[] = []
    value: string = ""
    size: string = "md"
    color: string = "primary"
    variant: string = "default"
    orientation: string = "horizontal"
    responsive: boolean = false
    attached: boolean = true
    selectable: boolean = false
    toolbar: boolean = false
    disabled: boolean = false
    ariaLabel: string = "Button group"
    class: string = ""
  }

  state selectedValue = value

  functions {
    shared function itemValue(item, index) {
      return item.value || item.label || String(index)
    }

    client function selectItem(item, index) {
      previousValue = selectedValue
      nextValue = itemValue(item, index)

      output.select({
        value: nextValue,
        previousValue: previousValue,
        item: item,
        index: index
      })

      if (selectable && previousValue !== nextValue) {
        selectedValue = nextValue
        output.change({
          value: nextValue,
          previousValue: previousValue,
          item: item,
          index: index
        })
      }
    }
  }

  view {
    <div
      {...attrs}
      class="wire-component wire-next--button-group {class}"
      role="{toolbar ? 'toolbar' : 'group'}"
      aria-label="{ariaLabel}"
      aria-orientation="{orientation}"
      data-size="{size}"
      data-color="{color}"
      data-variant="{variant}"
      data-orientation="{orientation}"
      data-responsive="{responsive}"
      data-attached="{attached}"
      data-selectable="{selectable}"
      data-disabled="{disabled}"
    >
      {#if items}
        {#each items as item, index}
          <button
            type="{item.type || 'button'}"
            class="wire-btn wire-btn--variant-{item.variant || variant} wire-btn--color-{item.color || color} wire-btn--size-{item.size || size}"
            disabled="{disabled || item.disabled}"
            aria-label="{item.ariaLabel || item.label}"
            aria-pressed="{selectable ? (selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false') : ''}"
            data-value="{item.value || item.label || String(index)}"
            data-selected="{selectable && selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false'}"
            @click="selectItem(item, index)"
          >
            {#if item.icon}
              <span class="wire-btn__icon {item.icon}" aria-hidden="true"></span>
            {/if}
            <span class="wire-btn__label">{item.label}</span>
          </button>
        {/each}
      {/if}
      <slot />
    </div>
    <ComponentBaseStyles hidden />
  }

  style {
    .wire-next--button-group {
      display: inline-flex;
      align-items: stretch;
      width: fit-content;
      max-width: 100%;
      isolation: isolate;
    }

    .wire-next--button-group[data-orientation="vertical"] {
      flex-direction: column;
    }

    .wire-next--button-group[data-attached="false"] {
      gap: 0.5rem;
    }

    .wire-next--button-group[data-disabled="true"] {
      cursor: not-allowed;
      opacity: 0.6;
    }

    .wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) {
      position: relative;
      margin: 0;
    }
    .wire-next--button-group[data-attached="true"] > .wire-action {
      display: flex;
    }
    .wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) :is(.wire-btn) {
      height: 100%;
    }
    .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
      > :is(.wire-btn, .wire-action):not(:first-child) {
      margin-inline-start: -1px;
    }
    .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
      > .wire-btn:not(:first-child):not(:last-child),
    .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
      > .wire-action:not(:first-child):not(:last-child)
      > .wire-btn {
      border-radius: 0;
    }
    .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
      > .wire-btn:first-child:not(:last-child),
    .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
      > .wire-action:first-child:not(:last-child)
      > .wire-btn {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
    .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
      > .wire-btn:last-child:not(:first-child),
    .wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
      > .wire-action:last-child:not(:first-child)
      > .wire-btn {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
    .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
      > :is(.wire-btn, .wire-action):not(:first-child) {
      margin-top: -1px;
    }
    .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
      > .wire-btn:not(:first-child):not(:last-child),
    .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
      > .wire-action:not(:first-child):not(:last-child)
      > .wire-btn {
      border-radius: 0;
    }
    .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
      > .wire-btn:first-child:not(:last-child),
    .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
      > .wire-action:first-child:not(:last-child)
      > .wire-btn {
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
    .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
      > .wire-btn:last-child:not(:first-child),
    .wire-next--button-group[data-attached="true"][data-orientation="vertical"]
      > .wire-action:last-child:not(:first-child)
      > .wire-btn {
      border-start-start-radius: 0;
      border-start-end-radius: 0;
    }
    .wire-next--button-group > :is(.wire-btn, .wire-action):focus-within,
    .wire-next--button-group > .wire-btn:focus-visible {
      z-index: 2;
    }
    .wire-next--button-group[data-selectable="true"] > .wire-btn[data-selected="true"] {
      z-index: 1;
      border-color: var(--wire-component-color);
      background: color-mix(in srgb, var(--wire-component-color) 16%, var(--wire-color-surface));
      color: var(--wire-component-color);
    }
    @media (max-width: 480px) {
      .wire-next--button-group[data-responsive="true"] > :is(.wire-btn, .wire-action) {
        display: flex;
        width: 100%;
        flex-direction: column;
      }

      .wire-next--button-group[data-responsive="true"] > .wire-action > .wire-btn {
        width: 100%;
      }

      .wire-next--button-group[data-responsive="true"][data-attached="true"]
        > :is(.wire-btn, .wire-action) {
        margin-top: -1px;
        margin-inline-start: 0;
      }

      .wire-next--button-group[data-responsive="true"][data-attached="true"]
        > :is(.wire-btn, .wire-action):first-child {
        margin-top: 0;
      }

      .wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn,
      .wire-next--button-group[data-responsive="true"][data-attached="true"]
        > .wire-action
        > .wire-btn {
        border-radius: 0;
      }

      .wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn:first-child,
      .wire-next--button-group[data-responsive="true"][data-attached="true"]
        > .wire-action:first-child
        > .wire-btn {
        border-start-start-radius: var(--wire-radius-sm);
        border-start-end-radius: var(--wire-radius-sm);
      }

      .wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn:last-child,
      .wire-next--button-group[data-responsive="true"][data-attached="true"]
        > .wire-action:last-child
        > .wire-btn {
        border-end-start-radius: var(--wire-radius-sm);
        border-end-end-radius: var(--wire-radius-sm);
      }
    }

  }
}