import SwiftUI
import Bedrock

struct OnboardingPermissionStepView: View {
    let title: String
    let icon: String
    let reason: String
    let status: OnboardingPermissionStatus

    var body: some View {
        ViewThatFits(in: .vertical) {
            centeredLayout
            scrollLayout
        }
    }

    private var centeredLayout: some View {
        VStack(spacing: Design.Spacing.large) {
            Spacer(minLength: Design.Spacing.xxxLarge)

            SymbolIcon(icon,
                       size: .hero,
                       color: AppThemeAccent.primary)
            
            VStack(spacing: Design.Spacing.small) {
                Text(title)
                    .typography(.title2Bold)
                    .foregroundStyle(Color.Text.primary)
                    .multilineTextAlignment(.center)

                Text(reason)
                    .typography(.body)
                    .foregroundStyle(Color.Text.secondary)
                    .multilineTextAlignment(.center)
                    .fixedSize(horizontal: false, vertical: true)
                    .padding(.horizontal, Design.Spacing.large)

                permissionStatusLabel
            }

            Spacer(minLength: Design.Spacing.xxxLarge)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }

    private var scrollLayout: some View {
        ScrollView(.vertical) {
            VStack(spacing: Design.Spacing.large) {
                
                SymbolIcon(icon,
                           size: .hero,
                           color: AppThemeAccent.primary)

                Text(title)
                    .typography(.title2Bold)
                    .foregroundStyle(Color.Text.primary)
                    .multilineTextAlignment(.center)

                Text(reason)
                    .typography(.body)
                    .foregroundStyle(Color.Text.secondary)
                    .multilineTextAlignment(.center)
                    .fixedSize(horizontal: false, vertical: true)
                    .padding(.horizontal, Design.Spacing.medium)

                permissionStatusLabel
            }
            .padding(.top, Design.Spacing.large)
            .padding(.bottom, Design.Spacing.medium)
            .frame(maxWidth: .infinity)
        }
        .scrollIndicators(.hidden)
    }

    private var permissionStatusLabel: some View {
        Text(status.description)
            .typography(.calloutEmphasis)
            .foregroundStyle(status.tint)
            .padding(.horizontal, Design.Spacing.small)
            .padding(.vertical, Design.Spacing.xxSmall)
            .background(status.tint.opacity(0.14))
            .clipShape(.capsule)
    }
}
