Color Picker personalizado en SwiftUI

import SwiftUI

// Definimos una estructura estática para mantener nuestros colores organizados
struct ColorPalette {
    static let mainColors: [Color] = [
        .red, .orange, .yellow, .green, .mint,
        .teal, .cyan, .blue, .indigo, .purple,
        .pink, .brown, .gray, .black, .white
    ]
    
    // Podemos crear paletas temáticas
    static let pastelColors: [Color] = [
        Color(red: 1.0, green: 0.8, blue: 0.8),
        Color(red: 0.8, green: 1.0, blue: 0.8),
        Color(red: 0.8, green: 0.8, blue: 1.0),
        Color(red: 1.0, green: 0.9, blue: 0.8)
    ]
}

import SwiftUI

struct PaletteColorPicker: View {
    // 1. El estado compartido. El Binding permite que la vista padre lea y escriba este valor.
    @Binding var selectedColor: Color
    
    // 2. Definimos las opciones que este picker mostrará.
    let colors: [Color]
    
    // 3. Configuración del Grid Adaptativo.
    // .adaptive le dice a SwiftUI que meta tantas columnas como quepan, 
    // con un ancho mínimo de 45 puntos.
    let columns = [
        GridItem(.adaptive(minimum: 45, maximum: 60), spacing: 15)
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 15) {
                ForEach(colors, id: \.self) { color in
                    colorButton(for: color)
                }
            }
            .padding()
        }
    }
    
    // Separamos la lógica del botón individual para mantener el body limpio
    @ViewBuilder
    private func colorButton(for color: Color) -> some View {
        let isSelected = selectedColor == color
        
        Circle()
            .fill(color)
            .frame(height: 45)
            // Añadimos una sombra sutil para dar profundidad
            .shadow(color: color.opacity(0.4), radius: 3, x: 0, y: 2)
            // Si está seleccionado, mostramos un anillo exterior
            .overlay(
                Circle()
                    .stroke(Color.primary, lineWidth: isSelected ? 3 : 0)
                    .padding(-4) // Expande el borde hacia afuera
            )
            // Una pequeña animación de escala al ser seleccionado
            .scaleEffect(isSelected ? 1.1 : 1.0)
            // Hacemos que toda el área sea tocable
            .onTapGesture {
                withAnimation(.spring(response: 0.3, dampingFraction: 0.6)) {
                    selectedColor = color
                }
            }
            // Accesibilidad: Vital en la programación Swift profesional
            .accessibilityLabel(Text("Color"))
            .accessibilityValue(Text(color.description))
            .accessibilityAddTraits(isSelected ? [.isSelected, .isButton] : [.isButton])
    }
}

import SwiftUI

struct RGBColorPicker: View {
    @Binding var selectedColor: Color
    
    // Estados internos para manejar los valores de los sliders (0.0 a 1.0)
    @State private var red: Double = 0.5
    @State private var green: Double = 0.5
    @State private var blue: Double = 0.5
    
    var body: some View {
        VStack(spacing: 25) {
            
            // Previsualización del color actual
            RoundedRectangle(cornerRadius: 15)
                .fill(Color(red: red, green: green, blue: blue))
                .frame(height: 100)
                .shadow(radius: 5)
                .overlay(
                    RoundedRectangle(cornerRadius: 15)
                        .stroke(Color.secondary.opacity(0.3), lineWidth: 1)
                )
            
            VStack(spacing: 15) {
                colorSlider(value: $red, color: .red, label: "Rojo")
                colorSlider(value: $green, color: .green, label: "Verde")
                colorSlider(value: $blue, color: .blue, label: "Azul")
            }
        }
        .padding()
        // Cuando los sliders cambian, actualizamos el color principal
        .onChange(of: red) { _ in updateMainColor() }
        .onChange(of: green) { _ in updateMainColor() }
        .onChange(of: blue) { _ in updateMainColor() }
        // Cuando la vista aparece, inicializamos los sliders con el color seleccionado
        .onAppear {
            extractRGB(from: selectedColor)
        }
    }
    
    // Constructor de Sliders reutilizable
    @ViewBuilder
    private func colorSlider(value: Binding<Double>, color: Color, label: String) -> some View {
        HStack {
            Text(label.prefix(1)) // Primera letra (R, V, A)
                .font(.headline)
                .foregroundColor(color)
                .frame(width: 20)
            
            Slider(value: value, in: 0...1)
                .accentColor(color)
            
            // Mostramos el valor de 0 a 255
            Text("\(Int(value.wrappedValue * 255))")
                .font(.subheadline)
                .monospacedDigit()
                .frame(width: 40, alignment: .trailing)
        }
    }
    
