Controls, Forms, Text, Images and SF Symbols

// Packages/FieldNotesUI/Sources/FieldNotesUI/SettingsView.swift
import SwiftUI
import FieldNotesModel
import FieldNotesServices

// NoteSortOrder comes from FieldNotesModel (defined on the Localization page) and is stored under the
// same "noteSortOrder" key as the note list's sort menu, so changing it here re-sorts the list.

public struct SettingsView: View {
    @Environment(NoteStore.self) private var store
    @AppStorage("syncWithICloud") private var syncWithICloud = true
    @AppStorage("pinnedFirst") private var pinnedFirst = true
    @AppStorage("noteSortOrder") private var sortOrder = NoteSortOrder.newestFirst
    @AppStorage("defaultNotebookID") private var defaultNotebookID = ""
    @AppStorage("locationRadius") private var locationRadius = 50.0
    @AppStorage("summarySentences") private var summarySentences = 3

    public init() {}

    public var body: some View {
        Form {
            Section("Sync") {
                Toggle("Sync with iCloud", isOn: $syncWithICloud)
            }
            Section("Notes") {
                Picker("Default Notebook", selection: $defaultNotebookID) {
                    Text("None").tag("")
                    ForEach(store.notebooks) { notebook in
                        Label(notebook.name, systemImage: notebook.symbolName)
                            .tag(notebook.id.uuidString)
                    }
                }
                Picker("Sort By", selection: $sortOrder) {
                    ForEach(NoteSortOrder.allCases) { Text($0.title).tag($0) }
                }
                Toggle("Show Pinned Notes First", isOn: $pinnedFirst)
            }
            Section("Capture") {
                Slider(value: $locationRadius, in: 10...500, step: 10) {
                    Text("Location Radius")
                } minimumValueLabel: {
                    Text("10 m")
                } maximumValueLabel: {
                    Text("500 m")
                }
                Stepper("Summary: \(summarySentences) sentences",
                        value: $summarySentences, in: 1...6)
            }
            Section("About") {
                LabeledContent("Notes", value: store.notes.count, format: .number)
                LabeledContent("Version", value: Bundle.main.appVersion)
            }
        }
        .formStyle(.grouped)
        .navigationTitle("Settings")
    }
}

// SettingsView: a destructive button with a confirmation, and an ordinary bordered one.
Section {
    Button("Export All Notes", systemImage: "square.and.arrow.up") { isExporting = true }
        .buttonStyle(.bordered)
    Button("Erase All Notes", role: .destructive) { isConfirmingErase = true }
}

// NoteList empty state: the primary call to action.
ContentUnavailableView {
    Label("No Notes Yet", systemImage: "note.text")
} actions: {
    Button("New Note") { isComposing = true }
        .buttonStyle(.borderedProminent)
        .controlSize(.large)
}

// Packages/FieldNotesUI/Sources/FieldNotesUI/CaptureButton.swift
public struct CaptureButton: View {
    let action: () -> Void

    // A public type in a package needs an explicit public init; the memberwise one is internal.
    public init(action: @escaping () -> Void) {
        self.action = action
    }

    public var body: some View {
        Button("New Note", systemImage: "square.and.pencil", action: action)
            .labelStyle(.iconOnly)
            .font(.title2)
            .controlSize(.large)
            .buttonBorderShape(.circle)
            #if os(visionOS)
            .buttonStyle(.borderedProminent)
            #else
            .buttonStyle(.glassProminent)
            #endif
    }
}

// NoteList toolbar
Menu {
    Picker("Sort By", selection: $sortOrder) {
        ForEach(NoteSortOrder.allCases) { Text($0.title).tag($0) }
    }
    Toggle("Show Pinned First", isOn: $pinnedFirst)
    Divider()
    Menu("Filter by Tag") {
        ForEach(allTags, id: \.self) { tag in
            Button(tag) { tagFilter = tag }
        }
    }
} label: {
    Label("Sort and Filter", systemImage: "line.3.horizontal.decrease")
}

// A split button: tap for a new note, hold for templates.
Menu("New", systemImage: "square.and.pencil") {
    Button("Bird Sighting") { compose(template: .birdSighting) }
    Button("Trail Report") { compose(template: .trailReport) }
} primaryAction: {
    compose(template: .blank)
}

// FieldNotes/Views/NoteMetadataInspector.swift
struct NoteMetadataInspector: View {
    let note: Note

    var body: some View {
        Form {
            LabeledContent("Created", value: note.createdAt, format: .dateTime)
            LabeledContent("Words", value: note.body.split(whereSeparator: \.isWhitespace).count,
                           format: .number)
            LabeledContent("Tags") {
                HStack { ForEach(note.tags, id: \.self) { Text($0) } }
            }
        }
    }
}

