import {StyleSheet} from 'react-native';
import {TYPOGRAPHY_STYLES} from '@components/index';
import {windowDimensions} from '@shared/constants';
import {BORDER_RADIUS, SPACING} from '@shared/theme';

// Identical value to the previous `CHATS_SPACING.audioBubbleWidth`. Inlined
// here because Audio lives in shared now and shouldn't depend on chats.
const DEFAULT_AUDIO_BUBBLE_WIDTH = windowDimensions.width * 0.64;
const FOOTER_HEIGHT = 20;
const MIC_ICON_OFFSET = -SPACING['x0.25'];

export const styles = StyleSheet.create({
  row: {
    alignItems: 'center',
    flex: 1,
    height: '100%',
    width: DEFAULT_AUDIO_BUBBLE_WIDTH,
  },
  alignRight: {flexDirection: 'row-reverse'},
  avatarWithRateWrapper: {
    alignItems: 'center',
    aspectRatio: 1,
    height: 40,
    justifyContent: 'center',
  },
  changeRateButton: {
    alignItems: 'center',
    borderRadius: BORDER_RADIUS.xl,
    height: 20,
    justifyContent: 'center',
    width: 35,
    zIndex: 2,
  },
  iconButton: {padding: SPACING['x0.5']},
  timeInput: {
    ...TYPOGRAPHY_STYLES.xxs,
    paddingVertical: 0,
    width: SPACING.x4,
  },

  // Chat layout — must stay equivalent to the pre-feed shape.
  container: {
    columnGap: SPACING['x0.5'],
    flexDirection: 'row',
    flex: 1,
  },
  playerRow: {
    alignItems: 'center',
    columnGap: SPACING.x1,
    flexDirection: 'row',
    flexGrow: 1,
    height: 35,
  },
  playerWithFooterWrapper: {
    flex: 1,
    height: 40,
  },
  footer: {
    alignItems: 'center',
    flexDirection: 'row',
    height: FOOTER_HEIGHT,
    justifyContent: 'space-between',
  },
  footerReversed: {marginLeft: SPACING.x4 - SPACING['x0.25']},
  micIcon: {
    bottom: MIC_ICON_OFFSET,
    position: 'absolute',
    right: MIC_ICON_OFFSET,
  },
  micIconReversed: {
    bottom: MIC_ICON_OFFSET,
    left: MIC_ICON_OFFSET,
    position: 'absolute',
  },

  // Feed layout — only used by PostAudioCard via showLeadingAvatar={false}.
  rowFill: {
    alignSelf: 'stretch',
    height: '100%',
    justifyContent: 'center',
    width: '100%',
  },
  playerRowFill: {
    alignItems: 'center',
    columnGap: SPACING.x1,
    flexDirection: 'row',
    flexGrow: 1,
    height: 40,
    justifyContent: 'center',
  },
  footerFill: {
    alignItems: 'center',
    flexDirection: 'row',
    height: FOOTER_HEIGHT,
    justifyContent: 'space-between',
    width: '100%',
  },
  playControlSlot: {
    alignItems: 'center',
    height: 40,
    justifyContent: 'center',
    width: 40,
  },
  playIconPressable: {
    alignItems: 'center',
    height: '100%',
    justifyContent: 'center',
    width: '100%',
  },
  timelineTrack: {
    alignSelf: 'stretch',
    flexGrow: 1,
    height: 40,
    justifyContent: 'center',
    minWidth: 0,
  },
  footerStart: {
    alignItems: 'center',
    flex: 1,
    flexDirection: 'row',
    minWidth: 0,
  },
  footerRateChip: {flexShrink: 0},
});
