import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { MoreHorizontal } from 'lucide-react';
import { Checkbox } from './Checkbox.js';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from './DropdownMenu.js';
import { IconButton } from './IconButton.js';
import { RadioGroup, RadioGroupItem } from './RadioGroup.js';
import { SegmentedControl } from './SegmentedControl.js';
import { Switch } from './Switch.js';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs.js';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './Tooltip.js';

const meta: Meta = {
  title: 'Components/Controls',
};

export default meta;
type Story = StoryObj;

export const ChoiceControls: Story = {
  render: () => {
    const [mode, setMode] = React.useState('review');

    return (
      <div className="grid max-w-xl gap-4">
        <SegmentedControl
          aria-label="Queue mode"
          value={mode}
          onValueChange={setMode}
          options={[
            { value: 'review', label: 'Review' },
            { value: 'approved', label: 'Approved' },
            { value: 'rejected', label: 'Rejected' },
          ]}
        />
        <Checkbox label="Include archived notes" />
        <Switch label="Auto-refresh queue" />
        <RadioGroup defaultValue="compact" aria-label="Density">
          <RadioGroupItem value="compact" label="Compact" />
          <RadioGroupItem value="comfortable" label="Comfortable" />
        </RadioGroup>
      </div>
    );
  },
};

export const OverlaysAndTabs: Story = {
  render: () => (
    <TooltipProvider>
      <div className="grid max-w-xl gap-4">
        <Tabs defaultValue="queue">
          <TabsList aria-label="Review sections">
            <TabsTrigger value="queue">Queue</TabsTrigger>
            <TabsTrigger value="timeline">Timeline</TabsTrigger>
          </TabsList>
          <TabsContent value="queue" className="pt-3">
            Queue content
          </TabsContent>
          <TabsContent value="timeline" className="pt-3">
            Timeline content
          </TabsContent>
        </Tabs>
        <div className="flex gap-2">
          <Tooltip>
            <TooltipTrigger asChild>
              <IconButton icon={<MoreHorizontal className="h-4 w-4" />} label="More actions" />
            </TooltipTrigger>
            <TooltipContent>More actions</TooltipContent>
          </Tooltip>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <IconButton icon={<MoreHorizontal className="h-4 w-4" />} label="Open menu" />
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuLabel>Actions</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem>Approve</DropdownMenuItem>
              <DropdownMenuItem>Reject</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </TooltipProvider>
  ),
};