import { iconNameList } from "./constants";
import { MaterialIcon } from "./index";

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

const meta: Meta<typeof MaterialIcon> = {
  title: "Components/MaterialIcon",
  component: MaterialIcon,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "Material Design icon component with customizable size, color, and styling.",
      },
    },
  },
  argTypes: {
    name: {
      control: { type: "select" },
      options: iconNameList,
      description: "Material icon name",
    },
    size: {
      control: { type: "select" },
      options: [20, 24, 32, 40, 48],
      description: "Icon size",
    },
    weight: {
      control: { type: "select" },
      options: [100, 200, 300, 400, 500, 600, 700],
      description: "Icon weight",
    },
    color: {
      control: { type: "color" },
      description: "Icon color",
    },
    className: {
      control: { type: "text" },
      description: "Additional CSS classes",
    },
  },
  args: {
    name: "home",
    size: 24,
  },
};

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

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

// Different sizes
export const Sizes: Story = {
  render: () => (
    <div className="flex items-center gap-6">
      <div className="text-center">
        <MaterialIcon name="home" size={20} />
        <p className="mt-1 text-xs">20px</p>
      </div>
      <div className="text-center">
        <MaterialIcon name="home" size={24} />
        <p className="mt-1 text-xs">24px</p>
      </div>
      <div className="text-center">
        <MaterialIcon name="home" size={40} />
        <p className="mt-1 text-xs">40px</p>
      </div>
      <div className="text-center">
        <MaterialIcon name="home" size={48} />
        <p className="mt-1 text-xs">48px</p>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "All available icon sizes.",
      },
    },
  },
};

// Common icons
export const CommonIcons: Story = {
  render: () => (
    <div className="grid grid-cols-4 gap-4">
      <div className="rounded-lg border p-4 text-center">
        <MaterialIcon name="home" size={40} />
        <p className="mt-2 text-sm">home</p>
      </div>
      <div className="rounded-lg border p-4 text-center">
        <MaterialIcon name="search" size={40} />
        <p className="mt-2 text-sm">search</p>
      </div>
      <div className="rounded-lg border p-4 text-center">
        <MaterialIcon name="check" size={40} />
        <p className="mt-2 text-sm">check</p>
      </div>
      <div className="rounded-lg border p-4 text-center">
        <MaterialIcon name="settings" size={40} />
        <p className="mt-2 text-sm">settings</p>
      </div>
      <div className="rounded-lg border p-4 text-center">
        <MaterialIcon name="groups" size={40} />
        <p className="mt-2 text-sm">groups</p>
      </div>
      <div className="rounded-lg border p-4 text-center">
        <MaterialIcon name="mail" size={40} />
        <p className="mt-2 text-sm">mail</p>
      </div>
      <div className="rounded-lg border p-4 text-center">
        <MaterialIcon name="call" size={40} />
        <p className="mt-2 text-sm">call</p>
      </div>
      <div className="rounded-lg border p-4 text-center">
        <MaterialIcon name="info" size={40} />
        <p className="mt-2 text-sm">info</p>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Common Material Design icons.",
      },
    },
  },
};

// Colored icons
export const ColoredIcons: Story = {
  render: () => (
    <div className="grid grid-cols-4 gap-4">
      <div className="text-center">
        <MaterialIcon name="check" size={40} color="#ef4444" />
        <p className="mt-2 text-sm text-red-500">Red</p>
      </div>
      <div className="text-center">
        <MaterialIcon name="check_circle" size={40} color="#10b981" />
        <p className="mt-2 text-sm text-green-500">Green</p>
      </div>
      <div className="text-center">
        <MaterialIcon name="info" size={40} color="#3b82f6" />
        <p className="mt-2 text-sm text-blue-500">Blue</p>
      </div>
      <div className="text-center">
        <MaterialIcon name="error" size={40} color="#f59e0b" />
        <p className="mt-2 text-sm text-yellow-500">Yellow</p>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Icons with different colors.",
      },
    },
  },
};

