import React from "react";
import { View } from "react-native";
import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import {
  ActivityIndicator,
  Text,
  useAtlantisTheme,
} from "@jobber/components-native";
import { ActivityIndicatorBasicExample } from "./docs";

const meta = {
  title: "Components/Status and Feedback/ActivityIndicator",
  component: ActivityIndicator,
  parameters: {
    viewport: { defaultViewport: "mobile1" },
  },
} satisfies Meta<typeof ActivityIndicator>;
export default meta;
type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  render: ActivityIndicatorBasicExample,
  args: {
    size: "base",
  },
};

export const Small: Story = {
  render: () => <ActivityIndicator size="small" />,
};

export const CustomAccessibilityLabel: Story = {
  render: () => <ActivityIndicator accessibilityLabel="Uploading file" />,
};

/**
 * The track ring uses `color-surface--active`, which is designed to read as
 * a muted tint of the surface beneath it. This story renders the indicator
 * on each of the standard application surfaces so the contrast between the
 * track and its background can be reviewed at a glance.
 */
export const OnSurfaces: Story = {
  render: () => <OnSurfacesExample />,
};

function OnSurfacesExample() {
  const { tokens } = useAtlantisTheme();
  const surfaces = [
    { token: "color-surface", label: "surface" },
    { token: "color-surface--background", label: "surface--background" },
    {
      token: "color-surface--background--subtle",
      label: "surface--background--subtle",
    },
  ] as const;

  return (
    <View style={{ gap: tokens["space-base"] }}>
      {surfaces.map(({ token, label }) => (
        <View
          key={token}
          style={{
            backgroundColor: tokens[token],
            padding: tokens["space-large"],
            gap: tokens["space-small"],
          }}
        >
          <Text>{label}</Text>
          <ActivityIndicator size="base" />
        </View>
      ))}
    </View>
  );
}

/**
 * The reduced-motion presentation is driven by the OS-level
 * "Reduce Motion" setting, not a Storybook control. To preview it:
 *
 *   • iOS Simulator: Features → Toggle Reduce Motion
 *   • iOS device: Settings → Accessibility → Motion → Reduce Motion
 *   • Android emulator: Settings → Accessibility → Remove animations
 *   • Storybook (react-native-web): emulate via your browser's DevTools
 *     Rendering pane → "Emulate CSS media feature prefers-reduced-motion"
 *
 * The component will hide the rocking arcs and render a single static
 * ring in `color-text--secondary` whose opacity pulses between 1.0 and 0.35
 * over a 2-second alternate cycle.
 */
export const ReducedMotion: Story = {
  render: () => <ActivityIndicator />,
};