Tusker/Tusker/Screens/Compose/ComposePollView.swift

//
//  ComposePollView.swift
//  Tusker
//
//  Created by Shadowfacts on 4/28/21.
//  Copyright © 2021 Shadowfacts. All rights reserved.
//

import SwiftUI

struct ComposePollView: View {
    private static let formatter: DateComponentsFormatter = {
        let f = DateComponentsFormatter()
        f.maximumUnitCount = 1
        f.unitsStyle = .full
        f.allowedUnits = [.weekOfMonth, .day, .hour, .minute]
        return f
    }()
    
    @ObservedObject var draft: Draft
    @ObservedObject var poll: Draft.Poll
    
    @Environment(\.colorScheme) var colorScheme: ColorScheme
    
    @State private var duration: Duration
    
    init(draft: Draft, poll: Draft.Poll) {
        self.draft = draft
        self.poll = poll
        
        self._duration = State(initialValue: .fromTimeInterval(poll.duration) ?? .oneDay)
    }

    var body: some View {
        VStack {
            HStack {
                Text("Poll")
                    .font(.headline)
                
                Spacer()
                
                Button(action: self.removePoll) {
                    Image(systemName: "xmark")
                        .imageScale(.small)
                        .padding(4)
                }
                .accentColor(buttonForegroundColor)
                .background(Circle().foregroundColor(buttonBackgroundColor))
                .hoverEffect()
            }
            
            ForEach(Array(poll.options.enumerated()), id: \.element.id) { (e) in
                ComposePollOption(poll: poll, option: e.element, optionIndex: e.offset)
            }
            .transition(.slide)
            
            Button(action: self.addOption) {
                Label("Add Option", systemImage: "plus")
            }

            HStack {
                // use .animation(nil) on the binding and .frame(maxWidth: .infinity) on labels so frame doesn't have a size change animation when the text changes
                Picker(selection: $poll.multiple.animation(nil), label: Text(poll.multiple ? "Allow multiple choices" : "Single choice").frame(maxWidth: .infinity)) {
                    Text("Allow multiple choices").tag(true)
                    Text("Single choice").tag(false)
                }
                .pickerStyle(MenuPickerStyle())
                .frame(maxWidth: .infinity)
                
                Picker(selection: $duration.animation(nil), label: Text(verbatim: ComposePollView.formatter.string(from: duration.timeInterval)!).frame(maxWidth: .infinity)) {
                    ForEach(Duration.allCases, id: \.self) { (duration) in
                        Text(ComposePollView.formatter.string(from: duration.timeInterval)!).tag(duration)
                    }
                }
                .pickerStyle(MenuPickerStyle())
                .frame(maxWidth: .infinity)
            }
        }
        .padding(8)
        .background(
            backgroundColor
                .cornerRadius(10)
        )
        .onChange(of: duration, perform: { (value) in
            poll.duration = value.timeInterval
        })
    }
    
    private var backgroundColor: Color {
        // in light mode, .secondarySystemBackground has a blue-ish hue, which we don't want
        colorScheme == .dark ? Color(UIColor.secondarySystemBackground) : Color(white: 0.95)
    }
    
    private var buttonBackgroundColor: Color {
        Color(white: colorScheme == .dark ? 0.1 : 0.8)
    }
    
    private var buttonForegroundColor: Color {
        Color(UIColor.label)
    }
    
    private func removePoll() {
        withAnimation {
            self.draft.poll = nil
        }
    }
    
    private func addOption() {
        withAnimation(.easeInOut(duration: 0.25)) {
            poll.options.append(Draft.Poll.Option(""))
        }
    }
}

extension ComposePollView {
    enum Duration: Hashable, Equatable, CaseIterable {
        case fiveMinutes, thirtyMinutes, oneHour, sixHours, oneDay, threeDays, sevenDays
        
        static func fromTimeInterval(_ ti: TimeInterval) -> Duration? {
            for it in allCases where it.timeInterval == ti {
                return it
            }
            return nil
        }
        
        var timeInterval: TimeInterval {
            switch self {
            case .fiveMinutes:
                return 5 * 60
            case .thirtyMinutes:
                return 30 * 60
            case .oneHour:
                return 60 * 60
            case .sixHours:
                return 6 * 60 * 60
            case .oneDay:
                return 24 * 60 * 60
            case .threeDays:
                return 3 * 24 * 60 * 60
            case .sevenDays:
                return 7 * 24 * 60 * 60
            }
        }
    }
}

struct ComposePollOption: View {
    @ObservedObject var poll: Draft.Poll
    @ObservedObject var option: Draft.Poll.Option
    let optionIndex: Int
    
    var body: some View {
        HStack(spacing: 4) {
            Checkbox(radiusFraction: poll.multiple ? 0.1 : 0.5, borderWidth: 2)
                .animation(.default)
            
            
            textField
            
            Button(action: self.removeOption) {
                Image(systemName: "minus.circle.fill")
            }
            .foregroundColor(poll.options.count == 1 ? .gray : .red)
            .disabled(poll.options.count == 1)
            .hoverEffect()
        }
    }
    
    private var textField: some View {
        var field = ComposeEmojiTextField(text: $option.text, placeholder: "Option \(optionIndex + 1)")
        return field.backgroundColor(.systemBackground)
    }
    
    private func removeOption() {
        _ = withAnimation {
            poll.options.remove(at: optionIndex)
        }
    }
    
    struct Checkbox: View {
        private let radiusFraction: CGFloat
        private let size: CGFloat = 20
        private let innerSize: CGFloat
        
        init(radiusFraction: CGFloat, borderWidth: CGFloat) {
            self.radiusFraction = radiusFraction
            self.innerSize = self.size - 2 * borderWidth
        }
        
        var body: some View {
            ZStack {
                Rectangle()
                    .foregroundColor(.gray)
                    .frame(width: size, height: size)
                    .cornerRadius(radiusFraction * size)
                
                Rectangle()
                    .foregroundColor(Color(UIColor.systemBackground))
                    .frame(width: innerSize, height: innerSize)
                    .cornerRadius(radiusFraction * innerSize)
            }
        }
    }
}

//struct ComposePollView_Previews: PreviewProvider {
//    static var previews: some View {
//        ComposePollView()
//    }
//}