// FieldNotes/Views/NoteEditor.swift
struct NoteEditor: View {
    enum Field: Hashable { case title, body, tags }

    @Environment(NoteStore.self) private var store
    @FocusState private var focusedField: Field?
    @State private var newTag = ""
    let noteID: Note.ID

    var body: some View {
        @Bindable var store = store
        if let index = store.notes.firstIndex(where: { $0.id == noteID }) {
            Form {
                TextField("Title", text: $store.notes[index].title)
                    .font(.title2.bold())
                    .focused($focusedField, equals: .title)
                    .submitLabel(.next)
                    .onSubmit { focusedField = .body }

                TextEditor(text: $store.notes[index].body)
                    .focused($focusedField, equals: .body)
                    .frame(minHeight: 200)

                TextField("Add Tag", text: $newTag)
                    .focused($focusedField, equals: .tags)
                    .submitLabel(.done)
                    .onSubmit {
                        store.notes[index].tags.append(newTag)
                        newTag = ""
                    }

                DatePicker("Observed", selection: $store.notes[index].createdAt,
                           in: ...Date.now)
            }
            .defaultFocus($focusedField, .title)
            #if os(iOS)
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
                    Spacer()
                    Button("Done") { focusedField = nil }
                }
            }
            #endif
        }
    }
}

// FieldNotes/Views/NoteBodyView.swift
struct NoteBodyView: View {
    let note: Note

    private var renderedBody: AttributedString {
        let options = AttributedString.MarkdownParsingOptions(
            interpretedSyntax: .inlineOnlyPreservingWhitespace)
        var text = (try? AttributedString(markdown: note.body, options: options))
            ?? AttributedString(note.body)
        // Highlight the note's tags wherever they appear in the text.
        for tag in note.tags {
            if let range = text.range(of: "#\(tag)") {
                text[range].foregroundColor = .accentColor
                text[range].font = .body.bold()
            }
        }
        return text
    }

    var body: some View {
        ScrollView {
            Text(renderedBody)
                .textSelection(.enabled)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding()
        }
    }
}

// NoteRow: a square photo thumbnail, cropped to fill.
Image(decorative: "TrailheadPhoto")         // decorative: VoiceOver skips it
    .resizable()
    .scaledToFill()                            // .aspectRatio(contentMode: .fill)
    .frame(width: 56, height: 56)
    .clipShape(.rect(cornerRadius: 8))

// NoteDetail: the full photo, never cropped, never upscaled beyond the column.
Image("TrailheadPhoto")
    .resizable()
    .scaledToFit()
    .frame(maxWidth: 600)

// Symbols follow the font: size, weight and baseline come from the text style.
Label("Field Trips", systemImage: "map")
    .font(.headline)

// Variants: .fill, .circle, .slash... applied to every symbol below.
HStack {
    Image(systemName: "pin")
    Image(systemName: "bell")
}
.symbolVariant(.fill)

// Scale relative to the font without changing it.
Image(systemName: "bird").imageScale(.large)

// NoteRow
VStack(alignment: .leading) {
    Text(note.title)
        .font(.headline)
    Text(note.body)
        .font(.subheadline)
        .foregroundStyle(.secondary)
        .lineLimit(2)
    Text(note.createdAt, format: .relative(presentation: .named))
        .font(.caption)
}

// A custom field-journal font that still follows Dynamic Type.
Text(note.title)
    .font(.custom("Charter", size: 20, relativeTo: .title3))

struct NoteRow: View {
    @Environment(\.dynamicTypeSize) private var typeSize
    @ScaledMetric(relativeTo: .headline) private var thumbnailSize = 56.0
    let note: Note

    var body: some View {
        let layout = typeSize.isAccessibilitySize
            ? AnyLayout(VStackLayout(alignment: .leading))
            : AnyLayout(HStackLayout(alignment: .top))

        layout {
            NoteThumbnail(note: note)
                .frame(width: thumbnailSize, height: thumbnailSize)
            NoteRowText(note: note)
        }
    }
}

// The watch complication preview has a fixed canvas: cap the size there.
ComplicationPreview()
    .dynamicTypeSize(...DynamicTypeSize.xxLarge)

// The shape of that tutorial's editor, in FieldNotes terms: a Form of bound controls.
Form {
    TextField("Notebook Name", text: $draft.name)
    Picker("Icon", selection: $draft.symbolName) {
        ForEach(["map", "bird", "leaf", "mountain.2"], id: \.self) { name in
            Image(systemName: name).tag(name)
        }
    }
    .pickerStyle(.palette)
}