import type { Meta, StoryObj } from "@storybook/react"
import { Indicator, Input, Root, Toggle } from "./input-password-primitive"

/**
 * The InputPasswordPrimitive provides low-level components for building password input interfaces
 * with show/hide password functionality.
 */
const meta = {
  title: "base/form/InputPasswordPrimitive",
  component: Root,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
} satisfies Meta<typeof Root>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Basic implementation of the password primitive with toggle functionality.
 */
export const Default: Story = {
  render: args => (
    <div className="w-80">
      <Root {...args}>
        <div className="relative flex items-center border rounded-md">
          <Input
            className="w-full px-3 py-2 border-none focus:outline-none"
            placeholder="Enter password"
          />
          <Toggle className="absolute right-2 px-2 py-1 text-sm bg-transparent">Show/Hide</Toggle>
        </div>
      </Root>
    </div>
  ),
}

/**
 * Using the Indicator component to show custom content based on visibility state.
 */
export const WithIndicator: Story = {
  render: args => (
    <div className="w-80">
      <Root {...args}>
        <div className="relative flex items-center border rounded-md">
          <Input
            className="w-full px-3 py-2 border-none focus:outline-none"
            placeholder="Enter password"
          />
          <div className="absolute right-2 flex items-center">
            <Indicator className="mr-2">
              <span data-visible>Password visible</span>
              <span data-hidden>Password hidden</span>
            </Indicator>
            <Toggle className="px-2 py-1 text-sm bg-transparent">Toggle</Toggle>
          </div>
        </div>
        <style>
          {`
          [data-state="visible"] [data-visible] {
            display: inline;
          }
          [data-state="hidden"] [data-visible] {
            display: none;
          }
          [data-state="visible"] [data-hidden] {
            display: none;
          }
          [data-state="hidden"] [data-hidden] {
            display: inline;
          }
          `}
        </style>
      </Root>
    </div>
  ),
}

/**
 * Custom styled version with icons for toggle state.
 */
export const CustomStyledToggle: Story = {
  render: args => (
    <div className="w-80">
      <Root {...args}>
        <div className="relative flex items-center overflow-hidden rounded-md border">
          <Input
            className="w-full px-3 py-2 border-none focus:outline-none"
            placeholder="Enter password"
          />
          <Toggle className="absolute right-0 flex items-center justify-center w-10 h-full bg-gray-100">
            <Indicator>
              <svg
                data-visible
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <title>Eye Open Icon</title>
                <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
                <circle cx="12" cy="12" r="3" />
              </svg>
              <svg
                data-hidden
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <title>Eye Closed Icon</title>
                <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
                <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
                <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
                <line x1="2" x2="22" y1="2" y2="22" />
              </svg>
            </Indicator>
          </Toggle>
        </div>
        <style>
          {`
          [data-state="visible"] [data-visible] {
            display: block;
          }
          [data-state="hidden"] [data-visible] {
            display: none;
          }
          [data-state="visible"] [data-hidden] {
            display: none;
          }
          [data-state="hidden"] [data-hidden] {
            display: block;
          }
          `}
        </style>
      </Root>
    </div>
  ),
}

/**
 * Password input with controlled visibility state.
 */
export const ControlledVisibility: Story = {
  args: {
    visible: true,
  },
  render: args => (
    <div className="w-80">
      <Root {...args} onVisibleChange={visible => console.log("Visibility changed:", visible)}>
        <div className="relative flex items-center border rounded-md">
          <Input
            className="w-full px-3 py-2 border-none focus:outline-none"
            placeholder="Enter password"
          />
          <Toggle className="absolute right-2 px-2 py-1 text-sm bg-transparent">
            {args.visible ? "Hide" : "Show"}
          </Toggle>
        </div>
      </Root>
      <div className="mt-2 text-sm">
        Password is currently {args.visible ? "visible" : "hidden"}
      </div>
    </div>
  ),
}

/**
 * Demonstrating the password input with initial default visible state.
 */
export const DefaultVisible: Story = {
  args: {
    defaultVisible: true,
  },
  render: args => (
    <div className="w-80">
      <Root {...args}>
        <div className="relative flex items-center border rounded-md">
          <Input
            className="w-full px-3 py-2 border-none focus:outline-none"
            placeholder="Enter password (initially visible)"
            value="InitialVisiblePassword"
            readOnly
          />
          <Toggle className="absolute right-2 px-2 py-1 text-sm bg-transparent">Toggle</Toggle>
        </div>
      </Root>
      <div className="mt-2 text-xs text-gray-500">
        Note: This password is set to be visible by default
      </div>
    </div>
  ),
}