import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import React from "react";
import { View } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { PortalHost } from "@rn-primitives/portal";
import { useRootContext } from "@rn-primitives/select";
import { SelectPrimitive } from "./SelectPrimitive";
import { Text } from "../../Text";
import { Icon } from "../../Icon";

const meta = {
  title: "Components/Primitives/SelectPrimitive",
  component: SelectPrimitive.Root,
  parameters: {
    viewport: { defaultViewport: "mobile1" },
  },
  decorators: [
    (Story: React.ComponentType) => (
      <>
        <SafeAreaProvider>
          <View style={{ width: 320, padding: 16, minHeight: 480 }}>
            <Story />
          </View>
        </SafeAreaProvider>
        <PortalHost />
      </>
    ),
  ],
} satisfies Meta<typeof SelectPrimitive.Root>;
export default meta;
type Story = StoryObj<typeof meta>;

const CITIES = [
  { value: "tor", label: "Toronto" },
  { value: "van", label: "Vancouver" },
  { value: "edm", label: "Edmonton" },
  { value: "wpg", label: "Winnipeg" },
  { value: "hal", label: "Halifax" },
];

/** Composes an option row from the styled `ItemText` + `ItemIndicator` parts. */
function Option({
  value,
  label,
  disabled,
}: {
  readonly value: string;
  readonly label: string;
  readonly disabled?: boolean;
}) {
  return (
    <SelectPrimitive.Item value={value} label={label} disabled={disabled}>
      <SelectPrimitive.ItemText disabled={disabled} />
      <SelectPrimitive.ItemIndicator>
        <Icon name="checkmark" />
      </SelectPrimitive.ItemIndicator>
    </SelectPrimitive.Item>
  );
}

function CityItems() {
  return (
    <>
      {CITIES.map(city => (
        <Option key={city.value} value={city.value} label={city.label} />
      ))}
    </>
  );
}

/** Composes the raw overlay parts (`Portal > Overlay + Content > Viewport`). */
function Dropdown({ children }: { readonly children: React.ReactNode }) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Overlay />
      <SelectPrimitive.Content>
        <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  );
}

/**
 * A trailing chevron composed onto the trigger. The primitive owns no chevron —
 * the icon and its open-state rotation are composed here (this is what the
 * sugared `Select` will do), reading `open` from the primitive root context.
 */
function Chevron() {
  const { open } = useRootContext();

  return (
    <View style={{ transform: [{ rotate: open ? "180deg" : "0deg" }] }}>
      <Icon name="arrowDown" color="iconSecondary" />
    </View>
  );
}

/** Composes the trigger: the value plus a composed, rotating chevron. */
function TriggerField({
  placeholder,
  invalid,
}: {
  readonly placeholder: string;
  readonly invalid?: boolean;
}) {
  return (
    <SelectPrimitive.Trigger invalid={invalid}>
      <SelectPrimitive.Value placeholder={placeholder} />
      <Chevron />
    </SelectPrimitive.Trigger>
  );
}

function StateRow({
  caption,
  children,
}: {
  readonly caption: string;
  readonly children: React.ReactNode;
}) {
  return (
    <View style={{ gap: 4 }}>
      <Text level="textSupporting" variation="subdued">
        {caption}
      </Text>
      {children}
    </View>
  );
}

export const Basic: Story = {
  render: () => (
    <SelectPrimitive.Root>
      <TriggerField placeholder="Select an option" />
      <Dropdown>
        <CityItems />
      </Dropdown>
    </SelectPrimitive.Root>
  ),
};

export const WithSelection: Story = {
  render: () => (
    <SelectPrimitive.Root defaultValue={{ value: "van", label: "Vancouver" }}>
      <TriggerField placeholder="Select an option" />
      <Dropdown>
        <CityItems />
      </Dropdown>
    </SelectPrimitive.Root>
  ),
};

export const GroupsAndSeparator: Story = {
  render: () => (
    <SelectPrimitive.Root>
      <TriggerField placeholder="Select a city" />
      <Dropdown>
        <SelectPrimitive.Group>
          <SelectPrimitive.Label>West</SelectPrimitive.Label>
          <Option value="van" label="Vancouver" />
          <Option value="edm" label="Edmonton" />
        </SelectPrimitive.Group>
        <SelectPrimitive.Separator />
        <SelectPrimitive.Group>
          <SelectPrimitive.Label>East</SelectPrimitive.Label>
          <Option value="tor" label="Toronto" />
          <Option value="hal" label="Halifax" />
        </SelectPrimitive.Group>
      </Dropdown>
    </SelectPrimitive.Root>
  ),
};

export const DisabledOption: Story = {
  render: () => (
    <SelectPrimitive.Root>
      <TriggerField placeholder="Select an option" />
      <Dropdown>
        <Option value="tor" label="Toronto" />
        <Option value="van" label="Vancouver" disabled />
        <Option value="edm" label="Edmonton" />
      </Dropdown>
    </SelectPrimitive.Root>
  ),
};

export const TriggerStates: Story = {
  render: () => (
    <View style={{ gap: 24 }}>
      <StateRow caption="Default — tap to open">
        <SelectPrimitive.Root>
          <TriggerField placeholder="Select an option" />
          <Dropdown>
            <CityItems />
          </Dropdown>
        </SelectPrimitive.Root>
      </StateRow>

      <StateRow caption="Critical (invalid) — tap to open">
        <SelectPrimitive.Root>
          <TriggerField placeholder="Select an option" invalid />
          <Dropdown>
            <CityItems />
          </Dropdown>
        </SelectPrimitive.Root>
      </StateRow>

      <StateRow caption="Disabled — non-interactive, greyed chevron">
        <SelectPrimitive.Root
          disabled
          defaultValue={{ value: "tor", label: "Toronto" }}
        >
          <TriggerField placeholder="Select an option" />
          <Dropdown>
            <CityItems />
          </Dropdown>
        </SelectPrimitive.Root>
      </StateRow>
    </View>
  ),
};