import {StyleSheet} from 'react-native';
import {CHAT_MESSAGE_HEADER_HEIGHT} from '@modules/chats/constants';
import {windowDimensions} from '@shared/constants';
import {BORDER_RADIUS, SPACING} from '@shared/theme';

export const IMAGE_WIDTH = windowDimensions.width;

export const styles = StyleSheet.create({
  container: {flex: 1},
  mainImageContainer: {
    // Full viewport width, edge-to-edge. `pagingEnabled` on the
    // FlatList snaps each item flush with the viewport.
    overflow: 'hidden',
    width: IMAGE_WIDTH,
  },
  mainVideoContainer: {
    // Explicit height because the horizontal FlatList's items don't
    // stretch to fill cross-axis on their own (image carousel items
    // only fill thanks to ExpoImage's intrinsic dimensions — a video
    // surface has none until the source binds, so the chain would
    // collapse to 0). Sized as a tall fraction of the viewport so the
    // player feels like a proper gallery on any phone size.
    height: windowDimensions.height * 0.6,
    overflow: 'hidden',
    width: IMAGE_WIDTH,
  },
  mainImage: {
    borderRadius: BORDER_RADIUS.m,
    borderWidth: 0,
    height: '100%',
    overflow: 'hidden',
    width: '100%',
  },
  downloadContainer: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
  },
  selectorCarousel: {
    borderRadius: BORDER_RADIUS.m,
    borderWidth: 0,
    height: 70,
    width: 70,
  },
  selectorSelected: {borderWidth: 1},
  header: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: SPACING['x1.5'],
    height: CHAT_MESSAGE_HEADER_HEIGHT,
    paddingHorizontal: SPACING.x2,
    paddingVertical: SPACING['x1.5'],
    width: '100%',
  },
  headerInfoContainer: {flex: 1},
  headerInfo: {padding: 0},
  listContainer: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  },
  mainListContainer: {
    flex: 1,
    paddingVertical: SPACING.x2,
  },
  mainListContentContainer: {alignItems: 'center'},
  closeIcon: {
    position: 'absolute',
    right: SPACING.x2,
  },
  buttonsContainer: {
    alignItems: 'flex-start',
    gap: SPACING.x2,
  },
  selectorCarouselContainer: {
    alignItems: 'center',
    height: 70,
    marginTop: SPACING.x2,
    width: '100%',
  },
  listPadding: {
    gap: SPACING.x2,
    paddingHorizontal: SPACING.x2,
  },
  selectorCarouselItem: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});
