import React from 'react';
import PropTypes from 'prop-types';
import Template, { TEMPLATE__TYPE_ENUM } from './template';
import { select, text } from '@storybook/addon-knobs';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router';

const paths = {
  index: '/',
  menu: '/menu',
  subMenu1: '/menu/subMenu1',
  subMenu2: '/menu/subMenu2',
  subMenu3: '/menu/subMenu3',
  menu2: '/menu2',
  subMenu4: '/menu2/subMenu4',
  subMenu5: '/menu2/subMenu5',
  subMenu6: '/menu2/subMenu6',
};

const routes = [
  {
    label: 'index',
    key: 'index',
    path: paths.index,
    component: <Redirect to={paths.menu} />,
    showInMenu: false,
    exact: true,
  },
  {
    label: 'Menu',
    path: paths.menu,
    key: 'menu',
    component: () => 'Component here',
    children: [
      {
        label: 'SubMenu1',
        path: paths.subMenu1,
        key: 'sub1',
        component: () => 'Component here',
      },
      {
        label: 'SubMenu2',
        path: paths.subMenu2,
        key: 'sub2',
        component: () => 'Component here',
      },
      {
        label: 'SubMenu3',
        path: paths.subMenu3,
        key: 'sub3',
        component: () => 'Component here',
      },
    ],
  },
  {
    label: 'Menu2',
    path: paths.menu2,
    key: 'menu2',
    component: () => 'Component here',
    exact: true,
    children: [
      {
        label: 'SubMenu4',
        path: paths.subMenu4,
        key: 'sub4',
        component: () => 'Component here',
      },
      {
        label: 'SubMenu5',
        path: paths.subMenu5,
        key: 'sub5',
        component: () => 'Component here',
      },
      {
        label: 'SubMenu6',
        path: paths.subMenu6,
        key: 'sub6',
        component: () => 'Component here',
      },
    ],
  },
];

const TemplateStory = () => (
  <BrowserRouter>
    <Template type={select('type', Object.keys(TEMPLATE__TYPE_ENUM), Template.defaultProps.type)}
              routes={routes}
              logoText={text('logoText', 'Design System Dit')} userName={text('userName', 'zoosmell')}>
      Child Component, a form with high probability
    </Template>
  </BrowserRouter>
);

TemplateStory.propTypes = {};

TemplateStory.defaultProps = {};

export default TemplateStory;