"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useStyles = void 0;
var _reactNative = require("react-native");
var _reactNativePaper = require("react-native-paper");
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
const useStyles = () => {
  const theme = (0, _reactNativePaper.useTheme)();
  const {
    height: screenHeight
  } = _reactNative.Dimensions.get('window');
  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
  const availableHeight = screenHeight - 80 - 60 - 40 - 40 - 120 - 50;
  const styles = _reactNative.StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: theme.colors.background,
      position: 'relative'
    },
    cameraContainer: {
      flex: 1,
      top: 0,
      bottom: 80,
      left: 0,
      right: 0,
      position: 'absolute',
      zIndex: 10
    },
    overlay: {
      flex: 1,
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      position: 'absolute',
      zIndex: 50,
      backgroundColor: 'rgba(0, 0, 0, 0.5)'
    },
    noPermissionOverlay: {
      backgroundColor: 'rgba(0, 0, 0, 1)'
    },
    startingContainer: {
      // Full-screen overlay that shows LiveStreamStartingThumbnail during
      // the LiveKit connection phase. Sits above the camera but below the
      // control elements (zIndex 100) so the UI doesn't flash white/black.
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      zIndex: 60
    },
    camera: {
      flex: 1,
      height: '100%'
    },
    footer: {
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      paddingBottom: insets.bottom,
      minHeight: 80,
      paddingHorizontal: 16,
      paddingVertical: 20,
      backgroundColor: '#000000',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      zIndex: 100
    },
    thumbnailButton: {
      gap: 8,
      flexDirection: 'row',
      alignItems: 'center'
    },
    thumbnailImageContainer: {
      width: 70,
      height: 40,
      borderRadius: 4,
      borderWidth: 1,
      borderColor: theme.colors.background,
      overflow: 'hidden',
      position: 'relative',
      zIndex: 100
    },
    thumbnailImage: {
      width: '100%',
      height: '100%',
      resizeMode: 'cover'
    },
    thumbnailLoader: {
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: [{
        translateX: -12
      }, {
        translateY: -12
      }],
      justifyContent: 'center',
      alignItems: 'center'
    },
    content: {
      position: 'absolute',
      top: insets.top,
      left: 0,
      right: 0,
      bottom: 80 + insets.bottom,
      zIndex: 100,
      justifyContent: 'space-between'
    },
    header: {
      paddingHorizontal: 16,
      paddingVertical: 20,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      gap: 36
    },
    inputContainer: {
      gap: 8,
      paddingTop: 20,
      paddingHorizontal: 16
    },
    titleInput: {
      fontSize: 20,
      fontWeight: '700',
      padding: 0,
      color: theme.colors.background
    },
    descriptionInput: {
      fontSize: 15,
      padding: 0,
      color: theme.colors.background,
      textAlignVertical: 'top',
      lineHeight: 20,
      maxHeight: availableHeight
    },
    goLiveContainer: {
      minHeight: 120,
      maxHeight: 120,
      justifyContent: 'center',
      alignItems: 'center'
    },
    communityButton: {
      flex: 1,
      alignItems: 'center',
      flexDirection: 'row',
      gap: 8,
      justifyContent: 'flex-end',
      color: theme.colors.background
    },
    communityName: {
      color: theme.colors.background,
      flex: 1,
      textAlign: 'right'
    },
    connecting: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      justifyContent: 'center',
      gap: 12,
      zIndex: 100,
      alignItems: 'center'
    },
    indicator: {
      width: 40,
      height: 40
    },
    text: {
      color: theme.colors.background
    },
    closeButton: {
      left: 16,
      zIndex: 100,
      position: 'absolute',
      top: 20 + insets.top
    },
    liveRow: {
      position: 'absolute',
      right: 16,
      top: 20 + insets.top,
      zIndex: 100,
      flexDirection: 'row',
      alignItems: 'center',
      gap: 8
    },
    permission: {
      flex: 1,
      top: 80 + insets.top,
      left: 0,
      bottom: 0,
      right: 0,
      zIndex: 200,
      position: 'absolute',
      justifyContent: 'center',
      alignItems: 'center',
      paddingBottom: 80 + insets.top,
      backgroundColor: 'rgba(0, 0, 0, .7)'
    },
    permissionTitle: {
      color: theme.colors.background,
      textAlign: 'center',
      marginBottom: 8
    },
    permissionDescription: {
      color: theme.colors.background,
      textAlign: 'center',
      marginBottom: 24
    },
    reconnectingText: {
      color: theme.colors.background,
      textAlign: 'center'
    },
    containerRoom: {
      flex: 1,
      alignItems: 'stretch',
      justifyContent: 'center',
      padding: 10
    },
    participantView: {
      flex: 1,
      margin: 5,
      height: 200,
      backgroundColor: '#ccc'
    },
    roomContainer: {
      flex: 1,
      width: '100%',
      height: '100%'
    },
    videoTrack: {
      width: '100%',
      height: '100%'
    },
    countdownOverlay: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 80,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      zIndex: 150
    },
    countdownContainer: {
      alignItems: 'center',
      gap: 24
    },
    countdownCircle: {
      position: 'relative',
      alignItems: 'center',
      justifyContent: 'center',
      width: 72,
      height: 72
    },
    countdownNumberContainer: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      alignItems: 'center',
      justifyContent: 'center'
    },
    countdownNumber: {
      fontSize: 32,
      fontWeight: '700',
      color: theme.colors.background
    },
    countdownText: {
      fontSize: 24,
      fontWeight: '500',
      color: theme.colors.background,
      textAlign: 'center'
    }
  });
  return styles;
};
exports.useStyles = useStyles;
//# sourceMappingURL=styles.js.map