import React from "react";
import type { ReactElement, ReactNode } from "react";
import { View } from "react-native";
import { useStyles } from "./SelectItem.style";
import { SelectPrimitive } from "../../primitives/Select";
import { Icon } from "../../Icon";

export interface SelectItemProps {
  /** The option's value. */
  readonly value: string;
  /** The option's label — rendered as the row text and used as the value label. */
  readonly label: string;
  /** Disables selection and greys the label. */
  readonly disabled?: boolean;
  /** Close the dropdown when this option is pressed (default behaviour). */
  readonly closeOnPress?: boolean;
  /** Leading content, before the label — typically a `Select.ItemPrefix`. */
  readonly prefix?: ReactNode;
  /** Trailing content, after the label — typically a `Select.ItemSuffix`. */
  readonly suffix?: ReactNode;
  /** Overrides the default checkmark marker shown on the selected row. */
  readonly indicator?: ReactNode;
}

/**
 * An option row. Auto-composes the label + a default checkmark from its
 * `value` / `label` / `disabled` props, and places the `prefix` / `suffix` slot
 * content around the label (prefix → label → suffix → marker). `indicator`
 * overrides the default checkmark; `disabled` greys the label and blocks
 * selection.
 */
export function SelectItem({
  value,
  label,
  disabled,
  closeOnPress,
  prefix,
  suffix,
  indicator,
}: SelectItemProps): ReactElement {
  return (
    <SelectPrimitive.Item
      value={value}
      label={label}
      disabled={disabled}
      closeOnPress={closeOnPress}
    >
      {prefix}
      <SelectPrimitive.ItemText disabled={disabled} />
      {suffix}
      <SelectPrimitive.ItemIndicator>
        {indicator ?? <Icon name="checkmark" />}
      </SelectPrimitive.ItemIndicator>
    </SelectPrimitive.Item>
  );
}

export interface SelectItemSlotProps {
  readonly children?: ReactNode;
}

/** Styled leading slot — pass to `Select.Item`'s `prefix` prop. */
export function SelectItemPrefix({
  children,
}: SelectItemSlotProps): ReactElement {
  const styles = useStyles();

  return <View style={styles.slot}>{children}</View>;
}

/** Styled trailing slot — pass to `Select.Item`'s `suffix` prop. */
export function SelectItemSuffix({
  children,
}: SelectItemSlotProps): ReactElement {
  const styles = useStyles();

  return <View style={styles.slot}>{children}</View>;
}