Rev.pullInto(this) 'Lipsum', 'TabBlock', 'TabsAccordion', 'Button', 'Panel'
Rev.pullInto(this) 'StatelessTabs', 'Tabs', 'StatelessTabContent'

Rev.registerExample 'Tabs & Such',
  getInitialState: ->
    state =
      contentActiveKey: 'one'

  onTabChange: (e) ->
    alert "Changing active tab to key `#{e.activeTab.key}`"

  render: ->
    <div>
      <h3>{"<StatelessTabs>"}</h3>
      <p>
        StatelessTabs takes its marching orders about what content to show from props.
        This particular instance will default to the second tab.
        On tab click, it will show an alert but not switch content.
      </p>
      <StatelessTabs activeKey="two" onChange={(e) -> alert "I refuse to change!"}>
        <TabBlock key="one" tab={<a href="#">One</a>}>
          <Lipsum />
        </TabBlock>
        <TabBlock key="two" tab={<a href="#">Two</a>}>
          <Lipsum p=2 />
        </TabBlock>
      </StatelessTabs>
      <h3>{"<StatelessTabsContent>"}</h3>
      <p>
        StatelessTabsContent shows only the <em>content</em> from a tab area,
        not the tabs themselves. It is useful for implementing components which
        behave like tabbed areas, but do not have automatically associated tabs.
      </p>
      <Panel>
        <StatelessTabContent activeKey={this.state.contentActiveKey}>
          <TabBlock key="one" tab={<a href="#">One</a>}>
            <Lipsum />
          </TabBlock>
          <TabBlock key="two" tab={<a href="#">Two</a>}>
            <Lipsum p=2 />
          </TabBlock>
        </StatelessTabContent>
        <div>
          These buttons actually control the content area.
          <Button onClick={=> this.setState contentActiveKey: 'one'}>One</Button>
          <Button onClick={=> this.setState contentActiveKey: 'two'}>Two</Button>
        </div>
      </Panel>
      <h3>{"<Tabs>"}</h3>
      <Tabs onChange={@onTabChange}>
        <TabBlock key="one" tab={<a href="#">One</a>}>
          <Lipsum />
        </TabBlock>
        <TabBlock key="two" tab={<a href="#">Two</a>}>
          <Lipsum p=2 />
        </TabBlock>
        <TabBlock key="three" tab={<a href="#">Three</a>}>
          <Lipsum p=3 />
        </TabBlock>
      </Tabs>
      <Tabs vertical activeKey="two">
        <TabBlock key="one" tab={<a href="#">One</a>}>
          <Lipsum />
        </TabBlock>
        <TabBlock key="two" tab={<a href="#">Two</a>}>
          <Lipsum p=2 />
        </TabBlock>
        <TabBlock key="three" tab={<a href="#">Three</a>}>
          <Lipsum p=3 />
        </TabBlock>
      </Tabs>
      <h3>{"<TabsAccordion>"}</h3>
      <TabsAccordion onChange={@onTabChange}>
        <TabBlock key="one" tab={<a href="#">One</a>}>
          <Lipsum />
        </TabBlock>
        <TabBlock key="two" tab={<a href="#">Two</a>}>
          <Lipsum p=2 />
        </TabBlock>
        <TabBlock key="three" tab={<a href="#">Three</a>}>
          <Lipsum p=3 />
        </TabBlock>
      </TabsAccordion>
    </div>