// @flow
import React, { useState, useCallback } from 'react';
import styled from 'styled-components';
import { action } from '@storybook/addon-actions';
import { Menu } from './menu.component';
import { MenuItem } from './menu-item';
import type { TriggerProps } from './menu.proptypes';
import { Text } from '../../typography/text';
import { Box } from '../../../primitives/box';
import { Info } from '../../icon/info';
import { Span } from '../../typography/span';
import { getPaletteColor } from '../../../mixins/branding';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import { StackedChecker } from '../../../mixins/stacking/story-support/stacked-checker';
import docs from './menu.mdx';

export default {
  component: Menu,
  title: 'Components/Overlays/Menu',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const StyledBox = styled(Box)`
  background: ${getPaletteColor('background')};
  border: solid 2px ${getPaletteColor('brand-secondary-fg')};
  border-radius: 10px;
  color: ${getPaletteColor('brand-secondary-fg')};

  &:hover {
    background: ${getPaletteColor('brand-secondary-bg')};
  }
`;
const CustomTrigger = ({ label }: TriggerProps) => (
  <StyledBox spacing={['ph2', 'pv1']}>
    <Span bold>{label}</Span>
  </StyledBox>
);

/**
 * Documentation stories:
 */

export const InteractiveBasic = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Menu
      label="Basic menu"
      isOpen={isOpen}
      onToggle={() => setIsOpen((old) => !old)}
    >
      <MenuItem
        onClick={action('menu item 1 selected')}
        spacing={['pv2', 'ph3']}
      >
        Item 1
      </MenuItem>
      <MenuItem
        onClick={action('menu item 2 selected')}
        spacing={['pv2', 'ph3']}
      >
        Item 2
      </MenuItem>
      <MenuItem
        onClick={action('menu item 3 selected')}
        spacing={['pv2', 'ph3']}
      >
        Item 3
      </MenuItem>
    </Menu>
  );
};

export const InteractiveCustomized = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Box stacked="column" align="end">
      <Menu
        label="Customized Menu"
        TriggerComponent={CustomTrigger}
        isOpen={isOpen}
        onToggle={() => setIsOpen((old) => !old)}
        dropdownSpacing={['pv1', 'mv1']}
        direction="left"
      >
        <MenuItem
          onClick={action('menu item 1 selected')}
          spacing={['pv2', 'ph3']}
          stacked="row"
          align="center"
          justify="space-between"
        >
          <Box spacing="mr2">
            <Text bold spacing="m0">
              Complex Item 1
            </Text>
            <Text colorName="greyscale-dark" spacing="m0">
              Here is a description of the item.
            </Text>
          </Box>
          <Info />
        </MenuItem>
        <MenuItem
          onClick={action('menu item 2 selected')}
          spacing={['pv2', 'ph3']}
          stacked="row"
          align="center"
          justify="space-between"
        >
          <Box spacing="mr2">
            <Text bold spacing="m0">
              Complex Item 2
            </Text>
            <Text colorName="greyscale-dark" spacing="m0">
              Here is a description of the item.
            </Text>
          </Box>
          <Info />
        </MenuItem>
      </Menu>
    </Box>
  );
};

export const MixinsSpacing = () => (
  <>
    <MarginChecker Component={Menu} label="Hello" />
    <PaddingChecker Component={Menu} label="Hello" />
  </>
);

export const MixinsStackee = () => (
  <StackeeChecker Component={Menu} label="Hello" />
);

/**
 * Structural tests (static renders for Chromatic).
 */

export const OpenBasic = () => (
  <Menu label="Menu" isOpen onToggle={action('onToggle')}>
    <MenuItem onClick={action('menu Item 1')} spacing="p1">
      Item 1
    </MenuItem>
  </Menu>
);

const NavBar = styled(Box)`
  height: 50px;
  position: relative;
  width: 90vw;
`;

export const OpenFullWidthWithTarget = () => {
  const [isOpen, setOpen] = useState(false);
  const [target, setTarget] = useState();

  const handleRef = useCallback((node) => {
    if (node) {
      setTarget(node);
    }
  }, []);

  return (
    <>
      <NavBar ref={handleRef} colorName="white" stacked="row" justify="end">
        <Menu
          label="Menu"
          isOpen={isOpen}
          onToggle={() => setOpen((previous) => !previous)}
          targetElement={target}
          flatTopCorners
          direction="left"
        >
          <MenuItem onClick={action('menu Item 1')} spacing="p1">
            Item 1
          </MenuItem>
        </Menu>
      </NavBar>
      <Box spacing="m2">
        <Text bold spacing="m0">
          Here is some content
        </Text>
        <Text colorName="greyscale-dark" spacing="m0">
          The menu content should render over this
        </Text>
      </Box>
    </>
  );
};

export const ClosedBasic = () => (
  <Menu label="Menu" isOpen={false} onToggle={action('onToggle')}>
    <MenuItem onClick={action('menu Item 1')} spacing="p1">
      Item 1
    </MenuItem>
  </Menu>
);

export const OpenCustomTrigger = () => (
  <Menu
    label="Menu"
    TriggerComponent={CustomTrigger}
    isOpen
    onToggle={action('onToggle')}
  >
    <MenuItem onClick={action('menu Item 1')} spacing="p1">
      Item 1
    </MenuItem>
  </Menu>
);

export const OpenFlatTopCorners = () => (
  <Menu
    label="Menu"
    TriggerComponent={CustomTrigger}
    isOpen
    onToggle={action('onToggle')}
    flatTopCorners
  >
    <MenuItem onClick={action('menu Item 1')} spacing="p1">
      Item 1
    </MenuItem>
  </Menu>
);

export const ClosedCustomTrigger = () => (
  <Menu
    label="Menu"
    TriggerComponent={CustomTrigger}
    isOpen={false}
    onToggle={action('onToggle')}
  >
    <MenuItem onClick={action('menu Item 1')} spacing="p1">
      Item 1
    </MenuItem>
  </Menu>
);

export const OpenCustomItem = () => (
  <Menu label="Menu" isOpen onToggle={action('onToggle')}>
    <MenuItem
      onClick={action('menu item 1 selected')}
      spacing={['pv2', 'ph3']}
      stacked="row"
      align="center"
      justify="space-between"
    >
      <Box spacing="mr2">
        <Text bold spacing="m0">
          Complex Item 1
        </Text>
        <Text colorName="greyscale-dark" spacing="m0">
          Here is a description of the item.
        </Text>
      </Box>
      <Info />
    </MenuItem>
  </Menu>
);

export const ClosedCustomItem = () => (
  <Menu label="Menu" isOpen={false} onToggle={action('onToggle')}>
    <MenuItem
      onClick={action('menu item 4 selected')}
      spacing={['pv2', 'ph3']}
      stacked="row"
      align="center"
      justify="space-between"
    >
      <Box spacing="mr2">
        <Text bold spacing="m0">
          Complex Item 1
        </Text>
        <Text colorName="greyscale-dark" spacing="m0">
          Here is a description of the item.
        </Text>
      </Box>
      <Info />
    </MenuItem>
  </Menu>
);

export const MixinsMenuItemSpacing = () => (
  <Menu isOpen label="Menu Items with Spacing" onToggle={action('onToggle')}>
    <MarginChecker Component={MenuItem}>Menu Item</MarginChecker>
    <PaddingChecker Component={MenuItem}>Menu Item</PaddingChecker>
  </Menu>
);

export const MixinsMenuItemStacked = () => (
  <Menu isOpen label="Menu Items with Stacking" onToggle={action('onToggle')}>
    <StackedChecker Component={MenuItem} />
  </Menu>
);
