import SwiftUI

struct EvolutionPickerMenu: View {

  @Binding var selectedEvolution: StageType

  private func select(_ stageType: StageType) {
    selectedEvolution = stageType
  }

  var body: some View {
    VStack(alignment: .leading, spacing: 1.0) {
      Section(header: EvolutionPickerMenuHeader(key: "stage_type.section.types")) {
        ForEach(StageType.types) { stage in
          EvolutionPickerMenuItem(stageType: stage, isSelected: selectedEvolution.id == stage.id)
            .onTapGesture {
              select(stage)
            }
        }
      }
      Section(header: EvolutionPickerMenuHeader(key: "stage_type.section.characteristics")) {
        ForEach(StageType.characteristics) { stage in
          EvolutionPickerMenuItem(stageType: stage, isSelected: selectedEvolution.id == stage.id)
            .onTapGesture {
              select(stage)
            }
        }
      }
      Section(header: EvolutionPickerMenuHeader(key: "stage_type.section.general_properties")) {
        ForEach(StageType.properties) { stage in
          EvolutionPickerMenuItem(stageType: stage, isSelected: selectedEvolution.id == stage.id)
            .onTapGesture {
              select(stage)
            }
        }
      }
      Section(header: EvolutionPickerMenuHeader(key: "stage_type.section.custom")) {
        ForEach(StageType.customStages) { customStage in
          EvolutionPickerMenuItem(
            stageType: customStage,
            isSelected: selectedEvolution.id == customStage.id
          )
          .onTapGesture {
            select(customStage)
          }
        }
      }
    }
    .padding(Dimensions.Spacing.coziest)
    .ignoresSafeArea()

  }
}

#Preview {
  EvolutionPickerMenu(selectedEvolution: .constant(.ubiquity))
}

/*
Picker(selection: $selectedEvolution) {
  Divider()
  ForEach(StageType.characteristics) { stage in
    Text(Stage.title(stage))
      .font(selectedEvolution == stage ? .Theme.Body.emphasized : .Theme.Body.regular)
      .tag(stage)
  }
  Divider()
  ForEach(StageType.properties) { stage in
    Text(Stage.title(stage))
      .font(selectedEvolution == stage ? .Theme.Body.emphasized : .Theme.Body.regular)
      .tag(stage)
  }
  Divider()
  ForEach(StageType.custom) { stage in
    Text(Stage.title(stage))
      .font(selectedEvolution == stage ? .Theme.Body.emphasized : .Theme.Body.regular)
      .tag(stage)
  }
} label: {
 Label("evolution_picker.label", image: "Icons/Evolution")
    .font(.Theme.Body.regular)
}.padding(.horizontal, Dimensions.Spacing.regular)
  .padding(.vertical, Dimensions.Spacing.cozy)
 */