// @ts-ignore - Peer dependency
import { ScaledSheet } from 'react-native-size-matters';
// @ts-ignore - Peer dependency
import { StyleSheet } from 'react-native';
import { deviceUtils } from '../../utils/deviceUtils';

export const createTimelineStyles = () =>
  ScaledSheet.create({
    timelineSection: {
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      height: '230@ms',
      backgroundColor: '#000',
      paddingTop: '10@ms',
      zIndex: 31,
      borderTopLeftRadius: '16@ms',
      borderTopRightRadius: '16@ms',
      borderTopWidth: 1,
      borderTopColor: 'rgba(255,255,255,0.1)',
    },
    timelineHeader: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      paddingHorizontal: '16@ms',
      marginBottom: '8@ms',
    },
    playPauseButton: {
      width: '32@ms',
      height: '32@ms',
      borderRadius: '16@ms',
      backgroundColor: 'rgba(255,255,255,0.2)',
      justifyContent: 'center',
      alignItems: 'center',
    },
    playPauseIcon: {
      height: '10@ms',
      width: '10@ms',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'row',
    },
    durationText: {
      color: '#fff',
      fontSize: '12@ms',
      fontWeight: '600',
    },
    collapseButton: {
      width: '32@ms',
      height: '32@ms',
      borderRadius: '16@ms',
      backgroundColor: 'rgba(255,255,255,0.2)',
      justifyContent: 'center',
      alignItems: 'center',
    },
    closeIcon: {
      height: '10@ms',
      width: '10@ms',
      resizeMode: 'contain',
    },
    trimActionsContainer: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    trimActionButton: {
      width: '32@ms',
      height: '32@ms',
      borderRadius: '16@ms',
      backgroundColor: 'rgba(255,255,255,0.2)',
      justifyContent: 'center',
      alignItems: 'center',
      marginLeft: '8@ms',
    },
    trimActionIcon: {
      height: '12@ms',
      width: '12@ms',
      resizeMode: 'contain',
    },
    tickIconStyle: {
      height: '16@ms',
      width: '16@ms',
      resizeMode: 'contain',
    },
    timelineContainer: {
      flex: 1,
      marginHorizontal: '16@ms',
      backgroundColor: 'rgba(255,255,255,0.05)',
      borderRadius: '12@ms',
      paddingVertical: '8@ms',
    },
    tracksScrollView: {
      flex: 1,
    },
    fixedPlayhead: {
      position: 'absolute',
      top: 8,
      bottom: 8,
      left: '50%',
      width: 2,
      marginLeft: -1,
      alignItems: 'center',
      zIndex: 15,
      pointerEvents: 'none',
    },
    fixedPlayheadLine: {
      width: 2,
      flex: 1,
      backgroundColor: '#fff',
      opacity: 0.8,
    },
    fixedPlayheadHandle: {
      width: '12@ms',
      height: '12@ms',
      backgroundColor: '#fff',
      borderRadius: 6,
      position: 'absolute',
      top: '50%',
      marginTop: -6,
      borderWidth: 2,
      borderColor: '#000',
    },
    trimTrackContainer: {
      marginBottom: '6@ms',
      position: 'relative',
      overflow: 'visible',
    },
    muteButton: {
      position: 'absolute',
      left: '12@ms',
      top: '60%',
      transform: [{ translateY: '-20@ms' }],
      zIndex: 30,
    },
    muteButtonContainer: {
      width: '30@ms',
      height: '30@ms',
      borderRadius: '20@ms',
      backgroundColor: 'rgba(0, 0, 0, 0.6)',
      justifyContent: 'center',
      alignItems: 'center',
      borderWidth: 1,
      borderColor: 'rgba(255, 255, 255, 0.3)',
    },
    muteIcon: {
      width: '14@ms',
      height: '14@ms',
      resizeMode: 'contain',
      tintColor: '#fff',
    },
    trimTrackContent: {
      height: '50@ms',
      backgroundColor: 'rgba(255,255,255,0.1)',
      borderRadius: '6@ms',
      position: 'relative',
      overflow: 'visible',
    },
    timelineTrack: {
      height: '100%',
      borderRadius: 6,
      overflow: 'visible',
    },
    clippingView: {
      ...StyleSheet.absoluteFillObject,
      overflow: 'hidden',
    },
    thumbnailStrip: {
      flexDirection: 'row',
      height: '100%',
    },
    thumbnailImage: {
      height: '100%',
      resizeMode: 'cover',
    },
    trimHandlesContainer: {
      position: 'absolute',
      top: 0,
      bottom: 0,
      borderWidth: 2,
      borderRadius: 4,
      borderColor: '#FFD700',
    },
    trimHandleInteractive: {
      position: 'absolute',
      top: '-10@ms',
      bottom: '-10@ms',
      width: '30@ms',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 20,
    },
    trimHandleVisual: {
      width: '14@ms',
      height: '46@ms',
      borderRadius: '6@ms',
      backgroundColor: '#FFFFFF',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'row',
    },
    trimHandleGrip: {
      width: '1.5@ms',
      height: '6@ms',
      borderRadius: 1,
      backgroundColor: '#333',
      marginHorizontal: '1@ms',
    },
    textTrimHandleVisual: {
      width: '6@ms',
      height: '26@ms',
      borderRadius: '2@ms',
      backgroundColor: '#FFFFFF',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'row',
    },
    container: {
      flex: 1,
      backgroundColor: 'transparent',
    },
    placeholder: {
      height: '100%',
      backgroundColor: '#1a1a1a',
    },
    audioSegmentContainer: {
      position: 'relative',
      flexDirection: 'row',
      alignItems: 'center',
      height: '28@ms',
      marginBottom: '6@ms',
    },
    audioSegment: {
      height: '28@ms',
      borderRadius: '6@ms',
      borderWidth: 2,
      paddingHorizontal: '8@ms',
      justifyContent: 'center',
      alignItems: 'flex-start',
      position: 'relative',
    },
    textSegmentsContainer: {
      position: 'relative',
      height: '28@ms',
      marginBottom: '6@ms',
    },
    textSegment: {
      height: '100%',
      borderRadius: '6@ms',
      borderWidth: 2,
      paddingHorizontal: '8@ms',
      justifyContent: 'center',
      alignItems: 'flex-start',
      position: 'relative',
    },
    voiceoverSegmentsContainer: {
      position: 'relative',
      height: '28@ms',
      marginBottom: '6@ms',
    },
    voiceoverSegment: {
      height: '28@ms',
      borderRadius: '6@ms',
      borderWidth: 2,
      paddingHorizontal: '8@ms',
      justifyContent: 'center',
      alignItems: 'flex-start',
      position: 'relative',
    },
    segmentLabel: {
      left: '12@ms',
      fontSize: '11@ms',
      fontWeight: '600',
      color: '#fff',
    },
    deleteButton: {
      position: 'absolute',
      alignSelf: 'flex-start',
      left: '2@ms',
      width: '16@ms',
      height: '16@ms',
      borderRadius: '8@ms',
      backgroundColor: 'rgba(0, 0, 0, 0.6)',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 10,
    },
    deleteIcon: {
      width: '16@ms',
      height: '16@ms',
      resizeMode: 'contain',
    },
    addButtonContainer: {
      height: '28@ms',
      justifyContent: 'center',
      alignItems: 'flex-start',
      marginBottom: '6@ms',
    },
    addButton: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: '8@ms',
      paddingVertical: deviceUtils.isAndroid ? '6@ms' : '8@ms',
      borderRadius: '4@ms',
      backgroundColor: 'rgba(255,255,255,0.1)',
    },
    addButtonIcon: {
      fontSize: '12@ms',
      color: '#fff',
      marginRight: '8@ms',
      fontWeight: '500',
    },
    addButtonText: {
      fontSize: '12@ms',
      color: '#fff',
      fontWeight: '500',
    },
    audioLoopSeparator: {
      position: 'absolute',
      top: '20%',
      height: '60%',
      width: 2,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      borderLeftWidth: 0.5,
      borderRightWidth: 0.5,
      borderColor: 'rgba(255, 255, 255, 0.5)',
    },
    loopIndicatorContainer: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      paddingHorizontal: '8@ms',
      overflow: 'hidden',
    },
    loopFileNameText: {
      fontSize: '11@ms',
      fontWeight: '500',
      flexShrink: 1,
    },
    loopIcon: {
      width: '14@ms',
      height: '14@ms',
      marginHorizontal: '4@ms',
      opacity: 0.8,
      resizeMode: 'contain',
    },
    loopIndicatorText: {
      fontSize: '11@ms',
      fontWeight: '500',
      opacity: 0.8,
    },
    textSegmentHandle: {
      position: 'absolute',
      top: '-10@ms',
      bottom: '-10@ms',
      width: '16@ms',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 20,
    },
    textSegmentHandleLine: {
      width: '2@ms',
      height: '46@ms',
      borderRadius: '1@ms',
      backgroundColor: '#FFFFFF',
    },
    textSegmentNonActive: {
      position: 'absolute',
      backgroundColor: 'rgba(255, 204, 0, 0.2)',
      borderColor: '#FFCC00',
    },
    textSegmentActiveContainer: {
      position: 'absolute',
      left: 0,
      top: 0,
      height: '100%',
    },
    textSegmentPressable: {
      flex: 1,
      justifyContent: 'center',
      paddingHorizontal: '8@ms',
    },
    textSegmentLabel: {
      color: '#FFCC00',
    },
    textTrimHandleYellow: {
      backgroundColor: '#FFCC00',
    },
    voiceoverSegmentStyle: {
      position: 'absolute',
      backgroundColor: 'rgba(52, 199, 89, 0.3)',
      borderColor: '#34C759',
    },
    voiceoverSegmentLabel: {
      color: '#34C759',
    },
    thumbnailImageBg: {
      backgroundColor: '#1a1a1a',
    },
    scrollWrapperVisible: {
      overflow: 'visible',
    },
    audioLoopSegment: {
      position: 'absolute',
    },
  });