//
//  ContentView.swift
//  shape
//
//  Created by Apple on 21/6/2021.
//

import SwiftUI
struct GridStack<Content: View>: View {
    let rows: Int
    let columns: Int
    let content: (Int, Int) -> Content
    
    var body: some View {
        VStack {
            ForEach(0 ..< rows, id: \.self) { row in
                HStack {
                    ForEach(0 ..< columns, id: \.self) { column in
                        content(row, column)
                    }
                }
            }
        }
    }
    
    init(rows: Int, columns: Int, @ViewBuilder content: @escaping (Int, Int) -> Content) {
        self.rows = rows
        self.columns = columns
        self.content = content
    }
}
extension Color {
    static var random: Color {
        return Color(red: .random(in: 0...1),
                     green: .random(in: 0...1),
                     blue: .random(in: 0...1))
    }
}
struct BallView:View {
    var body: some View {
        GeometryReader { e in
            VStack(alignment: .center, spacing: 0) {
                ZStack {
                    Rectangle().fill(Color.white)
                    Rectangle().fill(Color.black).frame(maxWidth: 200, maxHeight: 48, alignment: .bottom)
                        .offset(x: 0, y: 24)
                }.frame(maxWidth: .infinity, maxHeight: e.size.height * 0.132, alignment: .center)
                HStack(alignment: .center, spacing: 0) {
                    Rectangle().fill(Color.black)
                    Rectangle().fill(Color.white).frame(width: 320, height:  .infinity, alignment: .center)
                    Rectangle().fill(Color.black)
                }.frame(maxWidth: .infinity, maxHeight: e.size.height * 0.0882, alignment: .center)
                HStack(alignment: .center, spacing: 0) {
                    ForEach (0 ..< 16,id :\.self ) { idx in
                        Rectangle().fill(idx % 2 == 0 ? .black : Color.init(red: 0.73, green: 0.73, blue: 0.73))
                    }
                }.frame(maxWidth: .infinity, maxHeight: e.size.height * 0.0882, alignment: .center)
                
             
                HStack(alignment: .center, spacing: 0)  {
                    Rectangle().fill(Color.init(red: 1, green: 1, blue: 0.33))
                    Rectangle().fill(Color.init(red: 0.46, green: 0.98, blue: 1.0))
                    Rectangle().fill(Color.init(red: 0.49, green: 0.99, blue: 0.3))
                    Rectangle().fill(Color.init(red: 0.92, green: 0.20, blue: 96))
                    Rectangle().fill(Color.init(red: 0.92, green: 0.0, blue: 0))
                    Rectangle().fill(Color.blue)
                }.frame(maxWidth: .infinity, maxHeight: e.size.height * 0.1617, alignment: .center)
                HStack {
                    GridStack(rows: 2, columns: 6) { row, col in
                        Rectangle().fill(.black).frame(width: 42, height: 22, alignment: .leading)
                    }
                    Spacer()
                    Spacer()
                    GridStack(rows: 2, columns: 6) { row, col in
                        Rectangle().fill(.black).frame(width: 40, height: 22, alignment: .trailing)
                    }
//                    GridStack(rows: 13, columns: 17) { row, col in
//                        Rectangle().fill(.gray).frame(width: 42, height: 42, alignment: .center)
//                    }
                }.background(Color.white).frame(maxWidth: .infinity, maxHeight: e.size.height * 0.0889, alignment: .center)
                
                ZStack {
                    Rectangle().fill(Color.black)
                    HStack (spacing: 0){
                        HStack {
                            ForEach (0 ..< 10,id :\.self ) { idx in
                                Rectangle().fill(.white)
                            }
                        }.background(Color.black)
                        HStack {
                            ForEach (0 ..< 10,id :\.self ) { idx in
                                Rectangle().fill(.white)
                            }
                        }.background(Color.black)
                        HStack {
                            ForEach (0 ..< 12,id :\.self ) { idx in
                                Rectangle().fill(.white)
                            }
                        }.background(Color.black)
                        HStack(spacing: 0) {
                            ForEach (0 ..< 40,id :\.self ) { idx in
                                Rectangle().fill(idx % 2 == 0 ? .white : .black)
                            }
                        }.background(Color.black)
                        
                    }.padding([.leading , .trailing] , 100)
                }.frame(maxWidth: .infinity, maxHeight: e.size.height * 0.1617, alignment: .center)
                    
                
               
                
                HStack(alignment: .center, spacing: 0)  {
                    ForEach (0 ..< 6,id :\.self ) { idx in
                        Rectangle().fill(Color.init(white: 0.2 * Double(idx)))
                    }
                }.frame(maxWidth: .infinity, maxHeight: e.size.height * 0.0882, alignment: .center)
                ZStack {
                    Rectangle().fill(Color.white)
                    Rectangle().fill(Color.black).frame(maxWidth: 300, maxHeight: .infinity, alignment: .center)
                }.frame(maxWidth: .infinity, maxHeight: e.size.height * 0.0882, alignment: .center)
                ZStack {
                    Rectangle().fill(Color.init(red: 1, green: 1, blue: 0.33))
                    Rectangle().fill(Color.red).frame(maxWidth: 42, maxHeight: .infinity, alignment: .center)
                }.frame(maxWidth: .infinity, maxHeight: e.size.height * 0.132, alignment: .center)
                
            }.mask(Circle().opacity(1.0))
        }
       
    }
}
//Circle()
//    .fill(.white)
//    //.opacity(0.2)
//    .frame(width: e.size.width * 0.8, height: e.size.height * 0.8)
    // An example view putting GridStack into practice.
struct ContentView: View {
    var body: some View {
        GeometryReader { e in
            ZStack {
                GridStack(rows: 13, columns: 17) { row, col in
                    Rectangle().fill(.gray).frame(width: 42, height: 42, alignment: .center)
                }.background(.white)
                BallView()
                    .frame(width: e.size.height * 0.82 , height: e.size.height * 0.82 )
//                VStack(alignment: .leading, spacing: 10) {
//                    HStack {
//                        Rectangle().fill(.mint)
//                        Rectangle().fill(.blue)
////                            .frame(width: 42, height: 42*5 + 60, alignment: .leading)
////                            .offset(x: -e.size.width/2 + 162 , y: -e.size.height/2 + 240)
//                    }
//                    HStack {
//                        Rectangle().fill(Color.init(red: 0.75, green: 0.25, blue: 0.40))
//                        Rectangle().fill(.blue)
////                            .frame(width: 42, height: 42*5 + 60, alignment: .leading)
////                            .offset(x: -e.size.width/2 + 162 , y: -e.size.height/2 + 240)
//                    }
//                }.frame(width: 42*2, height: 42*10, alignment: .leading)
//                //   .offset(x: 100  , y: 100)
//                .background(.yellow)
                
            }.frame(maxWidth: .infinity, maxHeight: .infinity,alignment: .center)
        }
    }
}
struct ContentView2: View {
    var body: some View {

        GeometryReader { e in
            ZStack {
                Image.init("tv", bundle: nil)
                    .resizable().aspectRatio(contentMode: .fill)
                    .frame(width: e.size.width, height: e.size.height, alignment: .center)
                Circle()
                    .fill(.green)
                    .opacity(0.2)
                    .frame(width: e.size.width * 0.83, height: e.size.height * 0.83)
            }

        }
    }

}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}