import type { Meta, StoryObj } from '@storybook/react'
import * as React from 'react'
import { Button } from '../Button'
import { Field, FieldLabel, FieldControl } from '../Field'
import { Input } from '../Input'
import { Typography } from '../Typography'
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
  DrawerHandle,
} from './Drawer'

const meta = {
  title: 'Blocks/Drawer',
  component: Drawer,
  argTypes: {
    defaultOpen: {
      control: 'boolean',
      description:
        'The open state of the drawer when it is initially rendered.',
      table: {
        type: {
          summary: 'boolean',
        },
      },
    },
    open: {
      control: 'boolean',
      description: 'The controlled open state of the drawer.',
      table: {
        type: {
          summary: 'boolean',
        },
      },
    },
    onOpenChange: {
      control: false,
      description:
        'Event handler called when the open state of the drawer changes.',
      table: {
        type: {
          summary: 'function',
        },
      },
    },
    onAnimationEnd: {
      control: false,
      description: 'Event handler called when the drawer animation ends.',
      table: {
        type: {
          summary: 'function',
        },
      },
    },

    snapPoints: {
      control: false,
      description:
        'Array of snap points for the drawer. Each point is a number between 0 and 1 representing the percentage of the viewport height.',
      table: {
        type: {
          summary: 'array',
        },
      },
    },
    activeSnapPoint: {
      control: false,
      description: 'The currently active snap point.',
      table: {
        type: {
          summary: 'number | string | null',
        },
      },
    },
    setActiveSnapPoint: {
      control: false,
      description: 'Function to set the active snap point.',
      table: {
        type: {
          summary: 'function',
        },
      },
    },
    fadeFromIndex: {
      control: { type: 'number' },
      description:
        'The index of the snap point from which to fade out the drawer.',
      table: {
        type: {
          summary: 'number',
        },
      },
    },
    snapToSequentialPoint: {
      control: 'boolean',
      description: 'Whether to snap to sequential points when dragging.',
      table: {
        type: {
          summary: 'boolean',
        },
      },
    },
  },
} satisfies Meta<typeof Drawer>

export default meta
type Story = StoryObj<typeof Drawer>

export const Default: Story = {
  render: (args, context) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}
    return (
      <Drawer {...args} {...openProp}>
        <DrawerTrigger asChild>
          <Button variant="primary">Open Drawer</Button>
        </DrawerTrigger>
        <DrawerContent>
          <DrawerHandle />
          <DrawerHeader>
            <DrawerTitle>Move Goal</DrawerTitle>
            <DrawerDescription className="text-center">
              Set your daily activity goal.
            </DrawerDescription>
          </DrawerHeader>
          <div className="mx-auto w-full p-6">
            <Typography
              variant="h1"
              className="text-7xl font-bold tracking-tighter"
            >
              350
            </Typography>
            <Typography variant="body-s" className="text-muted-foreground">
              CAL/DAY
            </Typography>
          </div>
          <DrawerFooter>
            <Button>Submit</Button>
            <DrawerClose asChild>
              <Button variant="ghost">Cancel</Button>
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    )
  },
}

export const SnapPoints: Story = {
  render: (_args, context) => {
    const open = context.viewMode === 'story'

    const SnapPointsExample = () => {
      const snapPoints = ['500px', 0.8, 1]

      const [snapPoint, setSnapPoint] = React.useState<number | string | null>(
        snapPoints[0],
      )

      return (
        <Drawer
          snapPoints={snapPoints}
          activeSnapPoint={snapPoint}
          setActiveSnapPoint={setSnapPoint}
          defaultOpen={open}
        >
          <DrawerTrigger asChild>
            <Button variant="primary">Open Drawer with Snap Points</Button>
          </DrawerTrigger>
          <DrawerContent className="h-full">
            <DrawerHandle />
            <DrawerHeader>
              <DrawerTitle>Snap Points Example</DrawerTitle>
              <DrawerDescription className="text-center">
                Drag the drawer to snap to different heights.
              </DrawerDescription>
            </DrawerHeader>
            <div className="mx-auto w-full p-6">
              <div className="flex flex-col gap-4">
                <Typography variant="body-s" className="text-muted-foreground">
                  Current snap point: {snapPoint ?? 'none'}
                </Typography>
              </div>
            </div>
            <DrawerFooter>
              <DrawerClose asChild>
                <Button variant="ghost">Close</Button>
              </DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      )
    }

    return <SnapPointsExample />
  },
}

