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

import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from './popover';
import { Button } from '../button/button';
import { Input } from '../input/input';
import { Label } from '../label/label';

const meta = {
  title: 'Components/Popover',
  component: Popover,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Non-modal floating panel anchored to a trigger. It does not trap focus or block the page, which makes it right for secondary controls and inline detail. Use DropdownMenu when the content is a list of commands.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Popover>;

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

export const Default: Story = {
  render: () => (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Set dimensions</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>Applied to the selected layer.</PopoverDescription>
        </PopoverHeader>
        <div className="mt-4 grid gap-3">
          <div className="grid grid-cols-3 items-center gap-3">
            <Label htmlFor="pop-width">Width</Label>
            <Input id="pop-width" defaultValue="100%" className="col-span-2 h-8" />
          </div>
          <div className="grid grid-cols-3 items-center gap-3">
            <Label htmlFor="pop-height">Height</Label>
            <Input id="pop-height" defaultValue="24px" className="col-span-2 h-8" />
          </div>
        </div>
      </PopoverContent>
    </Popover>
  ),
};

export const Sides: Story = {
  render: () => (
    <div className="flex flex-wrap gap-2">
      {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
        <Popover key={side}>
          <PopoverTrigger asChild>
            <Button variant="outline" size="sm">
              {side}
            </Button>
          </PopoverTrigger>
          <PopoverContent side={side} className="w-auto">
            <PopoverDescription>Anchored to the {side}.</PopoverDescription>
          </PopoverContent>
        </Popover>
      ))}
    </div>
  ),
};