<h1 class="te-title">Import Metrics: Presto or MySQL</h1>

<div class="te-page__right">
  {{#link-to "self-serve.create-alert" class="thirdeye-link thirdeye-link-secondary"}}Back to Create{{/link-to}}
</div>
<main class="alert-onboard card-container card-container--padded">

  <fieldset class="te-form__section">
    <legend class="te-form__section-title">New Presto or MySQL Dataset</legend>
    <div class="form-group">
      <label for="select-database" class="control-label">Database Name</label>
      {{#power-select
        options=databaseOptions
        selected=selectedDatabase
        onchange=(action (mut selectedDatabase))
        placeholder="Select a Database"
        searchPlaceholder="Type to filter..."
        triggerId="select-database"
        triggerClass="te-form__spacer"
        disabled=false
      as |database|
      }}
        {{database}}
      {{/power-select}}
    </div>
    <div class="form-group">
      <label for="table-name" class="control-label">Table Name</label>
      {{input
        type="text"
        id="table-name"
        class="form-control"
        placeholder="Type new table name... Eg. u_metrics.scin_v2_union"
        value=tableName
      }}
    </div>

    <div class="form-group">
      <label for="time-column" class="control-label">Time Column</label>
      {{input
        type="text"
        id="time-column"
        class="form-control"
        placeholder="Type the Time Column name..."
        value=timeColumn
      }}
    </div>

    <div class="form-group">
      <label for="select-timezone" class="control-label">Timezone</label>
      {{#power-select
        options=timezoneOptions
        selected=selectedTimezone
        onchange=(action (mut selectedTimezone))
        placeholder="Select a Timezone"
        searchPlaceholder="Type to filter..."
        triggerId="select-timezone"
        triggerClass="te-form__spacer"
        disabled=false
      as |timezone|
      }}
        {{timezone}}
      {{/power-select}}
    </div>

    <div class="form-group">
      <label for="select-time-format" class="control-label">Time Format</label>
      {{#power-select
        options=timeFormatOptions
        selected=selectedTimeFormat
        onchange=(action (mut selectedTimeFormat))
        placeholder="Select a Time Format"
        searchPlaceholder="Type to filter..."
        triggerId="select-time-format"
        triggerClass="te-form__spacer"
        disabled=false
      as |timeFormat|
      }}
        {{timeFormat}}
      {{/power-select}}
    </div>

    
    <div class="form-group">
      <label for="time-granularity" class="control-label">Time Granularity</label> <br>
      Note: If you chosed EPOCH time format, the Time Granularity means your Time Format is (x since epoch), replace x with your selection. In most case you choose 1MILLISECONDS.
      {{#power-select
        options=timeGranularityOptions
        selected=selectedTimeGranularity
        onchange=(action (mut selectedTimeGranularity))
        placeholder="Select a Time Granularity"
        searchPlaceholder="Type to filter..."
        triggerId="select-time-granularity"
        triggerClass="te-form__spacer"
        disabled=false
      as |timeGranularity|
      }}
        {{timeGranularity}}
      {{/power-select}}
    </div>



    {{#each this.dimensions as |dimension index|}}
      <div class="form-group">
        <label class="control-label">Dimension {{index}}</label>
        {{input
          type="text"
          class="form-control"
          placeholder="Dimension"
          value=dimension.name
        }}
      </div>
    {{/each}}

    {{bs-button
      defaultText="Add Dimension"
      type="primary"
      onClick=(action "addDimension")
    }}

    <br>
    <br>

    {{#each this.metrics as |metric index|}}
      <div class="form-group">
        <label class="control-label">Metrics {{index}}</label>
        {{input
          type="text"
          class="form-control"
          placeholder="Metric"
          value=metric.name
        }}
      <label class="control-label">Aggregation Method</label>
      {{#power-select
        options=aggregationOptions
        selected=metric.aggregationMethod
        onchange=(action (mut metric.aggregationMethod))
        placeholder="Select a Time Granularity"
        searchPlaceholder="Type to filter..."
        triggerClass="te-form__spacer"
        disabled=false
      as |aggregationMethod|
      }}
        {{aggregationMethod}}
      {{/power-select}}
      </div>
    {{/each}}
    {{bs-button
      defaultText="Add Metric"
      type="primary"
      onClick=(action "addMetric")
    }}
  </fieldset>

  <section class="te-form__section-submit">
    {{bs-button
      defaultText="Import Metrics"
      type="primary"
      buttonType="submit"
      onClick=(action "onSubmit")
      disabled=isSubmitDisabled
      class="te-button te-button--submit"
    }}
  </section>
  {{response}}
</main>
