//
//  BoosterSubscriptionCardView.swift
//
//
//  Created by Victor on 12/06/2024.
//

import SwiftUI

struct BoosterSubscriptionCardView: View {
    let id: Int
    @State var scale = 1.0
    @Binding var selectedId: Int
    var currentOption: Bool = false
    var isFree: Bool = false
    var isMinimized: Bool {
        selectedId != id
    }
    
    init(id: Int, selectedId: Binding<Int>, currentOption: Bool = false, isFree: Bool = false) {
        self.id = id
        self._selectedId = selectedId
        self.currentOption = currentOption
        self.isFree = isFree
    }

    var body: some View {
        VStack {
            if currentOption {
                SQText("Option actuelle", font: .bold)
                    .foregroundColor(.sqRoyal())
            }
            ZStack(alignment: .topLeading) {
                VStack {
                    SQText("3 jours", size: 32, font: .bold)
                        .minimumScaleFactor(0.5)
                        .lineLimit(1)
                        .foregroundColor(.white)
                    SQText("par semaine", size: 14)
                        .minimumScaleFactor(0.5)
                        .lineLimit(1)
                        .foregroundColor(.white)
                        .opacity(0.7)
                    Spacer()
                    SkeletonCellView()
                    //                SQText("20,00 € / mois", size: 12)
                    //                    .minimumScaleFactor(0.5)
                    //                    .lineLimit(1)
                    //                    .foregroundColor(.white)
                    SQText("Sans engagement", size: 12)
                        .minimumScaleFactor(0.5)
                        .lineLimit(1)
                        .foregroundColor(.white)
                }
                .frame(maxWidth: 130, maxHeight: 140)
                .padding(.bottom, 8)
                .padding(.top, 30)
                .padding([.leading, .trailing])
                
                Image("booster_corner_light")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .position(x: 25, y: 25)
                    .cornerRadius(8)
            }
            .frame(maxWidth: 130, maxHeight: 140)
            .overlay(RoundedRectangle(cornerRadius: 8)
                .strokeBorder(isMinimized ? Color.sqRoyal(40) : Color.sqRoyal(), lineWidth: isMinimized ? 0 : 1))
            .background(
                RoundedRectangle(cornerRadius: 8)
                    .fill(LinearGradient(
                        colors: [isMinimized ? Color.sqRoyal(40) : Color.sqRoyal(), isMinimized ? Color.sqRoyal(40) : Color.sqPurple()],
                        startPoint: .top, endPoint: .bottom))
            )
            if isFree {
                SQText("1 mois gratuit *", font: .bold)
                    .foregroundColor(.sqRoyal())
            }
        }
        .opacity(isMinimized ? 0.5 : 1)
        .scaleEffect(scale)
        .animation(.easeIn(duration: 0.1))
        .onChange(of: selectedId, perform: { newValue in
            if isMinimized {
                scale = 0.9
            } else {
                scale = 1
            }
        })
        .onAppear(perform: {
            if isMinimized {
                scale = 0.9
            } else {
                scale = 1
            }
        })
    }
}

#Preview {
    ZStack {
        HStack {
            BoosterSubscriptionCardView(id: 1, selectedId: .constant(2))
            BoosterSubscriptionCardView(id: 2, selectedId: .constant(2), currentOption: true)
            BoosterSubscriptionCardView(id: 3, selectedId: .constant(2))
        }
        .padding()
    }
    .ignoresSafeArea()
}
