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

import SwiftUI

struct BlendModeIntroduction: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Blend Mode")
                .font(.largeTitle)
            Text("Introduction")
                .font(.title)
                .foregroundColor(.gray)
            Text("Control how layers are blended into each other with the blendMode modifier. You apply blendMode to the TOP layer.")
                .frame(maxWidth: .infinity)
                .padding()
                .background(Color.yellow)
                .foregroundColor(.white)
                .font(.title)

            Text("Blend Mode")
                .font(.title)
            HStack(spacing: 60) {
                ZStack {
                    BlueRectangle()
                    YellowRectangle()
                        .offset(x: 20, y: 20)
                }
                ZStack {
                    Image("sunset")
                        .resizable()
                        .frame(width: 100, height: 100)
                    YellowRectangle()
                        .offset(x: 20, y: 20)
                }
            }
            .padding(.bottom, 40)

            Text("Blend Mode: colorBurn")
                .font(.title)
            HStack(spacing: 60) {
                ZStack {
                    BlueRectangle()
                    YellowRectangle()
                        .offset(x: 20, y: 20)
                        .blendMode(.colorBurn)
                }
                ZStack {
                    Image("sunset")
                        .resizable()
                        .frame(width: 100, height: 100)
                    YellowRectangle()
                        .offset(x: 20, y: 20)
                        .blendMode(.colorBurn)
                }
            }
            .padding(.bottom, 40)
        }
    }
}

// Some things to note about blend modes:

// - The color of your overlay (or top layer) makes a difference in the
// back layer. In this case, I used yellow but you can use any color you
// want.

// - If you are thinking of using blend mode to adjust a color then be
// sure of the result in dark mode too. I have noticed that dark mode
// can drastically change the result in some cases.

struct BlendModeIntroduction_Previews: PreviewProvider {
    static var previews: some View {
        BlendModeIntroduction()
    }
}
