import React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Button } from '../Button/Button';
import { Stack } from '../Stack/Stack';

import { Popover } from './Popover';
import { PopoverOverlay } from './PopoverOverlay';
import { PopoverTrigger } from './PopoverTrigger';

const meta: Meta<typeof Popover> = {
  title: 'UI kit/Popover',
  component: Popover,
  subcomponents: {
    'Popover.Trigger': PopoverTrigger,
    'Popover.Overlay': PopoverOverlay,
  },
  tags: ['autodocs'],
  argTypes: {
    onOpenChange: { control: { disable: true } },
  },
};

export default meta;
type Story = StoryObj<typeof Popover>;

const decorators: Story['decorators'] = [
  Story => (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '80px' }}>
      <Story />
    </div>
  ),
];

export const Default: Story = {
  args: {},
  render: args => (
    <Popover {...args}>
      <Popover.Trigger>{({ props }) => <Button {...props}>Open popover</Button>}</Popover.Trigger>
      <Popover.Overlay>Popover content</Popover.Overlay>
    </Popover>
  ),
  decorators,
};

export const WithPadding: Story = {
  args: {},
  render: args => (
    <Popover {...args}>
      <Popover.Trigger>{({ props }) => <Button {...props}>Open popover</Button>}</Popover.Trigger>
      <Popover.Overlay padding='md'>Popover content with padding</Popover.Overlay>
    </Popover>
  ),
  decorators,
};

export const Elevation: Story = {
  args: {},
  render: args => (
    <Stack orientation='horizontal' gap='xl'>
      <Popover {...args}>
        <Popover.Trigger>{({ props }) => <Button {...props}>Low</Button>}</Popover.Trigger>
        <Popover.Overlay padding='md' elevation='low'>
          Low elevation
        </Popover.Overlay>
      </Popover>
      <Popover {...args}>
        <Popover.Trigger>{({ props }) => <Button {...props}>Medium</Button>}</Popover.Trigger>
        <Popover.Overlay padding='md'>Medium elevation</Popover.Overlay>
      </Popover>
      <Popover {...args}>
        <Popover.Trigger>{({ props }) => <Button {...props}>High</Button>}</Popover.Trigger>
        <Popover.Overlay padding='md' elevation='high'>
          High elevation
        </Popover.Overlay>
      </Popover>
    </Stack>
  ),
  decorators,
};

export const TopPlacement: Story = {
  args: {},
  render: args => (
    <Popover {...args}>
      <Popover.Trigger>{({ props }) => <Button {...props}>Open popover</Button>}</Popover.Trigger>
      <Popover.Overlay placement='top'>I appear on top</Popover.Overlay>
    </Popover>
  ),
  decorators,
};

export const WithInteractiveContent: Story = {
  args: {},
  render: args => (
    <Popover {...args}>
      <Popover.Trigger>{({ props }) => <Button {...props}>Options</Button>}</Popover.Trigger>
      <Popover.Overlay padding='md'>
        {({ state }) => (
          <Stack>
            <Button variant='secondary' size='sm' onClick={state.close}>
              Edit
            </Button>
            <Button variant='secondary' size='sm' onClick={state.close}>
              Duplicate
            </Button>
            <Button variant='secondary' size='sm' onClick={state.close}>
              Delete
            </Button>
          </Stack>
        )}
      </Popover.Overlay>
    </Popover>
  ),
  decorators,
};

export const ControlledAndOpenByDefault: Story = {
  args: {},
  render: args => {
    const [isOpen, setIsOpen] = React.useState(true);

    return (
      <Popover {...args} isOpen={isOpen} onOpenChange={setIsOpen}>
        <Popover.Trigger>{({ props }) => <Button {...props}>Open popover</Button>}</Popover.Trigger>
        <Popover.Overlay>This popover is open by default</Popover.Overlay>
      </Popover>
    );
  },
  decorators,
};