//
//  ScaleToFitIntroduction.swift
//  SwiftUIViewsMasteryDemo
//
//  Created by RecherJ on 2021/7/20.
//

import SwiftUI

// Whereas the scaleToFill modifier will go beyond a view's frame to maintain the
// aspect ratio, the scaleToFit modifier will also maintain the aspect ratio but
// stay WITHIN the view's frame.

struct ScaleToFitIntroduction: View {
    var body: some View {
        VStack(spacing: 10) {
            Text("Scale To Fit")
                .font(.largeTitle)
            Text("Introduction")
                .font(.title)
                .foregroundColor(.gray)
            Text("Use the scaleToFit modifier to change the size of content to fit the dimensions of the view's frame while maintaining its aspect ratio.")
                .frame(maxWidth: .infinity)
                .padding()
                .font(.title)
                .background(Color("AccentColorLight"))
                .foregroundColor(.white)
                .layoutPriority(1)
            Text("Not scaled to fill the view's frame.")
                .font(.system(size: 22))
            HStack {
                Circle()
                    .fill(Color("AccentColorLight"))
                    .frame(width: 150, height: 80)
                    .border(Color.red)
                Image("yosemite")
                    .resizable()
                    .frame(width: 150, height: 80)
                    .border(Color.red)
                Text("Photo of Yosemite")
                    .frame(width: 50, height: 50)
                    .border(Color.red)
            }
            Text("Scaled to fill the view's frame")
                .font(.system(size: 22))
                .padding(.bottom)

            VStack(spacing: 20) {
                Circle()
                    .fill(Color("AccentColorLight"))
                    .scaledToFit()
                    .frame(width: 150, height: 80)
                    .border(Color.red)
                Image("yosemite")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 150, height: 80)
                    .border(Color.red)
                Text("Photo of Yosemite")
                    .scaledToFit()
                    .frame(width: 50, height: 50)
            }
        }
    }
}

// No change for shapes. For images know that you can also use
// .aspectRatio(contentMode: .fit) to achieve the same effect.
// Text will not scale using this modifier. Instaed, use the
// minimumScaleFactor modifier.
// See section on Text earlier in this book.

struct ScaleToFitIntroduction_Previews: PreviewProvider {
    static var previews: some View {
        ScaleToFitIntroduction()
            .preferredColorScheme(.dark)
    }
}
