import { createThemedStyles } from '../theme';

// Grid + lightbox styles for the generic ImageGallery. The `sendImage*` names are
// legacy (the gallery first rendered sent-image messages); the component itself is
// generic. The send-image wrapper/header styles stay in conversationStyles.
export const imageGalleryStyles = createThemedStyles({
  sendImageSingle: {
    alignSelf: 'flex-start',
    backgroundColor: '#171717',
    borderColor: '#2A2A2A',
    borderRadius: 12,
    borderWidth: 1,
    maxWidth: 320,
    overflow: 'hidden',
    width: '100%',
  },
  sendImageSingleImage: { maxHeight: 360, width: '100%' },
  sendImageGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
  sendImageTile: {
    aspectRatio: 4 / 3,
    backgroundColor: '#171717',
    borderColor: '#2A2A2A',
    borderRadius: 10,
    borderWidth: 1,
    overflow: 'hidden',
    width: '48%',
  },
  sendImageTileImage: { height: '100%', width: '100%' },
  sendImageTileLoading: { alignItems: 'center', justifyContent: 'center' },
  sendImageTileFailed: { alignItems: 'center', justifyContent: 'center', paddingHorizontal: 8 },
  sendImageFailedText: { color: '#FCA5A5', fontSize: 11, fontWeight: '700', marginTop: 5, textAlign: 'center' },
  // Lightbox stays dark in both schemes (rgba is not theme-mapped) — mirrors the
  // web gallery's bg-black/95 overlay.
  sendImageLightboxBackdrop: { alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.95)', flex: 1, justifyContent: 'center' },
  // Swipe band that captures left/right gestures; the image fills it (contain).
  sendImageLightboxSwipeArea: { alignItems: 'center', height: '80%', justifyContent: 'center', width: '100%' },
  sendImageLightboxImage: { height: '100%', width: '100%' },
  sendImageLightboxClose: {
    backgroundColor: 'rgba(255,255,255,0.1)',
    borderRadius: 20,
    padding: 9,
    position: 'absolute',
    right: 16,
    top: 48,
  },
  sendImageLightboxNav: {
    backgroundColor: 'rgba(255,255,255,0.1)',
    borderRadius: 22,
    marginTop: -22,
    padding: 9,
    position: 'absolute',
    top: '50%',
  },
  sendImageLightboxCounter: {
    bottom: 28,
    color: 'rgba(255,255,255,0.6)',
    fontSize: 14,
    position: 'absolute',
  },
});