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

// Per-size geometry (mirrors the web DS `FileAttachment` SIZE_CONFIG:
// medium chip 48px / thumb 36px / image 48px, small chip 36px / thumb 24px /
// image 36px). Kept as a plain map — these are dimensions, not colors, so they
// don't go through the theme mapper.
export const FILE_ATTACHMENT_SIZE = {
  medium: { chip: 48, thumb: 36, icon: 22, image: 48 },
  small: { chip: 36, thumb: 24, icon: 16, image: 36 },
} as const;

export const fileAttachmentStyles = createThemedStyles({
  // ── file chip ──────────────────────────────────────────────────────────
  chip: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    flexDirection: 'row',
    maxWidth: 256,
    paddingHorizontal: 8,
    position: 'relative',
  },
  thumb: {
    alignItems: 'center',
    backgroundColor: '#0B0B0C',
    borderRadius: 6,
    justifyContent: 'center',
  },
  chipName: { color: '#D4D4D8', flexShrink: 1, fontSize: 13, fontWeight: '700', marginLeft: 8 },
  // ── image thumbnail ──────────────────────────────────────────────────────
  // Outer container is NOT clipped so the remove button can straddle the top
  // corner; the inner `imageWrap` clips the image to the rounded frame.
  imageContainer: { position: 'relative' },
  imageWrap: {
    backgroundColor: '#0B0B0C',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    height: '100%',
    overflow: 'hidden',
    width: '100%',
  },
  image: { height: '100%', width: '100%' },
  stateFill: { alignItems: 'center', flex: 1, justifyContent: 'center' },
  // Pad the top-right so the corner-straddling remove badge stays inside the
  // touchable bounds — native doesn't hit-test the part of a child that spills
  // outside its parent, so the badge's overflow must live in this padding.
  removeBadgePad: { paddingRight: 8, paddingTop: 8 },
  // ── remove button ────────────────────────────────────────────────────────
  removeButton: {
    alignItems: 'center',
    backgroundColor: '#F4F4F5',
    borderRadius: 9,
    height: 18,
    justifyContent: 'center',
    width: 18,
  },
  removeButtonCorner: {
    // Straddle the top-right corner of any attachment (image or file chip): with
    // an 18px button offset by -8, only its bottom-left quadrant overlaps the
    // attachment; the rest sits outside it. A ring in the surface color separates
    // it from the attachment edge.
    borderColor: '#0B0B0C',
    borderWidth: 1,
    position: 'absolute',
    right: -8,
    top: -8,
  },
  removeText: { color: '#111111', fontSize: 12, fontWeight: '800', lineHeight: 14 },
  errorBorder: { borderColor: '#DF3336' },
});