import SwiftUI

struct PageSettingsDetailView: View {

    @Binding
    var language: ContentLanguage

    @ObservedObject
    var pageSettings: PageSettings

    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                IntegerPropertyView(
                    title: "Content Width",
                    value: $pageSettings.contentWidth,
                    footer: "The maximum width of the content in pages (in pixels)")

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

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

                FilePropertyView(
                    title: "Default CSS File",
                    footer: "The CSS file containing the styling of all pages",
                    selectedFile: $pageSettings.defaultCssFile,
                    allowedType: .code)

                FilePropertyView(
                    title: "Code Highlighting File",
                    footer: "The JavaScript file to provide syntax highlighting of code blocks",
                    selectedFile: $pageSettings.codeHighlightingJsFile,
                    allowedType: .code)

                FilePropertyView(
                    title: "3D Model Viewer File",
                    footer: "The JavaScript file to provide the functionality for the 3D model viewer",
                    selectedFile: $pageSettings.modelViewerJsFile,
                    allowedType: .code)


                FilePropertyView(
                    title: "Image Comparison CSS File",
                    footer: "The CSS file to provide image comparisons",
                    selectedFile: $pageSettings.imageCompareCssFile,
                    allowedType: .code)

                FilePropertyView(
                    title: "Image Comparison JaveScript File",
                    footer: "The JavaScript file to provide image comparisons",
                    selectedFile: $pageSettings.imageCompareJsFile,
                    allowedType: .code)

                LocalizedPageSettingsView(settings: pageSettings.localized(in: language))
                    .id(language)
            }
            .padding()
        }
    }
}


#Preview {
    PageSettingsDetailView(
        language: .constant(.english),
        pageSettings: .default)
        .padding()
}