import { Children, type ReactNode } from "react";
import { Platform } from "react-native";
import { tv } from "../../core/tv";
import { View } from "../primitives/View";
import { StoryTitle } from "./StoryTitle";

const rowVariants = tv({
  base: "flex-col",
  variants: {
    breakpoint: {
      small: "sm:flex-row sm:mb-xl",
      medium: "md:flex-row md:mb-xl",
    },
    flexWrap: { true: "" },
  },
  compoundVariants: [
    { breakpoint: "small", flexWrap: true, class: "sm:flex-wrap sm:gap-m" },
    { breakpoint: "medium", flexWrap: true, class: "md:flex-wrap md:gap-m" },
  ],
});

const itemVariants = tv({
  base: "pt-m pb-xl",
  variants: {
    breakpoint: {
      small: "sm:pt-0 sm:pb-0 sm:my-xxs shrink",
      medium: "md:pt-0 md:pb-0 md:my-xxs shrink",
    },
    flexWrap: {
      true: "",
      false: "",
    },
    loose: {
      true: "",
      false: "grow",
    },
  },
  compoundVariants: [
    { breakpoint: "small", flexWrap: false, class: "sm:basis-0" },
    { breakpoint: "medium", flexWrap: false, class: "md:basis-0" },
  ],
  defaultVariants: {
    flexWrap: false,
  },
});

export interface StoryGridRowProps {
  children: NonNullable<ReactNode>;
  breakpoint?: "medium" | "small";
  flexWrap?: boolean;
  loose?: boolean;
}

function StoryGridRow({
  children,
  breakpoint = "small",
  flexWrap,
  loose,
}: StoryGridRowProps): ReactNode {
  return (
    <View className={rowVariants({ breakpoint, flexWrap })}>
      {Children.map(children, (child) => (
        <View className={itemVariants({ breakpoint, flexWrap, loose })}>
          {child}
        </View>
      ))}
    </View>
  );
}

export interface StoryGridColProps {
  children: NonNullable<ReactNode>;
  title?: string;
  platform?: "all" | "native" | "web";
}

function StoryGridCol({
  title,
  children,
  platform = "all",
}: StoryGridColProps): ReactNode {
  const isNative = Platform.OS === "ios" || Platform.OS === "android";

  if (Platform.OS === "web" && platform === "native") {
    return null;
  }
  if (isNative && platform === "web") {
    return null;
  }

  return title ? (
    <View>
      <StoryTitle level={4} numberOfLines={1}>
        {title}
      </StoryTitle>
      {children}
    </View>
  ) : (
    children
  );
}

/**
 * Column title for a state grid. A forced `focus` is the keyboard focus, so it
 * reads `focus-visible`: a mouse click never shows that state.
 */
export function stateTitle(state: string | undefined): string {
  if (state === undefined) return "Default";
  if (state === "focus") return "focus-visible";
  return state;
}

export const StoryGrid = {
  Row: StoryGridRow,
  Col: StoryGridCol,
};