(SwiftUI)16.lazyGridView

//
//  SegmentLayoutView.swift
//  lazyVGrid_tutorial
//
//  Created by devdepot on 2021/04/29.
//

import SwiftUI


enum LayoutType: CaseIterable {
    case table,grid,multiple
}

extension LayoutType{
    // 레이아웃 타입에 대한 칼럼이 자동으로 설정되도록 한다
    var columns : [GridItem]{
        switch self {
        case .table:
            return[
                // flexible 하나로 한줄로 표현
                GridItem(.flexible())
            ]
        case .grid:
            return [
                // flexible 두개를 넣어서 두개의 레이아웃
                GridItem(.flexible()),
                GridItem(.flexible())
            ]
        case .multiple:
            return [
                //어댑티브를 통해 크기 닿는데 까지 아이템 여러개 쑤셔 넣기
                GridItem(.adaptive(minimum: 100))
            ]
        
    }
}
}

struct SegmentLayoutView: View {
    
    var dummyDataArray = MyModel.dummyDataArray
    
    @State var selectedLayoutType: LayoutType = .table
    
    var body: some View{
        VStack{
            //피커
            Picker(selection: $selectedLayoutType, label: Text("레이아웃 타입"), content: {
                ForEach(LayoutType.allCases,id: \.self,content: {
                    layoutType in
                    switch layoutType{
                    case .table:
                        Image(systemName: "list.dash")
                    case .grid:
                        Image(systemName: "square.grid.2x2.fill")
                    case .multiple:
                        Image(systemName: "circle.grid.3x3.fill")
                    }
                })
            })
            .pickerStyle(SegmentedPickerStyle())
            //내용물
            ScrollView{
                LazyVGrid(columns: selectedLayoutType.columns, content: {
                    ForEach(dummyDataArray){ dateItem in
                   
                        switch selectedLayoutType{
                            case .table:
                                Rectangle().frame(height: 100)
                                    .foregroundColor(.blue)
                        case .grid:
                            RoundedRectangle(cornerRadius: 25.0)
                                .foregroundColor(Color.orange)
                                .frame(height:200)
                                .overlay(
                                    VStack{
                                        Circle()
                                            .frame(height:100)
                                            .foregroundColor(.yellow)
                                        Spacer()
                                            .frame(height:10)
                                        Text("\(dateItem.title)")
                                        Text("\(dateItem.content)")
                                    }
                                )
                        case .multiple:
                            Rectangle().frame(height: 100)
                                .foregroundColor(.green)
                                
                    }
                   
                       
                        
                    }
                   Rectangle()
                })
                .animation(.easeInOut)
            }
        }
    }
}

struct SegmentLayoutView_Previews: PreviewProvider {
    static var previews: some View {
        SegmentLayoutView()
    }
}