import UIKit

class CompositionalLayoutDemoVC: UIViewController {
    // 1. 創建集合視圖
    private lazy var collectionView: UICollectionView = {
        // 2. 配置組合佈局
        let layout = createCompositionalLayout()
        let cv = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
        cv.backgroundColor = .white
        cv.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        cv.dataSource = self
        return cv
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(collectionView)
    }
    
    // 3. 核心：創建組合佈局
    private func createCompositionalLayout() -> UICollectionViewCompositionalLayout {
        // Step 1: 定義Item（單個單元格）
        // fractionalWidth(0.5)：佔Group寬度的50% → 實現2列
        // fractionalHeight(1.0)：佔Group高度的100%
        let itemSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(0.5),
            heightDimension: .fractionalHeight(1.0)
        )
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        // 給Item加間距（可選）
        item.contentInsets = NSDirectionalEdgeInsets(top: 2, leading: 2, bottom: 2, trailing: 2)
        
        // Step 2: 定義Group（包裹Item的容器）
        // fractionalWidth(1.0)：佔Section寬度的100%
        // absolute(100)：固定高度100pt
        let groupSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .absolute(100)
        )
        // .horizontal：Item在Group內水平排列
        let group = NSCollectionLayoutGroup.horizontal(
            layoutSize: groupSize,
            subitems: [item]
        )
        
        // Step 3: 定義Section（包裹Group的分區）
        let section = NSCollectionLayoutSection(group: group)
        // 給Section加整體間距（可選）
        section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
        
        // Step 4: 創建最終佈局
        return UICollectionViewCompositionalLayout(section: section)
    }
}

// 4. 實現數據源（填充測試內容）
extension CompositionalLayoutDemoVC: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20 // 測試用20個單元格
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        // 隨機背景色，方便看效果
        cell.backgroundColor = UIColor(
            red: CGFloat.random(in: 0...1),
            green: CGFloat.random(in: 0...1),
            blue: CGFloat.random(in: 0...1),
            alpha: 1.0
        )
        return cell
    }
}