import { SymbolView } from "expo-symbols";
import { Image, Pressable, ScrollView, View } from "react-native";
import { useThemeColor } from "../lib/useThemeColor";

import type { DraftComposerImageAttachment } from "../lib/composerImages";

export interface ComposerAttachmentStripProps {
  /** Attachment images to display. */
  readonly attachments: ReadonlyArray<DraftComposerImageAttachment>;
  /** Called when the user taps the remove button on an image. */
  readonly onRemove: (imageId: string) => void;
  /** Called when the user taps on an image thumbnail to preview it. */
  readonly onPressImage?: (previewUri: string) => void;
  /** Image thumbnail size in points.  Defaults to 72. */
  readonly imageSize?: number;
  /** Border radius of each image thumbnail.  Defaults to 16. */
  readonly imageBorderRadius?: number;
  /** Whether the remove button should sit in its own gutter instead of overlapping the image. */
  readonly removeButtonPlacement?: "overlay" | "gutter";
}

/**
 * A horizontally-scrollable strip of image attachment thumbnails with remove
 * buttons.  Used by both the thread composer and the new-task draft screen.
 */
export function ComposerAttachmentStrip(props: ComposerAttachmentStripProps) {
  const subtleBg = useThemeColor("--color-subtle");
  const size = props.imageSize ?? 72;
  const radius = props.imageBorderRadius ?? 16;
  const removeButtonPlacement = props.removeButtonPlacement ?? "overlay";
  const removeButtonGutter = removeButtonPlacement === "gutter" ? 10 : 0;

  if (props.attachments.length === 0) {
    return null;
  }

  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      keyboardShouldPersistTaps="always"
      style={{ flexGrow: 0 }}
    >
      <View style={{ flexDirection: "row", gap: 10 }}>
        {props.attachments.map((image) => (
          <View
            key={image.id}
            style={{
              position: "relative",
              paddingTop: removeButtonGutter,
              paddingRight: removeButtonGutter,
            }}
          >
            <Pressable
              onPress={props.onPressImage ? () => props.onPressImage!(image.previewUri) : undefined}
            >
              <Image
                source={{ uri: image.previewUri }}
                style={{
                  width: size,
                  height: size,
                  borderRadius: radius,
                  backgroundColor: subtleBg,
                }}
                resizeMode="cover"
              />
            </Pressable>
            <Pressable
              style={{
                position: "absolute",
                top: removeButtonPlacement === "gutter" ? 0 : 4,
                right: removeButtonPlacement === "gutter" ? 0 : 4,
                width: 22,
                height: 22,
                borderRadius: 11,
                backgroundColor: "rgba(0,0,0,0.55)",
                alignItems: "center",
                justifyContent: "center",
              }}
              hitSlop={6}
              onPress={() => props.onRemove(image.id)}
            >
              <SymbolView
                name="xmark"
                size={9}
                tintColor="#ffffff"
                type="monochrome"
                weight="bold"
              />
            </Pressable>
          </View>
        ))}
      </View>
    </ScrollView>
  );
}