import ComponentLibrary
import ComposableArchitecture
import SwiftUI

public struct WaveformStrip: View {
    @State private var dotCount = 0
    @State private var timer: Timer?

    let store: StoreOf<WaveformEditor>
    let width: CGFloat
    let height: CGFloat
    let highlightedPortionStartSeconds: Double
    let highlightedPortionEndSeconds: Double
    let waveformStripHighlightedPortionOffset: CGFloat
    let waveformStripHighlightedPortionWidth: CGFloat

    public init(store: StoreOf<WaveformEditor>) {
        self.store = store
        self.width = store.waveformStripWidth
        self.height = store.waveformStripHeight
        self.highlightedPortionStartSeconds = store.waveformStripHighlightedPortionStartPosition
        self.highlightedPortionEndSeconds = store.waveformStripHighlightedPortionEndPosition
        self.waveformStripHighlightedPortionOffset = store.waveformStripHighlightedPortionOffset
        self.waveformStripHighlightedPortionWidth = store.waveformStripHighlightedPortionWidth
    }

    public var body: some View {
        ZStack(alignment: .bottom) {
            RoundedRectangle(cornerRadius: 8)
                .foregroundColor(.SemanticV1.backgroundSecondary)
                .frame(width: width, height: height)
                .clipShape(RoundedRectangle(cornerRadius: 8))

            WaveformStripRulerView(width: store.waveformStripRulerWidth)
                .offset(x: store.waveformStripRulerOffset, y: 0)
                .frame(width: width, height: height, alignment: .bottom)
                .clipped()

            if !store.waveformData.isEmpty {
                waveform
            } else {
                WaveformStripLoadingView(waveformData: store.waveformData, width: width, height: height)
            }
        }
    }

    @ViewBuilder
    private var waveform: some View {
        // Waveform container
        ZStack(alignment: .leading) {
            // Base waveform
            WaveformShape(store: store)
                .fill(Color.SemanticV1.textSecondary)

            // Highlighted portion
            if highlightedPortionStartSeconds < highlightedPortionEndSeconds {
                WaveformShape(store: store)
                    .fill(Color.SemanticV1.iconPrimary)
                    .mask(
                        Rectangle()
                            .offset(x: waveformStripHighlightedPortionOffset)
                            .frame(width: waveformStripHighlightedPortionWidth)
                    )
            }
        }
        .frame(width: width, height: height)
        .clipped()
        .allowsHitTesting(false)
    }
}