import { useState } from "react";
import { ViewCartButton } from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof ViewCartButton> = {
  title: "Components/ViewCartButton",
  component: ViewCartButton,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A button component for viewing cart contents with total price display and open/closed states.",
      },
    },
  },
  argTypes: {
    cartTotalText: {
      control: { type: "text" },
      description: "Text displaying the cart total",
    },
    isOpen: {
      control: { type: "boolean" },
      description: "Whether the cart is open",
    },
    onClick: {
      action: "clicked",
      description: "Callback function when button is clicked",
    },
  },
  args: {
    cartTotalText: "$99.99",
    isOpen: false,
    onClick: () => {},
  },
};

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

// Default button
export const Default: Story = {
  args: {},
};

// With cart total
export const WithCartTotal: Story = {
  args: {
    cartTotalText: "$149.99",
  },
};

// Open state
export const Open: Story = {
  args: {
    cartTotalText: "$99.99",
    isOpen: true,
  },
};

// Closed state
export const Closed: Story = {
  args: {
    cartTotalText: "$99.99",
    isOpen: false,
  },
};

// Interactive state
export const Interactive: Story = {
  render: () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
      <div className="max-w-md w-full">
        <ViewCartButton
          cartTotalText="$149.99"
          isOpen={isOpen}
          onClick={() => setIsOpen(!isOpen)}
        />
        {isOpen && (
          <div className="bg-surface-secondary mt-4 rounded p-4">
            <p className="body2 text-text">Cart is open</p>
          </div>
        )}
      </div>
    );
  },
  parameters: {
    docs: {
      description: {
        story:
          "Interactive ViewCartButton that toggles open/closed state on click.",
      },
    },
  },
};

// Different totals
export const DifferentTotals: Story = {
  render: () => (
    <div className="max-w-md w-full space-y-3">
      <ViewCartButton cartTotalText="$0.00" isOpen={false} onClick={() => {}} />
      <ViewCartButton
        cartTotalText="$29.99"
        isOpen={false}
        onClick={() => {}}
      />
      <ViewCartButton
        cartTotalText="$99.99"
        isOpen={false}
        onClick={() => {}}
      />
      <ViewCartButton
        cartTotalText="$249.99"
        isOpen={false}
        onClick={() => {}}
      />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "ViewCartButton with different cart total values.",
      },
    },
  },
};

// Responsive behavior
export const Responsive: Story = {
  render: () => (
    <div className="space-y-8">
      <div>
        <h3 className="mb-2 text-sm font-medium text-gray-600">
          Mobile View (btn-small)
        </h3>
        <div className="w-64 border border-gray-200 p-2">
          <ViewCartButton
            cartTotalText="$99.99"
            isOpen={false}
            onClick={() => {}}
          />
        </div>
      </div>
      <div>
        <h3 className="mb-2 text-sm font-medium text-gray-600">
          Desktop View (btn-medium)
        </h3>
        <div className="max-w-md w-full border border-gray-200 p-2">
          <ViewCartButton
            cartTotalText="$99.99"
            isOpen={false}
            onClick={() => {}}
          />
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "ViewCartButton adapts its size responsively - smaller on mobile, larger on desktop.",
      },
    },
  },
};

// Open and closed states
export const OpenAndClosed: Story = {
  render: () => (
    <div className="max-w-md w-full space-y-4">
      <div>
        <h4 className="mb-2 text-sm font-medium">Closed State</h4>
        <ViewCartButton
          cartTotalText="$99.99"
          isOpen={false}
          onClick={() => {}}
        />
      </div>
      <div>
        <h4 className="mb-2 text-sm font-medium">Open State</h4>
        <ViewCartButton
          cartTotalText="$99.99"
          isOpen={true}
          onClick={() => {}}
        />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "ViewCartButton in both open and closed states.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="max-w-2xl w-full space-y-6">
      <div>
        <h3 className="mb-3 text-lg font-semibold">States</h3>
        <div className="space-y-3">
          <ViewCartButton
            cartTotalText="$99.99"
            isOpen={false}
            onClick={() => {}}
          />
          <ViewCartButton
            cartTotalText="$99.99"
            isOpen={true}
            onClick={() => {}}
          />
        </div>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Different Totals</h3>
        <div className="space-y-3">
          <ViewCartButton
            cartTotalText="$0.00"
            isOpen={false}
            onClick={() => {}}
          />
          <ViewCartButton
            cartTotalText="$29.99"
            isOpen={false}
            onClick={() => {}}
          />
          <ViewCartButton
            cartTotalText="$149.99"
            isOpen={false}
            onClick={() => {}}
          />
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all ViewCartButton variants and states.",
      },
    },
  },
};