import { boolean, radios, text, withKnobs } from '@storybook/addon-knobs'
import { storiesOf } from '@storybook/react-native'

import { FilterText } from '../../src/components/Filter'
import { HeaderNav } from '../../src/components/HeaderNav'
import { MarketSelectorButton } from '../../src/components/MarketSelectorButton'
import {
  mockNavigation,
  StorybookNavigationContainer,
} from '../utils/StorybookNavigationContainer'

storiesOf('HeaderNav', module)
  .addDecorator(withKnobs)
  .add('with no title', () => (
    <StorybookNavigationContainer
      screen={<HeaderNav navigation={mockNavigation} showToast={false} />}
    />
  ))
  .add('with title', () => (
    <StorybookNavigationContainer
      screen={
        <HeaderNav
          title="Star Girl"
          navigation={mockNavigation}
          showToast={false}
        />
      }
    />
  ))
  .add('with title and top', () => (
    <StorybookNavigationContainer
      screen={
        <HeaderNav
          title="Star Girl"
          top={<FilterText>last 4 weeks</FilterText>}
          navigation={mockNavigation}
          showToast={false}
        />
      }
    />
  ))
  .add('with back navigation', () => {
    return (
      <StorybookNavigationContainer
        screen={
          <HeaderNav
            title="Star Girl"
            top={<FilterText>last 4 weeks</FilterText>}
            navigation={mockNavigation}
            showToast={false}
          />
        }
        withSomeNavigationHistory
      />
    )
  })
  .add('with action in right slot', () => {
    return (
      <StorybookNavigationContainer
        screen={
          <HeaderNav
            title="Star Girl"
            top={<FilterText>last 4 weeks</FilterText>}
            navigation={mockNavigation}
            showToast={false}
            right={<MarketSelectorButton countryCode="se" onPress={() => {}} />}
          />
        }
        withSomeNavigationHistory
      />
    )
  })
  .add('without feedback', () => {
    return (
      <StorybookNavigationContainer
        screen={
          <HeaderNav
            title="Star Girl"
            top={<FilterText>last 4 weeks</FilterText>}
            navigation={mockNavigation}
            showToast={false}
            showFeedback={false}
            right={<MarketSelectorButton countryCode="se" onPress={() => {}} />}
          />
        }
        withSomeNavigationHistory
      />
    )
  })
  .add('playground', () => {
    const title = text('Title', 'Star Girl')
    const top = boolean('Top', true)
    const backArrow = boolean('Back arrow', true)
    const contextMenu = boolean('Context menu', true)
    const rightAction = boolean('Right action', true)
    const countryKnob = radios(
      'Market',
      {
        US: 'us',
        Sweden: 'se',
        Finland: 'fi',
      },
      'se'
    )

    return (
      <StorybookNavigationContainer
        screen={
          <HeaderNav
            title={title}
            top={top && <FilterText>last 4 weeks</FilterText>}
            navigation={mockNavigation}
            showToast={false}
            showFeedback={contextMenu}
            right={
              rightAction && (
                <MarketSelectorButton
                  countryCode={countryKnob}
                  onPress={() => {}}
                />
              )
            }
          />
        }
        withSomeNavigationHistory={backArrow}
      />
    )
  })