/**
 * SkeletonFormField component.
 *
 * A placeholder for form inputs and text fields showing a pulsing skeleton that
 * matches the height and width of actual input fields. Used during form data load.
 */

import {
  makeStyles,
  tokens,
} from "@fluentui/react-components";

// ---------------------------------------------------------------------------
// Styles
// ---------------------------------------------------------------------------

const useStyles = makeStyles({
  skeletonField: {
    display: "flex",
    flexDirection: "column",
    gap: tokens.spacingVerticalS,
  },
  label: {
    height: "14px",
    width: "30%",
    backgroundColor: tokens.colorNeutralBackground1Hover,
    borderRadius: tokens.borderRadiusSmall,
    animation: "skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
  },
  input: {
    height: "32px",
    width: "100%",
    backgroundColor: tokens.colorNeutralBackground1Hover,
    borderRadius: tokens.borderRadiusSmall,
    animation: "skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
  },
});

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

interface SkeletonFormFieldProps {
  /** Whether to show the label placeholder. Defaults to true. */
  showLabel?: boolean;
  /** Height of the input in pixels. Defaults to 32 (standard input height). */
  inputHeight?: number;
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

/**
 * Render a skeleton form field with animated pulsing placeholder.
 *
 * @example
 * ```tsx
 * <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
 *   <SkeletonFormField />
 *   <SkeletonFormField />
 * </div>
 * ```
 */
export function SkeletonFormField({ showLabel = true, inputHeight = 32 }: SkeletonFormFieldProps): React.JSX.Element {
  const styles = useStyles();

  return (
    <div className={styles.skeletonField} role="presentation">
      {showLabel && <div className={styles.label} aria-hidden="true" />}
      <div
        className={styles.input}
        style={{ height: `${String(inputHeight)}px` }}
        aria-hidden="true"
      />
    </div>
  );
}
