import * as React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { faUserCircle, faCogs, faLayerGroup, faTable, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import { storiesOf, addParameters } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
import { Header } from '.';
import avatar from './__mocks__/avatar.jpeg';
import logo from './__mocks__/logo.png';
import { PHeader } from './header.interface';

const data: PHeader = {
   logo,
   user: {
      name: 'Verônica',
      image: avatar,
   },
   menuUserBar: [
      {
         title: (
            <>
               <FontAwesomeIcon icon={faUserCircle} /> Meu Perfil
            </>
         ),
         route: '/settings/accounts',
      },
      {
         title: (
            <>
               <FontAwesomeIcon icon={faSignOutAlt} /> Sair
            </>
         ),
         route: '/',
      },
   ],
   menu: [
      {
         title: (
            <>
               <FontAwesomeIcon icon={faUserCircle} /> Home
            </>
         ),
         route: '/iframe.html',
      },
      {
         title: (
            <>
               <FontAwesomeIcon icon={faLayerGroup} /> Components
            </>
         ),
         route: '/components',
         subMenu: [
            { title: 'Base', route: '/components/base' },
            { title: 'Commons', route: '/components/commons' },
            { title: 'Customs', route: '/components/customs' },
         ],
      },
      {
         title: (
            <>
               <FontAwesomeIcon icon={faTable} /> CRUD
            </>
         ),
         route: '/CRUD',
         subMenu: [
            { title: 'Base', route: '/CRUD/base' },
            { title: 'Commons', route: '/CRUD/commons' },
            { title: 'Customs', route: '/CRUD/customs' },
         ],
      },
      {
         title: (
            <>
               <FontAwesomeIcon icon={faCogs} /> Settings
            </>
         ),
         route: '/settings',
      },
   ],
};

storiesOf('Components/Header/desktop', module)
   .add('default', () => (
      <Router>
         <Header {...data} />
      </Router>
   ))
   .add('custom background', () => (
      <Router>
         <ThemeProvider
            theme={{
               header: {
                  backgroundColor: 'orange',
                  textColor: '#7f5200',
                  textColorUsername: '#7f5200',
               },
            }}
         >
            <Header {...data} />
         </ThemeProvider>
      </Router>
   ))
   .add('custom theme', () => (
      <Router>
         <ThemeProvider
            theme={{
               header: {
                  backgroundColor: '#eee',
                  textColor: '#444',
                  textColorMenu: '#444',
                  textColorMenuSub: '#444',
                  textColorActiveMenu: 'crimson',
                  textColorUsername: '#000',
               },
            }}
         >
            <Header {...data} contentBeforeUser="contentBeforeUser" />
         </ThemeProvider>
      </Router>
   ))
   .add('contentBeforeUser', () => (
      <Router>
         <ThemeProvider
            theme={{
               header: {
                  backgroundColor: 'orange',
                  textColor: '#7f5200',
                  textColorMenu: 'red',
                  textColorUsername: '#7f5200',
               },
            }}
         >
            <Header {...data} contentBeforeUser={<>sdsd156</>} />
         </ThemeProvider>
      </Router>
   ))
   .add('menu active', () => (
      <Router>
         <Header
            {...{
               logo,
               user: {
                  name: 'Verônica',
                  image: avatar,
               },
               menu: [
                  {
                     title: (
                        <>
                           <FontAwesomeIcon icon={faUserCircle} /> Home
                        </>
                     ),
                     route: '/iframe.html',
                  },
               ],
            }}
         />
      </Router>
   ))
   .add('menu active with category', () => (
      <Router>
         <Header
            {...{
               logo,
               user: {
                  name: 'Verônica',
                  image: avatar,
               },
               menu: [
                  {
                     title: (
                        <>
                           <FontAwesomeIcon icon={faUserCircle} /> Home
                        </>
                     ),
                     route: '',
                     subMenu: [
                        {
                           title: (
                              <>
                                 <FontAwesomeIcon icon={faUserCircle} /> Home
                              </>
                           ),
                           route: '/iframe.html',
                        },
                     ],
                  },
               ],
            }}
         />
      </Router>
   ))
   .add('submenu open', () => (
      <Router>
         <Header
            {...{
               logo,
               user: {
                  name: 'Verônica',
                  image: avatar,
               },
               menu: [
                  {
                     title: (
                        <>
                           <FontAwesomeIcon icon={faUserCircle} /> Home
                        </>
                     ),
                     route: '',
                     opened: true,
                     subMenu: [
                        {
                           title: (
                              <>
                                 <FontAwesomeIcon icon={faUserCircle} /> Home 2
                              </>
                           ),
                           route: '/section',
                        },
                        {
                           title: (
                              <>
                                 <FontAwesomeIcon icon={faUserCircle} /> Home 12
                              </>
                           ),
                           route: '/section12',
                        },
                     ],
                  },
               ],
            }}
         />
      </Router>
   ))
   .add('menu user open', () => (
      <Router>
         <Header
            {...{
               logo,
               user: {
                  name: 'Verônica',
                  image: avatar,
               },
               __openUserMenuInfo: true,
               menu: [
                  {
                     title: 'Home',
                     route: '/',
                  },
               ],
            }}
         />
      </Router>
   ));

storiesOf('Components/Header/mobile', module)
   .addParameters({
      viewport: {
         viewports: INITIAL_VIEWPORTS,
         defaultViewport: 'iphone6',
      },
   })
   .add('default', () => (
      <Router>
         <Header {...data} />
      </Router>
   ))
   .add('menu open', () => (
      <Router>
         <Header
            {...{
               logo,
               user: {
                  name: 'Verônica',
                  image: avatar,
               },
               __menuMobileOpen: true,
               menu: [
                  {
                     title: (
                        <>
                           <FontAwesomeIcon icon={faUserCircle} /> Home
                        </>
                     ),
                     route: '',
                     subMenu: [
                        {
                           title: 'Home',
                           route: '/',
                        },
                        {
                           title: 'Home',
                           route: '/',
                        },
                        {
                           title: 'Home',
                           route: '/',
                        },
                     ],
                  },
                  {
                     title: (
                        <>
                           <FontAwesomeIcon icon={faUserCircle} /> Home
                        </>
                     ),
                     route: '',
                  },
               ],
            }}
         />
      </Router>
   ))
   .add('menu open with menu active', () => (
      <Router>
         <Header
            {...{
               logo,
               user: {
                  name: 'Verônica',
                  image: avatar,
               },
               __menuMobileOpen: true,
               menu: [
                  {
                     title: (
                        <>
                           <FontAwesomeIcon icon={faUserCircle} /> &nbsp; Home
                        </>
                     ),
                     route: '/iframe.html', // active by storybook
                  },
                  {
                     title: (
                        <>
                           <FontAwesomeIcon icon={faUserCircle} /> &nbsp; Home
                        </>
                     ),
                     route: '',
                     subMenu: [
                        {
                           title: 'Home',
                           route: '/iframe.html',
                        },
                        {
                           title: 'Properties',
                           route: '/properties',
                        },
                        {
                           title: 'Contacts',
                           route: '/contacts',
                        },
                     ],
                  },
                  {
                     title: (
                        <>
                           <FontAwesomeIcon icon={faUserCircle} /> &nbsp; &nbsp; Home
                        </>
                     ),
                     route: '',
                  },
               ],
            }}
         />
      </Router>
   ))
   .add('custom background', () => (
      <Router>
         <ThemeProvider
            theme={{
               header: {
                  backgroundColor: 'orange',
                  textColor: '#7f5200',
                  textColorUsername: '#7f5200',
               },
            }}
         >
            <Header {...data} />
         </ThemeProvider>
      </Router>
   ))
   .add('menu open with sub menu active', () => (
      <Router>
         <Header
            {...{
               logo,
               user: {
                  name: 'Verônica',
                  image: avatar,
               },
               __menuMobileOpen: true,
               menu: [
                  {
                     title: (
                        <>
                           <FontAwesomeIcon icon={faUserCircle} /> Home
                        </>
                     ),
                     route: '/',
                  },
                  {
                     title: (
                        <>
                           <FontAwesomeIcon icon={faUserCircle} /> Home
                        </>
                     ),
                     route: '',
                     subMenu: [
                        {
                           title: 'Home',
                           route: '/iframe.html',
                        },
                        {
                           title: 'Home',
                           route: '/',
                        },
                        {
                           title: 'Home',
                           route: '/',
                        },
                     ],
                  },
                  {
                     title: (
                        <>
                           <FontAwesomeIcon icon={faUserCircle} /> Home
                        </>
                     ),
                     route: '',
                  },
               ],
            }}
         />
      </Router>
   ));
