{{!--

  ## Usage
  {{#let (or @build.pushedArtifact @build) as |operation|}}
    <OperationStatusIndicator
      @operation={{build.status}}
    />
  {{/let}}

  If you would like the indicator to match the surrounding typography,
  pass `@matchTypography={{true}}`:

  <OperationStatusIndicator
    @operation={{build}}
    @matchTypography={{true}}
  />

  If you want the icon + tooltip for the time information,
  pass `@isDetailed={{true}}`:

  <OperationStatusIndicator
    @operation={{build}}
    @isDetailed={{true}}
  />

--}}
<div class="operation-status-indicator">
  <span class="icon-text-group hide-in-percy">
    <FlightIcon
      data-test-icon-type={{icon-for-component @operation.component.name}}
      @name={{icon-for-component @operation.component.name}}
      @size="16"
    />
    <span>
      {{yield to="status-text"}}
      <b>{{component-name @operation.component.name}}</b>
    </span>
  </span>

  {{!-- Original OperationStatusIndicator, build time, status, and tooltip  --}}
  {{#if @operation.status}}
    {{#let
      (hash
        state=(or
          (and (eq @operation.status.state 0) "unknown")
          (and (eq @operation.status.state 1) "running")
          (and (eq @operation.status.state 2) "success")
          (and (eq @operation.status.state 3) "error")
        )
        message=(or
          @operation.status.error.message
          @operation.status.details
        )
      )
      as |vars|
    }}
      <span
        data-test-operation-status-indicator={{vars.state}}
        class="
          timestamp
          timestamp--{{vars.state}}
          {{if @matchTypography "timestamp--match-typography"}}
          {{if @isDetailed "focus-ring"}}
        "
        tabindex="0"
      >
        {{#if @isDetailed}}
          <FlightIcon
            data-test-time-icon
            @name={{or
              (and (eq vars.state "unknown") "help")
              (and (eq vars.state "running") "clock")
              (and (eq vars.state "success") "check")
              (and (eq vars.state "error") "alert-triangle")
            }}
            @size="16"
          />
        {{/if}}

        <span class="timestamp__label">
          {{#if (eq vars.state "running")}}
            {{date-format-distance-to-now @operation.status.startTime.seconds}}
          {{else}}
            {{date-format-distance-to-now @operation.status.completeTime.seconds}}
          {{/if}}
        </span>

        {{#if (and vars.message @isDetailed)}}
          <EmberTooltip
            data-test-tooltip
            @popperOptions={{hash
              modifiers=(hash
                preventOverflow=(hash
                  escapeWithReference=false
                  boundariesElement="viewport"
                )
              )
            }}
          >
            {{vars.message}}
          </EmberTooltip>
        {{/if}}
      </span>
      {{yield to="small-text"}}
      {{yield to="badge"}}
    {{/let}}
  {{/if}}
</div>