export const Inputs: Story = {
  render: (_args, context) => {
    const open = context.viewMode === 'story'

    const InputsExample = () => {
      const [email, setEmail] = React.useState('')
      const [name, setName] = React.useState('')

      return (
        <Drawer repositionInputs defaultOpen={open}>
          <DrawerTrigger asChild>
            <Button variant="primary">Open Drawer with Inputs</Button>
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHandle />
            <DrawerHeader>
              <DrawerTitle>Contact Information</DrawerTitle>
              <DrawerDescription className="text-center">
                Enter your details below. The drawer will automatically adjust
                when the keyboard appears.
              </DrawerDescription>
            </DrawerHeader>
            <div className="mx-auto w-full p-6">
              <div className="flex flex-col gap-4">
                <Field size="sm">
                  <FieldLabel>Name</FieldLabel>
                  <FieldControl>
                    <Input
                      placeholder="John Doe"
                      value={name}
                      onChange={(e) => setName(e.target.value)}
                    />
                  </FieldControl>
                </Field>
                <Field size="sm">
                  <FieldLabel>Email</FieldLabel>
                  <FieldControl>
                    <Input
                      type="email"
                      placeholder="john@example.com"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                    />
                  </FieldControl>
                </Field>
              </div>
            </div>
            <DrawerFooter>
              <Button>Submit</Button>
              <DrawerClose asChild>
                <Button variant="ghost">Cancel</Button>
              </DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      )
    }

    return <InputsExample />
  },
}

export const NonModal: Story = {
  render: (_args, context) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}
    return (
      <Drawer modal={false} {...openProp}>
        <DrawerTrigger asChild>
          <Button variant="primary">Open Non-Modal Drawer</Button>
        </DrawerTrigger>
        <DrawerContent>
          <DrawerHandle />
          <DrawerHeader>
            <DrawerTitle>Non-Modal Drawer</DrawerTitle>
            <DrawerDescription className="text-center">
              This drawer is non-modal, so you can interact with the background
              content.
            </DrawerDescription>
          </DrawerHeader>
          <div className="mx-auto w-full p-6">
            <Typography variant="body-s">
              Try clicking outside the drawer - you can still interact with the
              page behind it.
            </Typography>
          </div>
          <DrawerFooter>
            <DrawerClose asChild>
              <Button variant="ghost">Close</Button>
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    )
  },
}

export const LongContent: Story = {
  render: (_args, context) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}
    return (
      <Drawer {...openProp}>
        <DrawerTrigger asChild>
          <Button variant="primary">Open Drawer with Long Content</Button>
        </DrawerTrigger>
        <DrawerContent className="max-h-[85%]">
          <div className="overflow-y-auto">
            <DrawerHandle />
            <DrawerHeader>
              <DrawerTitle>Terms and Conditions</DrawerTitle>
              <DrawerDescription className="text-center">
                Please read our terms and conditions carefully.
              </DrawerDescription>
            </DrawerHeader>
            <div className="p-6">
              <Typography variant="body-s">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </Typography>
            </div>
            <DrawerFooter>
              <Button>Accept</Button>
              <DrawerClose asChild>
                <Button variant="ghost">Decline</Button>
              </DrawerClose>
            </DrawerFooter>
          </div>
        </DrawerContent>
      </Drawer>
    )
  },
}