import React from 'react';
import Menu from './menu';
import { ButtonStory } from '../../general/button/buttonStory';
import { BrowserRouter } from 'react-router-dom';
import Container from '../../grid/container/container';
import { color } from '@storybook/addon-knobs';

export const MenuStory = () => {
  const paths = {
    index: '/',
    grid: '/grid',
    row: '/grid/row',
    typography: '/typography',
    icon: '/typography/icon',
    feedback: '/feedback',
    modal: '/feedback/modal',
  };

  const routes = [
    {
      label: 'Grid',
      path: paths.grid,
      key: 'index',
      component: ButtonStory,
      exact: true,
      children: [
        {
          label: 'Row',
          path: paths.row,
          key: 'row',
          component: ButtonStory,
        },
      ],
    },
    {
      label: 'Typography',
      path: paths.typography,
      key: 'typography',
      component: ButtonStory,
      children: [
        {
          label: 'Icon',
          path: paths.icon,
          key: 'icon',
          component: ButtonStory,
        },
      ],
    },
    {
      label: 'FeedbackPage',
      path: paths.feedback,
      key: 'feedback',
      component: ButtonStory,
      children: [
        {
          label: 'Modal',
          path: paths.modal,
          key: 'modal',
          component: ButtonStory,
        },
      ],
    },
  ];
  const bgColor = color('цвет фона','rgba(42,42,42,0)');
  return (
    <BrowserRouter>
      <Container styles={{
        backgroundColor: bgColor, display: 'flex', width: '100%', height: '100%'}}>
        <Container styles={{ width: '20vw', alignSelf: 'center' }}>
          <Menu routes={routes} />
        </Container>
      </Container>
    </BrowserRouter>
  )
}