//
//  ShadowOpacityAndShadows.swift
//  SwiftUIViewsMasteryDemo
//
//  Created by RecherJ on 2021/7/27.
//

import SwiftUI

struct ShadowOpacityAndShadows: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Shadow")
                .font(.largeTitle)
            Text("Opacity & Shapes")
                .font(.title)
                .foregroundColor(.gray)
            Text("Shadows will form around the opaque (solid) parts of the view. So sometimes you will have to add a solid shape or a color to put the shadow around.")
                .frame(maxWidth: .infinity)
                .padding()
                .font(.title)
                .background(Color.blue)
                .foregroundColor(.white)
                .layoutPriority(1)

            Button(action: {}) {
                Text("Just Outside")
                    .font(.title)
            }
            .padding()
            .background(
                Capsule()
                    .stroke(Color.blue, lineWidth: 2)
                    .shadow(color: .black, radius: 5)
            )

            Text("Say you want the shadow just on the outside of the button. You need an opaque fill. Here is one way to solve this:")
                .font(.title)
                .padding(.horizontal)
                .layoutPriority(1)
            Button(action: {}) {
                Text("Just Outside")
                    .font(.title)
            }
            .padding()
            .background(
                // Solid white capsule inside
                Capsule()
                    .fill(Color.white)
                    // Add the shadow on the capsule
                    .shadow(color: .black, radius: 5)
            )
            .overlay(Capsule().stroke(Color.blue, lineWidth: 2))

            Text("Here is another way:")
                .font(.title)
                .padding(.horizontal)
            Button(action: {}) {
                Text("Just Outside")
                    .font(.title)
            }
            .padding()
            // You can use a solid white fill with a corner radius
            .background(Color.white)
            .cornerRadius(/*@START_MENU_TOKEN@*/3.0/*@END_MENU_TOKEN@*/)
            .clipShape(Capsule())
            .shadow(color: .black, radius: 5)
            .overlay(
                Capsule()
                    .stroke(Color.blue, lineWidth: 2)
            )
        }
    }
}

struct ShadowOpacityAndShadows_Previews: PreviewProvider {
    static var previews: some View {
        ShadowOpacityAndShadows()
    }
}
