import React from 'react'
import {storiesOf, action, linkTo} from '@kadira/storybook'

import {spyActions} from './shared'

// Stubs
import kapacitor from './stubs/kapacitor'
import source from './stubs/source'
import rule from './stubs/rule'
import query from './stubs/query'
import queryConfigs from './stubs/queryConfigs'

// Actions for Spies
import * as kapacitorActions from 'src/kapacitor/actions/view'
import * as queryActions from 'src/data_explorer/actions/view'

// Components
import KapacitorRule from 'src/kapacitor/components/KapacitorRule'
import ValuesSection from 'src/kapacitor/components/ValuesSection'

const valuesSection = (trigger, values) =>
  <div className="rule-builder">
    <ValuesSection
      rule={rule({
        trigger,
        values,
      })}
      query={query()}
      onChooseTrigger={action('chooseTrigger')}
      onUpdateValues={action('updateRuleValues')}
    />
  </div>

storiesOf('ValuesSection', module)
  .add('Threshold', () =>
    valuesSection('threshold', {
      operator: 'less than',
      rangeOperator: 'greater than',
      value: '10',
      rangeValue: '20',
    })
  )
  .add('Threshold inside Range', () =>
    valuesSection('threshold', {
      operator: 'inside range',
      rangeOperator: 'greater than',
      value: '10',
      rangeValue: '20',
    })
  )
  // .add('Threshold outside of Range', () => (
  //   valuesSection('threshold', {
  //     "operator": "otuside of range",
  //     "rangeOperator": "less than",
  //     "value": "10",
  //     "rangeValue": "20",
  //   })
  // ))
  .add('Relative', () =>
    valuesSection('relative', {
      change: 'change',
      operator: 'greater than',
      shift: '1m',
      value: '10',
    })
  )
  .add('Deadman', () =>
    valuesSection('deadman', {
      period: '10m',
    })
  )

storiesOf('KapacitorRule', module).add('Threshold', () =>
  <div className="chronograf-root">
    <KapacitorRule
      source={source()}
      rule={rule({
        trigger: 'threshold',
      })}
      query={query()}
      queryConfigs={queryConfigs()}
      kapacitor={kapacitor()}
      queryActions={spyActions(queryActions)}
      kapacitorActions={spyActions(kapacitorActions)}
      addFlashMessage={action('addFlashMessage')}
      enabledAlerts={['slack']}
      isEditing={true}
      router={{
        push: action('route'),
      }}
    />
  </div>
)