import React, { useEffect, useRef } from 'react';
import { Box, Button, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';

type TapToSendBarProps = {
  previewUrl?: string;
  label: string;
  onSend: () => void;
  onCancel: () => void;
};

/**
 * [Gitea #147] Fat-finger guard for touch screens: the first tap on a sticker
 * or GIF parks it here with a preview; "Send" (or a second tap on the same
 * item) sends it.
 */
export function TapToSendBar({ previewUrl, label, onSend, onCancel }: TapToSendBarProps) {
  const liveRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    liveRef.current?.focus?.();
  }, [label]);

  return (
    <Box
      ref={liveRef}
      role="status"
      aria-live="polite"
      tabIndex={-1}
      shrink="No"
      alignItems="Center"
      gap="300"
      style={{
        margin: `0 ${config.space.S300} ${config.space.S200}`,
        padding: config.space.S200,
        borderRadius: config.radii.R400,
        backgroundColor: color.SurfaceVariant.Container,
        color: color.SurfaceVariant.OnContainer,
        outline: 'none',
      }}
    >
      {previewUrl && (
        <img
          src={previewUrl}
          alt=""
          style={{
            width: toRem(40),
            height: toRem(40),
            objectFit: 'contain',
            borderRadius: config.radii.R300,
            flexShrink: 0,
          }}
        />
      )}
      <Box grow="Yes" direction="Column" style={{ minWidth: 0 }}>
        <Text size="T200" priority="300">
          Tap again to send
        </Text>
        <Text size="T300" truncate>
          {label}
        </Text>
      </Box>
      <Button size="300" variant="Primary" fill="Solid" radii="300" onClick={onSend}>
        <Text size="B300">Send</Text>
      </Button>
      <IconButton
        size="300"
        variant="SurfaceVariant"
        radii="300"
        onClick={onCancel}
        aria-label="Cancel"
      >
        <Icon size="100" src={Icons.Cross} />
      </IconButton>
    </Box>
  );
}