import { PencilSimpleRegularIcon } from "alouette-icons/phosphor-icons/PencilSimple";
import type { ReactNode } from "react";
import type { Accent } from "../../core/AlouetteConfig";
import type { IconButtonProps } from "../actions/IconButton";
import { IconButton } from "../actions/IconButton";
import type { SVGIconElement } from "../primitives/Icon";
import { Text } from "../primitives/Text";
import { View } from "../primitives/View";

export interface EditableItemProps {
  label: string;
  /** Current value shown next to the label — a Badge, a Text, anything short. */
  summary?: ReactNode;
  /** Muted helper text under the label. */
  details?: ReactNode;
  /** Names the edit button for assistive tech — it has no visible text. */
  editAriaLabel: string;
  editIcon?: SVGIconElement;
  variant?: IconButtonProps["variant"];
  accent?: Accent;
  disabled?: boolean;
  onEdit: () => void;
  /** Rendered under the row, when the value is too large for `summary`. */
  children?: ReactNode;
}

/**
 * A labelled value with an edit affordance. Owns no editor: pair it with
 * FormEditableItem for a react-hook-form modal, or compose your own Modal
 * from `onEdit`.
 */
export function EditableItem({
  label,
  summary,
  details,
  editAriaLabel,
  editIcon = <PencilSimpleRegularIcon />,
  variant,
  accent,
  disabled,
  onEdit,
  children,
}: EditableItemProps): ReactNode {
  return (
    <View className="gap-xs">
      <View className="flex-row items-center justify-between gap-sm">
        <View className="shrink">
          <View className="flex-row items-center gap-sm">
            <Text className="font-body-bold text-base">{label}</Text>
            {summary}
          </View>
          {details ? (
            <Text className="text-muted text-sm">{details}</Text>
          ) : null}
        </View>
        <IconButton
          size="sm"
          icon={editIcon}
          variant={variant}
          accent={accent}
          disabled={disabled}
          aria-label={editAriaLabel}
          onPress={onEdit}
        />
      </View>
      {children}
    </View>
  );
}