/* eslint-disable */
import * as React from 'react';
import { storiesOf } from '@storybook/react';

import {
  Avatar,
  Form,
  Tabs,
  Input,
  InputNumber,
  Tooltip,
  Icon,
  Cascader,
  Select,
  Row,
  Col,
  Checkbox,
  Button,
  Radio,
  Modal,
  Menu,
  Dropdown,
  Breadcrumb,
  Layout,
  List,
  TreeSelect,
  Alert,
  Table,
  notification,
} from 'antd';
import { withTheme, withStyles } from '../src/index';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const TabPane = Tabs.TabPane;

const residences = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

// Top-level app component
class App extends React.Component {
  render() {
    return this.props.children;
  }
}

/*
 * Created a themed high-order component of the top-level "App"-component using the "withTheme"-helper.
 * Any components below "App" in the the component-tree will have access to the theme through JSS and
 * the withStyles-helper as shown in the examples below.
 */
const ThemedApp = withTheme(App);

storiesOf('A themed app', module)
  .add('basic form', () => {
    /*
            The following is a basic example where the app has been wrapped with the "withTheme"-helper as supposed,
            and the theme is applied any antd-component below in the component-tree.
        */

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };

    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };

    const divStyle = {
      padding: '30px',
    };

    const ButtonsComponent = () => (
      <div>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="danger">Danger</Button>
      </div>
    );

    return (
      <ThemedApp>
        <div style={divStyle}>
          <Form onSubmit={this.handleSubmit}>
            <FormItem {...formItemLayout} label="E-mail" required>
              <Input size="large" />
            </FormItem>
            <FormItem {...formItemLayout} label="Password">
              <Input type="password" />
            </FormItem>
            <FormItem {...formItemLayout} label="Confirm Password">
              <Input type="password" onBlur={this.handleConfirmBlur} />
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={
                <span>
                  Nickname&nbsp;
                  <Tooltip title="What do you want others to call you?">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              }
            >
              <Input />
            </FormItem>
            <FormItem {...formItemLayout} label="Habitual Residence">
              <Cascader options={residences} />
            </FormItem>
            <FormItem {...formItemLayout} label="Error" validateStatus="error">
              <Input placeholder="Error" id="Error" />
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="Captcha"
              extra="We must make sure that your are a human."
            >
              <Row gutter={8}>
                <Col span={12}>
                  <Input />
                </Col>
                <Col span={12}>
                  <Button>Get captcha</Button>
                </Col>
              </Row>
            </FormItem>
            <FormItem {...tailFormItemLayout}>
              <RadioGroup>
                <Radio style={radioStyle} value={1}>
                  Option A
                </Radio>
                <Radio style={radioStyle} value={2}>
                  Option B
                </Radio>
                <Radio style={radioStyle} value={3}>
                  Option C
                </Radio>
              </RadioGroup>
            </FormItem>

            <FormItem {...tailFormItemLayout}>
              <Checkbox>
                I have read the <a href="">agreement</a>
              </Checkbox>
            </FormItem>
            <FormItem {...tailFormItemLayout}>
              <Button>Close</Button>
              <Button type="primary" htmlType="submit">
                Register
              </Button>
            </FormItem>
          </Form>
          <div>
            <Tabs defaultActiveKey="1">
              <TabPane tab="Tab 1" key="1">
                Content of Tab Pane 1
              </TabPane>
              <TabPane tab="Tab 2" key="2">
                Content of Tab Pane 2
              </TabPane>
              <TabPane tab="Tab 3" key="3">
                Content of Tab Pane 3
              </TabPane>
            </Tabs>
          </div>
        </div>
      </ThemedApp>
    );
  })
  .add('configurator form', () => {
    const divStyle = {
      width: '416px',
      margin: '24px',
    };

    const ButtonsComponent = () => (
      <div>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="danger">Danger</Button>
      </div>
    );

    return (
      <ThemedApp>
        <div style={divStyle}>
          <Form onSubmit={this.handleSubmit}>
            <fieldset>
              <legend>User Credentials</legend>
              <FormItem label="E-mail">
                <Input size="large" placeholder="test placeholder" />
              </FormItem>
              <FormItem label="Password">
                <Input type="password" size="large" />
              </FormItem>
              <FormItem label="Confirm Password">
                <Input
                  type="password"
                  onBlur={this.handleConfirmBlur}
                  size="large"
                />
              </FormItem>
            </fieldset>
            <fieldset>
              <legend>Lorem ipsum dolor sit amet</legend>
              <FormItem
                label={
                  <span>
                    Nickname&nbsp;
                    <Tooltip title="What do you want others to call you?">
                      <Icon type="question-circle-o" />
                    </Tooltip>
                  </span>
                }
              >
                <Input size="large" />
              </FormItem>
              <FormItem label="Habitual Residence">
                <Cascader options={residences} size="large" />
              </FormItem>
            </fieldset>

            <fieldset>
              <legend>Some Radio Buttons</legend>
              <FormItem label="Random Label">
                <RadioGroup>
                  <Radio value={1}>Option A</Radio>
                  <Radio value={2}>Option B</Radio>
                </RadioGroup>
              </FormItem>
            </fieldset>

            <fieldset>
              <legend>User Agreement</legend>
              <FormItem>
                <Checkbox>
                  I have read the <a href="">agreement</a>
                </Checkbox>
              </FormItem>
            </fieldset>

            <FormItem>
              <Button>Close</Button>
              <Button type="primary" htmlType="submit">
                Register
              </Button>
            </FormItem>
          </Form>
        </div>
      </ThemedApp>
    );
  })
  .add('custom style using the theme', () => {
    /*
            This is an example of using JSS to define custom styles (css-classes) to be used. We define a function
            "styles" which accepts a theme and returns a "style-object" with css-classes using JSS. By wrapping our component
            with the "withStyles"-helper, the resulting classes will be provided to the component as a prop as shown below.
        */

    const styles = (theme) => ({
      // Define the css-classes using JSS, provided is the theme properties as an object
      page: {
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: theme.backgroundColorBase,
      },
      top: {
        display: 'flex',
        justifyContent: 'center',
        padding: theme.paddingLg,
        color: theme.headingColor,
        backgroundColor: theme.layoutHeaderBackground,
      },
      container: {
        display: 'flex',
        height: '50vh',
      },
      nav: {
        display: 'flex',
        flex: 1,
        justifyContent: 'center',
        padding: theme.paddingLg,
        backgroundColor: theme.menuBg,
        color: theme.menuItemColor,
      },
      content: {
        display: 'flex',
        flex: 3,
        padding: theme.paddingLg,
      },
    });

    const LayoutComponent = ({ classes }) => (
      <div className={classes.page}>
        <div className={classes.top}>
          <h1>YOLO</h1>
        </div>
        <div className={classes.container}>
          <div className={classes.nav}>NAV</div>
          <div className={classes.content}>CONTENT</div>
        </div>
      </div>
    );

    const StyledLayoutComponent = withStyles(styles)(LayoutComponent); // We finally wrap the component using the "withStyles"-helper

    return (
      <ThemedApp>
        <StyledLayoutComponent />
      </ThemedApp>
    );
  })
  .add('form with number input and tag', () => {
    const divStyle = {
      width: '416px',
      margin: '24px',
    };

    const menu = (
      <Menu>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="#">
            1st menu item
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="#">
            2nd menu item
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="#">
            3rd menu item
          </a>
        </Menu.Item>
      </Menu>
    );

    return (
      <ThemedApp>
        <div style={divStyle}>
          <Form onSubmit={this.handleSubmit}>
            <fieldset>
              <legend>Pick your favourite number!</legend>
              <FormItem label="I love this number">
                <InputNumber min={0} defaultValue={0} />
              </FormItem>
              <FormItem>
                <Select mode="multiple" style={{ width: '100%' }}>
                  <Select.Option key="item1" value="item1">
                    item1
                  </Select.Option>
                  <Select.Option key="item2" value="item2">
                    item2
                  </Select.Option>
                  <Select.Option key="item3" value="item3">
                    item3
                  </Select.Option>
                  <Select.Option key="item4" value="item4">
                    item4
                  </Select.Option>
                </Select>
              </FormItem>
            </fieldset>
            <FormItem>
              <fieldset>
                <Dropdown overlay={menu}>
                  <a className="ant-dropdown-link" href="#">
                    Hover me <Icon type="down" />
                  </a>
                </Dropdown>
              </fieldset>
            </FormItem>
            <FormItem>
              <Button>Close</Button>
              <Button type="primary" htmlType="submit">
                Go!
              </Button>
            </FormItem>
          </Form>
        </div>
      </ThemedApp>
    );
  })
  .add('Confirm modal', () => {
    const getModal = () => {
      Modal.confirm({
        title: 'Edvan made this',
        content: 'Something funny 🍀',
        okText: 'Ok',
        cancelText: 'Cancel',
        onOk() {
          alert('Hello from Peter!');
        },
        onCancel() {},
      });
    };

    return (
      <ThemedApp>
        <div>{getModal()}</div>
      </ThemedApp>
    );
  })
  .add('Custom and regular notification', () => {
    const openCustomNotificationWithIcon = (type) => {
      notification[type]({
        className: 'customNotificationTitle',
        message: `(14px) CUSTOM ${type}! This is a cutom title to be used for special notifications on user actions`,
        duration: 100,
      });
    };

    const openNotificationWithIcon = (type) => {
      notification[type]({
        message: `(16 px) REGULAR ${type}!`,
        duration: 100,
        description:
          '(14px) Some description that will be displayed for API errors etc',
      });
    };

    return (
      <ThemedApp>
        <div style={{ margin: '20px' }}>
          <Button onClick={() => openCustomNotificationWithIcon('success')}>
            Custom Success
          </Button>
          <Button onClick={() => openCustomNotificationWithIcon('info')}>
            Custom Info
          </Button>
          <Button onClick={() => openCustomNotificationWithIcon('warning')}>
            Custom Warning
          </Button>
          <Button onClick={() => openCustomNotificationWithIcon('error')}>
            Custom Error
          </Button>
        </div>
        <div style={{ margin: '20px' }}>
          <Button onClick={() => openNotificationWithIcon('success')}>
            Regular Success
          </Button>
          <Button onClick={() => openNotificationWithIcon('info')}>
            Regular Info
          </Button>
          <Button onClick={() => openNotificationWithIcon('warning')}>
            Regular Warning
          </Button>
          <Button onClick={() => openNotificationWithIcon('error')}>
            Regular Error
          </Button>
        </div>
      </ThemedApp>
    );
  })
  .add('Tree select and alerts', () => {
    return (
      <ThemedApp>
        <TreeSelect
          style={{ width: '300px' }}
          value={undefined}
          treeData={[]}
          onChange={(value) => console.log(value)}
          onSearch={(value) => console.log(value)}
          placeholder="This should be italic"
          searchPlaceholder="Italic please"
          showSearch
          allowClear
        />
        <Alert message="success" type="success" showIcon />
        <Alert message="error" type="error" showIcon />
        <Alert message="warning" type="warning" showIcon />
        <Alert message="info" type="info" showIcon />
      </ThemedApp>
    );
  })
  .add('Table stuff', () => {
    const dataSource = [
      {
        key: '1',
        name: 'Mike',
        age: 32,
        address: '10 Downing Street',
      },
      {
        key: '2',
        name: 'John',
        age: 42,
        address: '10 Downing Street',
      },
    ];

    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      },
    ];
    return (
      <ThemedApp>
        <Table dataSource={dataSource} columns={columns} />;
      </ThemedApp>
    );
  })
  .add('Ant Design Layout', () => {
    const { SubMenu } = Menu;
    const { Header, Content, Sider } = Layout;

    return (
      <ThemedApp>
        <Layout>
          <Header className="header">
            <div className="logo" />
            <Menu
              theme="dark"
              mode="horizontal"
              defaultSelectedKeys={['2']}
              style={{ lineHeight: '64px' }}
            >
              <Menu.Item key="1">nav 1</Menu.Item>
              <Menu.Item key="2">nav 2</Menu.Item>
              <Menu.Item key="3">nav 3</Menu.Item>
            </Menu>
          </Header>
          <Layout>
            <Sider
              theme="light"
              collapsible
              width={200}
              style={{ background: '#fff' }}
            >
              <Menu
                mode="inline"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                style={{ height: '100%', borderRight: 0 }}
              >
                <SubMenu
                  key="sub1"
                  title={
                    <span>
                      <Icon type="user" />
                      subnav 1
                    </span>
                  }
                >
                  <Menu.Item key="1">option1</Menu.Item>
                  <Menu.Item key="2">option2</Menu.Item>
                  <Menu.Item key="3">option3</Menu.Item>
                  <Menu.Item key="4">option4</Menu.Item>
                </SubMenu>
                <SubMenu
                  key="sub2"
                  title={
                    <span>
                      <Icon type="laptop" />
                      subnav 2
                    </span>
                  }
                >
                  <Menu.Item key="5">option5</Menu.Item>
                  <Menu.Item key="6">option6</Menu.Item>
                  <Menu.Item key="7">option7</Menu.Item>
                  <Menu.Item key="8">option8</Menu.Item>
                </SubMenu>
                <SubMenu
                  key="sub3"
                  title={
                    <span>
                      <Icon type="notification" />
                      subnav 3
                    </span>
                  }
                >
                  <Menu.Item key="9">option9</Menu.Item>
                  <Menu.Item key="10">option10</Menu.Item>
                  <Menu.Item key="11">option11</Menu.Item>
                  <Menu.Item key="12">option12</Menu.Item>
                </SubMenu>
              </Menu>
            </Sider>
            <Layout style={{ padding: '0 24px 24px' }}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>Home</Breadcrumb.Item>
                <Breadcrumb.Item>List</Breadcrumb.Item>
                <Breadcrumb.Item>App</Breadcrumb.Item>
              </Breadcrumb>
              <Content
                style={{
                  background: '#fff',
                  padding: 24,
                  margin: 0,
                  minHeight: '100vh',
                }}
              >
                Content
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </ThemedApp>
    );
  })
  .add('List', () => {
    const listData = [
      {
        title: 'Foo',
        description: "Don't Panic.",
      },
      {
        title: 'Bar',
        description: "I'd far rather be happy than right any day.",
      },
      {
        title: 'Baz',
        description:
          'For a moment, nothing happened. Then, after a second or so, nothing continued to happen.',
      },
    ];
    return (
      <ThemedApp>
        <List
          itemLayout="horizontal"
          dataSource={listData}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar icon="question" />}
                title={item.title}
                description={item.description}
              />
            </List.Item>
          )}
        />
      </ThemedApp>
    );
  });