    private func updateMainColor() {
        selectedColor = Color(red: red, green: green, blue: blue)
    }
    
    // Función avanzada de programación Swift para extraer RGB
    private func extractRGB(from color: Color) {
        #if canImport(UIKit)
        // Para iOS, tvOS y watchOS
        var r: CGFloat = 0
        var g: CGFloat = 0
        var b: CGFloat = 0
        var a: CGFloat = 0
        
        // Convertimos a UIColor para extraer los componentes
        if UIColor(color).getRed(&r, green: &g, blue: &b, alpha: &a) {
            red = Double(r)
            green = Double(g)
            blue = Double(b)
        }
        #elseif canImport(AppKit)
        // Para macOS
        var r: CGFloat = 0
        var g: CGFloat = 0
        var b: CGFloat = 0
        var a: CGFloat = 0
        
        // Convertimos a NSColor para extraer los componentes
        if let nsColor = NSColor(color).usingColorSpace(.sRGB) {
            nsColor.getRed(&r, green: &g, blue: &b, alpha: &a)
            red = Double(r)
            green = Double(g)
            blue = Double(b)
        }
        #endif
    }
}

import SwiftUI

struct UniversalColorPicker: View {
    @Binding var selection: Color
    @State private var pickerMode: PickerMode = .palette
    
    enum PickerMode {
        case palette
        case rgb
    }
    
    var body: some View {
        VStack(spacing: 0) {
            // Control Segmentado para cambiar de modo
            Picker("Modo de Selector", selection: $pickerMode) {
                Text("Paleta").tag(PickerMode.palette)
                Text("Deslizadores").tag(PickerMode.rgb)
            }
            .pickerStyle(SegmentedPickerStyle())
            .padding()
            
            // Mostramos la vista correspondiente según el modo
            Group {
                if pickerMode == .palette {
                    PaletteColorPicker(selectedColor: $selection, colors: ColorPalette.mainColors)
                        // Transición suave al cambiar de pestaña
                        .transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)))
                } else {
                    RGBColorPicker(selectedColor: $selection)
                        .transition(.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .leading)))
                }
            }
            .animation(.easeInOut, value: pickerMode)
            
            Spacer(minLength: 0)
        }
        .background(Color(UIColor.systemBackground)) // Color de fondo adaptable
        .cornerRadius(20)
    }
}

import SwiftUI

struct ContentView: View {
    @State private var myAppColor: Color = .mint
    @State private var isPickerPresented: Bool = false
    
    var body: some View {
        NavigationView {
            VStack(spacing: 40) {
                // Nuestro elemento de diseño principal que reacciona al color
                Image(systemName: "paintpalette.fill")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 150, height: 150)
                    .foregroundColor(myAppColor)
                    .shadow(color: myAppColor.opacity(0.6), radius: 20, x: 0, y: 10)
                
                Text("Personaliza tu Tema")
                    .font(.title2)
                    .fontWeight(.semibold)
                
                #if os(watchOS)
                // En watchOS, la pantalla es tan pequeña que es mejor usar un NavigationLink
                // en lugar de un modal o un control en línea enorme.
                NavigationLink(destination: PaletteColorPicker(selectedColor: $myAppColor, colors: ColorPalette.mainColors)) {
                    Text("Cambiar Color")
                }
                #else
                // En iOS y macOS, podemos mostrar un botón que abre un Sheet
                Button(action: {
                    isPickerPresented.toggle()
                }) {
                    Text("Abrir Selector de Color")
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(myAppColor)
                        .cornerRadius(15)
                }
                .padding(.horizontal, 40)
                #endif
                
                Spacer()
            }
            .padding(.top, 50)
            .navigationTitle("Ajustes")
            #if os(iOS) || os(macOS)
            // Presentamos nuestro UniversalColorPicker como un modal interactivo
            .sheet(isPresented: $isPickerPresented) {
                UniversalColorPicker(selection: $myAppColor)
                    // Hacemos que el modal sea de tamaño medio en iOS 16+
                    .presentationDetents([.medium, .large])
                    .presentationDragIndicator(.visible)
            }
            #endif
        }
    }
}