import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Tab } from "../src/index";

function onChange(key) {
  console.log(key)
}

const tabs = [
  { tab: 'Home', key: 'home', content: 'This is home page' },
  { tab: 'Document', key: 'doc', content: 'This is document page' },
  { tab: 'API', key: 'api', content: 'This is api page' },
  { tab: 'Repo', key: 'repo', content: 'This ia repo link' }
]

const shapes = ['pure', 'wrapped', 'text', 'capsule']

storiesOf("Tab", module).add("Tab", () => {
  return (
    <div id='app-wrapper'>
      <div id='app'>
        <Tab>
          <Tab.Item title="Home" key="1">
            Home content
          </Tab.Item>
          <Tab.Item title="Documentation" key="2">
            Doc content
          </Tab.Item>
          <Tab.Item title="Help" key="3">
            Help Content
          </Tab.Item>
        </Tab>
        <p>形态</p>
        <div className="fusion-demo">
          {shapes.map((shape) => (
            <div key={shape} className="fusion-demo-item">
              <Tab shape={shape} onChange={onChange}>
                {tabs.map((tab) => (
                  <Tab.Item title={tab.tab} key={tab.key}>
                    {tab.content}
                  </Tab.Item>
                ))}
              </Tab>
            </div>
          ))}
        </div>
        <p>基本</p>
        <Tab shape='wrapped' onChange={onChange}>
          {tabs.map((tab) => (
            <Tab.Item title={tab.tab} key={tab.key}>
              {tab.content}
            </Tab.Item>
          ))}
        </Tab>
        <p>基本 蓝色描边</p>
        <Tab shape='wrapped' onChange={onChange} theme="blue">
          {tabs.map((tab) => (
            <Tab.Item title={tab.tab} key={tab.key}>
              {tab.content}
            </Tab.Item>
          ))}
        </Tab>
        <Tab shape='wrapped' onChange={onChange} theme="blue">
          {tabs.map((tab) => (
            <Tab.Item title={tab.tab} key={tab.key} disabled={tab.key==='api'}>
              {tab.content}
            </Tab.Item>
          ))}
        </Tab>
      </div>
    </div>
  );
});