// @ts-nocheck
import type { Meta, StoryObj } from "@storybook/react";
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { ZName } from "./react-native";

const meta = {
  title: "ZName/ReactNative",
  component: ZName,
  parameters: {
    layout: "padded",
  },
  tags: ["autodocs"],
  argTypes: {
    name: {
      control: "select",
      options: [
        "base",
        "dropdown",
        "header",
        "sidebar",
        "overlay",
        "modal",
        "notification",
        "tooltip",
      ],
    },
    zIndex: {
      control: "number",
    },
  },
} satisfies Meta<typeof ZName>;

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

const Box = ({ color, label }: { color: string; label: string }) => (
  <View style={[styles.box, { backgroundColor: color }]}>
    <Text style={styles.text}>{label}</Text>
  </View>
);

export const Default: Story = {
  args: {
    name: "modal",
    children: <Box color="#8e44ad" label="Modal Layer" />,
  },
};

export const LayersDemo: Story = {
  render: () => (
    <View style={styles.container}>
      <ZName name="base">
        <Box color="#e74c3c" label="Base (z=1)" />
      </ZName>
      <ZName name="dropdown" style={styles.offset1}>
        <Box color="#e67e22" label="Dropdown (z=11)" />
      </ZName>
      <ZName name="header" style={styles.offset2}>
        <Box color="#f1c40f" label="Header (z=21)" />
      </ZName>
      <ZName name="sidebar" style={styles.offset3}>
        <Box color="#2ecc71" label="Sidebar (z=31)" />
      </ZName>
      <ZName name="overlay" style={styles.offset4}>
        <Box color="#3498db" label="Overlay (z=41)" />
      </ZName>
      <ZName name="modal" style={styles.offset5}>
        <Box color="#9b59b6" label="Modal (z=51)" />
      </ZName>
      <ZName name="notification" style={styles.offset6}>
        <Box color="#34495e" label="Notification (z=61)" />
      </ZName>
      <ZName name="tooltip" style={styles.offset7}>
        <Box color="#16a085" label="Tooltip (z=71)" />
      </ZName>
    </View>
  ),
};

export const CustomZIndex: Story = {
  args: {
    name: "modal",
    zIndex: 999,
    children: <Box color="#e74c3c" label="Custom z-index (999)" />,
  },
};

export const WithCustomConfig: Story = {
  render: () => (
    <View style={styles.container}>
      <ZName name="modal" config={{ base: 100, step: 100 }}>
        <Box color="#3498db" label="Modal with custom config (z=600)" />
      </ZName>
    </View>
  ),
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: "relative",
    minHeight: 400,
  },
  box: {
    padding: 20,
    borderRadius: 8,
    position: "absolute",
    minWidth: 200,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  text: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
  offset1: { position: "absolute", top: 20, left: 20 },
  offset2: { position: "absolute", top: 40, left: 40 },
  offset3: { position: "absolute", top: 60, left: 60 },
  offset4: { position: "absolute", top: 80, left: 80 },
  offset5: { position: "absolute", top: 100, left: 100 },
  offset6: { position: "absolute", top: 120, left: 120 },
  offset7: { position: "absolute", top: 140, left: 140 },
});