import React from 'react';
import MenuMobile from './index';
import { useArgs } from '@storybook/client-api';
import Button from '../../Controls/Button';
import styled from 'styled-components';

export default {
  title: 'Core/Menu/Mobile',
  component: MenuMobile,
  layout: 'fullscreen'
};

const menu = [
  {
    name: 'Features',
    icon: 'ArrowDown',
    noAnimatedIcon: false,
    noRoughAnimation: false,
    submenu: [
      {
        tabIndex: 0,
        name: 'Cookies widget',
        colorName: '#ffce43',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        colorDescription: '#212121',
        img: 'https://axeptio.imgix.net/2018/12/FAQ-temps.png?w=40',
        link: '#',
        icon: 'Mail'
      },
      {
        tabIndex: 1,
        name: 'Consent Widget',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        img: 'https://axeptio.imgix.net/2018/12/FAQ-temps.png?w=40',
        link: '#'
      }
    ]
  },
  {
    name: 'Ressources',
    noRoughAnimation: false,
    noAnimatedIcon: false,
    submenu: [
      {
        tabIndex: 2,
        name: 'User documentation',
        link: '#'
      },
      {
        tabIndex: 3,
        name: 'Developer documentation',
        link: '#'
      },
      {
        tabIndex: 4,
        name: 'Use case',
        link: '#'
      },
      {
        tabIndex: 5,
        name: 'Blog',
        link: '#'
      }
    ]
  },
  {
    name: 'Features',
    icon: 'Mail',
    noAnimatedIcon: true,
    noRoughAnimation: true,
    submenu: [
      {
        tabIndex: 6,
        name: 'Cookies widget',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        img: 'https://axeptio.imgix.net/2018/12/FAQ-temps.png?w=40',
        link: '#',
        icon: null
      },
      {
        tabIndex: 7,
        name: 'Consent Widget',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        img: 'https://axeptio.imgix.net/2018/12/FAQ-temps.png?w=40',
        link: '#'
      }
    ]
  },
  {
    tabIndex: 8,
    name: 'Price',
    link: '#'
  }
];

const Header = styled.div`
  z-index: 100000;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin: 0px;
  padding: 0px 20px;
  height: 90px;
`;

const Template = args => {
  const [_, updateArgs] = useArgs();

  return (
    <>
      <Header>
        <Button
          size="small"
          secondary
          onClick={() => {
            updateArgs({ ...args, open: !args.open });
          }}
        >
          {args?.open ? 'Retour' : 'Menu'}
        </Button>
      </Header>
      <MenuMobile {...args} />
    </>
  );
};

export const Default = Template.bind({});
Default.args = {
  id: 'menu_stories',
  menu: menu,
  open: true
};

Default.parameters = {
  layout: 'fullscreen'
};