// Icon with text
export const IconWithText: Story = {
  render: () => (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <MaterialIcon name="mail" />
        <span>Email notifications</span>
      </div>
      <div className="flex items-center gap-2">
        <MaterialIcon name="call" />
        <span>Phone support</span>
      </div>
      <div className="flex items-center gap-2">
        <MaterialIcon name="forum" />
        <span>Live chat</span>
      </div>
      <div className="flex items-center gap-2">
        <MaterialIcon name="help" />
        <span>Help center</span>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Icons used alongside text content.",
      },
    },
  },
};

// Interactive icons
export const InteractiveIcons: Story = {
  render: () => (
    <div className="grid grid-cols-3 gap-4">
      <button className="rounded-lg border p-3 transition-colors hover:bg-gray-50">
        <MaterialIcon name="check_box_outline_blank" size={40} />
        <p className="mt-2 text-sm">Like</p>
      </button>
      <button className="rounded-lg border p-3 transition-colors hover:bg-gray-50">
        <MaterialIcon name="share" size={40} />
        <p className="mt-2 text-sm">Share</p>
      </button>
      <button className="rounded-lg border p-3 transition-colors hover:bg-gray-50">
        <MaterialIcon name="check" size={40} />
        <p className="mt-2 text-sm">Bookmark</p>
      </button>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Interactive icon buttons.",
      },
    },
  },
};

// Status icons
export const StatusIcons: Story = {
  render: () => (
    <div className="grid grid-cols-4 gap-4">
      <div className="text-center">
        <MaterialIcon name="check_circle" size={40} />
        <p className="mt-2 text-sm text-green-600">Success</p>
      </div>
      <div className="text-center">
        <MaterialIcon name="error" size={40} />
        <p className="mt-2 text-sm text-red-600">Error</p>
      </div>
      <div className="text-center">
        <MaterialIcon name="error" size={40} />
        <p className="mt-2 text-sm text-yellow-600">Warning</p>
      </div>
      <div className="text-center">
        <MaterialIcon name="info" size={40} />
        <p className="mt-2 text-sm text-blue-600">Info</p>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Status and feedback icons.",
      },
    },
  },
};

// All sizes showcase
export const AllSizes: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Icon Sizes</h3>
        <div className="flex items-center gap-6">
          <div className="text-center">
            <MaterialIcon name="check" size={20} />
            <p className="mt-1 text-xs">Small</p>
          </div>
          <div className="text-center">
            <MaterialIcon name="check" size={24} />
            <p className="mt-1 text-xs">Medium</p>
          </div>
          <div className="text-center">
            <MaterialIcon name="check" size={40} />
            <p className="mt-1 text-xs">Large</p>
          </div>
          <div className="text-center">
            <MaterialIcon name="check" size={48} />
            <p className="mt-1 text-xs">XLarge</p>
          </div>
        </div>
      </div>

      <div>
        <h3 className="mb-3 text-lg font-semibold">Common Icons</h3>
        <div className="grid grid-cols-6 gap-4">
          <div className="text-center">
            <MaterialIcon name="home" />
            <p className="mt-1 text-xs">home</p>
          </div>
          <div className="text-center">
            <MaterialIcon name="search" />
            <p className="mt-1 text-xs">search</p>
          </div>
          <div className="text-center">
            <MaterialIcon name="check" />
            <p className="mt-1 text-xs">check</p>
          </div>
          <div className="text-center">
            <MaterialIcon name="settings" />
            <p className="mt-1 text-xs">settings</p>
          </div>
          <div className="text-center">
            <MaterialIcon name="groups" />
            <p className="mt-1 text-xs">groups</p>
          </div>
          <div className="text-center">
            <MaterialIcon name="mail" />
            <p className="mt-1 text-xs">mail</p>
          </div>
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Complete showcase of all icon sizes and common icons.",
      },
    },
  },
};