import SwiftUI

struct PageSettingsDetailView: View {

    @Environment(\.language)
    private var language

    @EnvironmentObject
    private var content: Content

    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                DetailTitle(
                    title: "Page Settings",
                    text: "Change the way pages are displayed")

                IntegerPropertyView(
                    value: $content.settings.pages.contentWidth,
                    title: "Content Width",
                    footer: "The maximum width of the content in pages (in pixels)")

                IntegerPropertyView(
                    value: $content.settings.pages.largeImageWidth,
                    title: "Fullscreen Image Width",
                    footer: "The maximum width of images that are diplayed fullscreen")

                IntegerPropertyView(
                    value: $content.settings.pages.pageLinkImageSize,
                    title: "Page Link Image Width",
                    footer: "The maximum width of images diplayed as thumbnails on page links")

                FilePropertyView(
                    title: "Default CSS File",
                    description: "The CSS file containing the styling of all pages",
                    selectedFile: $content.settings.pages.defaultCssFile)

                FilePropertyView(
                    title: "Code Highlighting File",
                    description: "The JavaScript file to provide syntax highlighting of code blocks",
                    selectedFile: $content.settings.pages.codeHighlightingJsFile)

                FilePropertyView(
                    title: "Audio Player CSS File",
                    description: "The CSS file to provide the style for the audio player",
                    selectedFile: $content.settings.pages.audioPlayerCssFile)

                FilePropertyView(
                    title: "Audio Player JavaScript File",
                    description: "The CSS file to provide the functionality for the audio player",
                    selectedFile: $content.settings.pages.audioPlayerJsFile)

                FilePropertyView(
                    title: "3D Model Viewer File",
                    description: "The JavaScript file to provide the functionality for the 3D model viewer",
                    selectedFile: $content.settings.pages.modelViewerJsFile)
            }
        }
    }
}


#Preview {
    PageSettingsDetailView()
        .environmentObject(Content.mock)
        .padding()
}