/**
 * ContainerBackgroundTab Component
 *
 * Tab content for container background settings (color, image, size, position, repeat).
 * Supports both compact (floating) and non-compact (sidebar) modes.
 */

import type { ContainerSettings } from "@/types";
import { ColorPicker, Select, MediaPicker } from "../ui";
import type { MediaAttachment } from "../ui";

// Background size options
const BACKGROUND_SIZE_OPTIONS = [
  { value: "cover", label: "Cover" },
  { value: "contain", label: "Contain" },
  { value: "auto", label: "Auto" },
];

// Background position options
const BACKGROUND_POSITION_OPTIONS = [
  { value: "center", label: "Center" },
  { value: "top", label: "Top" },
  { value: "bottom", label: "Bottom" },
  { value: "left", label: "Left" },
  { value: "right", label: "Right" },
];

// Background repeat options
const BACKGROUND_REPEAT_OPTIONS = [
  { value: "no-repeat", label: "No Repeat" },
  { value: "repeat", label: "Repeat" },
  { value: "repeat-x", label: "Repeat X" },
  { value: "repeat-y", label: "Repeat Y" },
];

interface ContainerBackgroundTabProps {
  /** Container settings */
  containerSettings: ContainerSettings;
  /** Called when settings change */
  onUpdate: (updates: Partial<ContainerSettings>) => void;
  /** Use compact styling for floating panels */
  compact?: boolean;
}

export function ContainerBackgroundTab({ containerSettings, onUpdate, compact = true }: ContainerBackgroundTabProps) {
  const sectionClass = compact ? "floating-settings__section floating-settings__section--scrollable" : "settings-section";
  const groupClass = compact ? "floating-settings__group" : "settings-group";
  const labelClass = compact ? "floating-settings__label mb-2" : "settings-label mb-2";

  const handleBackgroundImageSelect = (attachment: MediaAttachment) => {
    onUpdate({
      backgroundImage: attachment.url,
      backgroundImageId: attachment.id,
    });
  };

  const handleBackgroundImageRemove = () => {
    onUpdate({
      backgroundImage: null,
      backgroundImageId: null,
    });
  };

  return (
    <div className={sectionClass}>
      {/* Background Color */}
      <div className={groupClass}>
        <label className={labelClass}>Background Color</label>
        <ColorPicker
          value={containerSettings.backgroundColor}
          onChange={(v) => onUpdate({ backgroundColor: v })}
          size={compact ? "compact" : "default"}
        />
      </div>

      {/* Background Image */}
      <div className={groupClass}>
        <label className={labelClass}>Background Image</label>
        <MediaPicker
          value={containerSettings.backgroundImage}
          onSelect={handleBackgroundImageSelect}
          onRemove={handleBackgroundImageRemove}
          title="Select Background Image"
          selectLabel="Select Image"
          changeLabel="Change Image"
          compact={compact}
          previewSize="md"
        />
      </div>

      {/* Background Settings (only show if image is set) */}
      {containerSettings.backgroundImage && (
        <>
          <div className={groupClass}>
            <label className={labelClass}>Size</label>
            <Select
              value={containerSettings.backgroundSize}
              onValueChange={(v) =>
                onUpdate({
                  backgroundSize: v as ContainerSettings["backgroundSize"],
                })
              }
              options={BACKGROUND_SIZE_OPTIONS}
              size={compact ? "compact" : "default"}
            />
          </div>

          <div className={groupClass}>
            <label className={labelClass}>Position</label>
            <Select
              value={containerSettings.backgroundPosition}
              onValueChange={(v) =>
                onUpdate({
                  backgroundPosition: v as ContainerSettings["backgroundPosition"],
                })
              }
              options={BACKGROUND_POSITION_OPTIONS}
              size={compact ? "compact" : "default"}
            />
          </div>

          <div className={groupClass}>
            <label className={labelClass}>Repeat</label>
            <Select
              value={containerSettings.backgroundRepeat}
              onValueChange={(v) =>
                onUpdate({
                  backgroundRepeat: v as ContainerSettings["backgroundRepeat"],
                })
              }
              options={BACKGROUND_REPEAT_OPTIONS}
              size={compact ? "compact" : "default"}
            />
          </div>
        </>
      )}
    </div>
  );
}

export default ContainerBackgroundTab;
