import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariant, StoryVariantTable} from '../../docs/utils';
import PageHeader from 'blocks/PageHeader';

import Text from '../text/Text';
import Button from '../buttons/Button';
import Flex from '../flex/Flex';
import Checkbox from '../form-elements/checkbox/Checkbox';
import Radio from '../form-elements/radio/Radio';
import Icon from '../icons/Icon';
import Counter from '../counters/Counter';
import Logo from '../logo/Logo';
import Avatar from '../avatar/Avatar';
import Link from '../text/Link';
import List from '../list/List';
import ListItem from '../list/ListItem';
import ListItemIcon from '../list/ListItemIcon';
import Popover from './Popover';
import PopoverA11y from './stories/Popover.a11y.mdx';
const PLACEMENTS = [
  'top',
  'top-start',
  'top-end',
  'bottom',
  'bottom-start',
  'bottom-end',
  'left',
  'left-start',
  'left-end',
  'right',
  'right-start',
  'right-end',
];

<Meta
  title="Components/Popover"
  component={Popover}
  subcomponents={{Element: Popover.Element, Trigger: Popover.Trigger}}
  parameters={{chromatic: {delay: 300}}}
/>

<PageHeader>Popover</PageHeader>

- [Stories](#stories)
- [Accessibility](#accessibility)

## Overview

<Canvas>
  <Story name="Default" parameters={{layout: 'centered'}}>
    {args => (
      <Popover {...args}>
        <Popover.Element>
          <List spaced>
            <ListItem>
              <a>
                <Flex
                  justifyContent="space-between"
                  alignItems="center"
                  margin="xs"
                >
                  <Flex alignItems="center">
                    <Flex marginRight="s">
                      <Icon color="adaptive" type="profile_view" />
                    </Flex>
                    <Flex direction="column">
                      <Text size="small" weight="bold">
                        Go to profile
                      </Text>
                    </Flex>
                  </Flex>
                </Flex>
              </a>
            </ListItem>
            <ListItem>
              <a>
                <Flex
                  justifyContent="space-between"
                  alignItems="center"
                  margin="xs"
                >
                  <Flex alignItems="center">
                    <Flex marginRight="s">
                      <Icon color="adaptive" type="pencil" />
                    </Flex>
                    <Flex direction="column">
                      <Text size="small" weight="bold">
                        Edit profile
                      </Text>
                    </Flex>
                  </Flex>
                </Flex>
              </a>
            </ListItem>
            <ListItem>
              <a>
                <Flex
                  justifyContent="space-between"
                  alignItems="center"
                  margin="xs"
                >
                  <Flex alignItems="center">
                    <Flex marginRight="s">
                      <Icon color="adaptive" type="settings" />
                    </Flex>
                    <Flex direction="column">
                      <Text size="small" weight="bold">
                        Account settings
                      </Text>
                    </Flex>
                  </Flex>
                </Flex>
              </a>
            </ListItem>
          </List>
        </Popover.Element>
        <Popover.Trigger>
          <Button
            icon={<Icon color="adaptive" type="clipboard" aria-hidden />}
            iconOnly
            variant="solid-light"
          />
        </Popover.Trigger>
      </Popover>
    )}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Controlled

<Canvas>
  <Story name="Controlled" parameters={{layout: 'centered'}}>
    {args => {
      const [isOpen, setIsOpen] = React.useState(false);
      return (
        <Popover {...args} onOpenChange={setIsOpen} open={isOpen}>
          <Popover.Element>Copy to clipboard</Popover.Element>
          <Popover.Trigger>
            <Button
              icon={<Icon color="adaptive" type="clipboard" aria-hidden />}
              iconOnly
              variant="solid-light"
            />
          </Popover.Trigger>
        </Popover>
      );
    }}
  </Story>
</Canvas>

### Interactive content

<Canvas>
  <Story name="Interactive content" parameters={{layout: 'centered'}}>
    {args => (
      <Flex style={{gap: '20px'}}>
        <Popover {...args}>
          <Popover.Element maxWidth="300px" padding="24px">
            <Flex direction="column" style={{gap: '10px'}}>
              <Text weight="bold" align="to-left">
                Get your badge on!
              </Text>
              <Text align="to-left">
                Now you can show off your brain power with flashy badges.
                Complete achievements to claim new badges.
              </Text>
              <Button variant="solid">CHECK IT OUT</Button>
            </Flex>
          </Popover.Element>
          <Popover.Trigger>
            <Button
              icon={<Icon color="adaptive" type="options" aria-hidden />}
              iconOnly
              variant="solid-light"
              aria-label="profile options"
            />
          </Popover.Trigger>
        </Popover>
        <Popover {...args}>
          <Popover.Element maxWidth="300px" padding="24px">
            <Flex direction="column" style={{gap: '10px'}}>
              <Text weight="bold" align="to-left">
                You've got 2138 points!
              </Text>
              <Text align="to-left">Great job!</Text>
              <Button variant="solid">See your achievements</Button>
            </Flex>
          </Popover.Element>
          <Popover.Trigger>
            <Button
              icon={<Icon color="adaptive" type="profile" aria-hidden />}
              iconOnly
              variant="solid-light"
              aria-label="your profile"
            />
          </Popover.Trigger>
        </Popover>
      </Flex>
    )}
  </Story>
</Canvas>

### Types of triggers

<Canvas>
  <Story name="Types of triggers">
    {args => {
      const RenderPopover = ({trigger}) => (
        <Popover {...args}>
          <Popover.Element>Here's a popover</Popover.Element>
          <Popover.Trigger>{trigger}</Popover.Trigger>
        </Popover>
      );
      return (
        <Flex direction="column" style={{gap: '20px'}}>
          <div>
            <Text weight="bold">Button component:</Text>
            <RenderPopover trigger={<Button>Hover me</Button>} />
          </div>
          <div>
            <Text weight="bold">Checkbox component:</Text>
            <RenderPopover trigger={<Checkbox>Hover me</Checkbox>} />
          </div>
          <div>
            <Text weight="bold">{`<button>`} tag:</Text>
            <RenderPopover
              trigger={<button>Hover me to trigger the popover</button>}
            />
          </div>
          <div>
            <Text weight="bold">{`<p>`} tag:</Text>
            <RenderPopover
              trigger={
                <p style={{background: 'lightgray'}}>
                  Hover me to trigger the popover
                </p>
              }
            />
          </div>
          <div>
            <Text weight="bold">Counter component:</Text>
            <RenderPopover
              trigger={
                <Counter icon="points" size="xs">
                  +15
                  <Text as="span" color="text-gray-60" inherited>
                    {' '}
                    pts{' '}
                  </Text>
                </Counter>
              }
            />
          </div>
          <div style={{maxWidth: '300px'}}>
            <Text weight="bold">Plain text:</Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. <RenderPopover trigger="HOVER ME TO TRIGGER TOOLTIP" />{' '}
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
            ut aliquip ex ea commodo consequat.
          </div>
        </Flex>
      );
    }}
  </Story>
</Canvas>

### Placement

<Canvas>
  <Story name="Placement">
    {args => {
      const RenderPopover = ({placement, withArrow = true}) => {
        const triggerPlacement = {
          top: {
            justifyContent: 'flex-end',
            alignItems: 'center',
          },
          'top-start': {
            justifyContent: 'flex-end',
            alignItems: 'flex-start',
          },
          'top-end': {
            justifyContent: 'flex-end',
            alignItems: 'flex-end',
          },
          bottom: {
            justifyContent: 'flex-start',
            alignItems: 'center',
          },
          'bottom-start': {
            justifyContent: 'flex-start',
            alignItems: 'flex-start',
          },
          'bottom-end': {
            justifyContent: 'flex-start',
            alignItems: 'flex-end',
          },
          left: {
            justifyContent: 'center',
            alignItems: 'flex-end',
          },
          'left-start': {
            justifyContent: 'flex-start',
            alignItems: 'flex-end',
          },
          'left-end': {
            justifyContent: 'flex-end',
            alignItems: 'flex-end',
          },
          right: {
            justifyContent: 'center',
            alignItems: 'flex-start',
          },
          'right-start': {
            justifyContent: 'flex-start',
            alignItems: 'flex-start',
          },
          'right-end': {
            justifyContent: 'flex-end',
            alignItems: 'flex-start',
          },
        };
        return (
          <Flex
            direction="column"
            style={{
              flexBasis: 'calc(33% - 30px)',
              padding: '20px 0',
            }}
          >
            <Text weight="bold">{placement}</Text>
            <Flex
              direction="column"
              style={{
                backgroundColor: '#f5f8fa',
                borderRadius: '16px',
                padding: '20px',
                height: '240px',
                ...triggerPlacement[placement],
              }}
            >
              <Popover {...args} placement={placement} defaultOpen>
                <Popover.Element
                  withArrow={withArrow}
                  maxWidth="216px"
                  padding="12px"
                >
                  <Flex direction="column">
                    <Flex style={{paddingBottom: '6px'}}>
                      <Icon color="icon-green-50" type="verified" />
                      <Text
                        size="small"
                        weight="bold"
                        style={{paddingLeft: '6px'}}
                      >
                        Expert-Verified Answer
                      </Text>
                    </Flex>
                    <Text size="xsmall">
                      Brainly has millions of high quality answers, all of them
                      carefully moderated by our most trusted community members,
                      but Verified Answers are the finest of the finest.
                    </Text>
                  </Flex>
                </Popover.Element>
                <Popover.Trigger>
                  <Button
                    icon={<Icon color="adaptive" type="report_flag_outlined" />}
                    iconOnly
                    variant="solid-light"
                  />
                </Popover.Trigger>
              </Popover>
            </Flex>
          </Flex>
        );
      };
      return (
        <Flex direction="column" alignItems="center">
          <Text weight="bold">With arrow</Text>
          <Flex
            direction="row"
            alignItems="center"
            wrap
            style={{
              gap: '0 30px',
            }}
          >
            {PLACEMENTS.map(placement => (
              <RenderPopover placement={placement} />
            ))}
          </Flex>
          <Text weight="bold" style={{paddingTop: '40px'}}>
            Without arrow
          </Text>
          <Flex
            direction="row"
            alignItems="center"
            wrap
            style={{
              gap: '30px',
            }}
          >
            {PLACEMENTS.map(placement => (
              <RenderPopover placement={placement} withArrow={false} />
            ))}
          </Flex>
        </Flex>
      );
    }}
  </Story>
</Canvas>

## Accessibility

<PopoverA11y />