dudu-mastodon/duduji/Core/Profile/Views/ProfileView.swift

//
//  ProfileView.swift
//  duduji
//
//  Created by ching on 2023/5/7.
//

import SwiftUI

struct ProfileView: View {
    @State private var selectedTag: ProfileTabFilterVeiwModel = .statuses

    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                bannerView

                avartarAndUserStatView

                userInfoView

                profileMetadataView

                featuredTagsView

                statusTagsFilterView

                TimeLineView()

                Spacer()
            }
        }
        .ignoresSafeArea()
    }
}

extension ProfileView {
    var bannerView: some View {
        // banner & avarta
        HStack {
            Color(.systemRed)
//                .ignoresSafeArea()
        }
        .frame(height: 192)
    }

    var avartarAndUserStatView: some View {
        // user stats
        HStack(alignment: .top, spacing: 12) {
            RoundedRectangle(cornerRadius: 6)
                .fill(Color.blue)
                .frame(width: 96, height: 96)
                .overlay(
                    RoundedRectangle(cornerRadius: 6)
                        .stroke(.gray.opacity(0.5), lineWidth: 2)
                )
                .padding(.horizontal)
                .offset(y: -40)
            Spacer()
            VStack {
                Text("1234")
                    .bold()
                    .font(.title3)
                    .foregroundColor(.cyan)
                Text("嘟文")
                    .foregroundColor(.gray)
            }
            VStack {
                Text("1234")
                    .bold()
                    .font(.title3)
                    .foregroundColor(.cyan)
                Text("关注")
                    .foregroundColor(.gray)
            }
            VStack {
                Text("1234")
                    .bold()
                    .font(.title3)
                    .foregroundColor(.cyan)
                Text("粉丝")
                    .foregroundColor(.gray)
            }
        }
        .padding(.bottom, -50)
        .padding(.trailing)
    }

    var userInfoView: some View {
        // user info
        HStack(alignment: .firstTextBaseline) {
            VStack(alignment: .leading, spacing: 6) {
                Text("科代")
                    .font(.title3)
                    .bold()
                Text("@Kedai")
                    .foregroundColor(.gray)
                HStack(spacing: 2) {
                    Image(systemName: "calendar")
                    Text("加入于 2021 年 11 月 12 日")
                }
                .foregroundColor(.gray)
                .font(.caption)
            }
            .padding([.horizontal, .top])
        }
    }

    var profileMetadataView: some View {
        HStack {
            VStack(alignment: .leading) {
                VStack(alignment: .leading, spacing: 2) {
                    Text("MFGA")
                        .bold()
                    Text("Make Fanfou Great Again!")
                        .foregroundColor(.cyan)
                    Divider()
                        .padding(.vertical, 4)
                }
                VStack(alignment: .leading, spacing: 4) {
                    Text("MFGA")
                        .bold()

                    HStack {
                        Image(systemName: "checkmark.seal")
                            .foregroundColor(Color.green.opacity(0.80))
                        Text("Make Fanfou Great Again!")
                            .foregroundColor(.cyan)
                    }
                    Divider()
                        .padding(.vertical, 4)
                }
                VStack(alignment: .leading, spacing: 2) {
                    Text("MFGA")
                        .bold()
                    Text("Make Fanfou Great Again!")
                        .foregroundColor(.cyan)
                    Divider()
                        .padding(.vertical, 4)
                }
                VStack(alignment: .leading, spacing: 2) {
                    Text("MFGA")
                        .bold()
                    Text("Make Fanfou Great Again!")
                        .foregroundColor(.cyan)
                }
            }
            .padding(8)
            .background(.gray.opacity(0.2))
            .cornerRadius(4)
            .overlay(
                RoundedRectangle(cornerRadius: 4)
                    .stroke(.gray.opacity(0.35), lineWidth: 1)
            )
        }
        .padding([.horizontal, .top])
    }

    var featuredTagsView: some View {
        HStack {
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 4) {
                    Button {
                        // tags page
                    } label: {
                        VStack(alignment: .leading, spacing: 0) {
                            Text("#广东歌")
                            Text("45 条嘟文")
                                .font(.caption)
                        }
                    }.buttonStyle(.bordered)
                    Button {
                        // tags page
                    } label: {
                        VStack(alignment: .leading, spacing: 0) {
                            Text("#广东")
                            Text("45 条嘟文")
                                .font(.caption)
                        }
                    }.buttonStyle(.bordered)

                    Button {
                        // tags page
                    } label: {
                        VStack(alignment: .leading, spacing: 0) {
                            Text("#广东歌")
                            Text("45 条嘟文")
                                .font(.caption)
                        }
                    }.buttonStyle(.bordered)

                    Button {
                        // tags page
                    } label: {
                        VStack(alignment: .leading, spacing: 0) {
                            Text("#广东")
                            Text("4 条嘟文")
                                .font(.caption)
                        }
                    }.buttonStyle(.bordered)

                    Button {
                        // tags page
                    } label: {
                        VStack(alignment: .leading, spacing: 0) {
                            Text("#广东歌")
                            Text("45 条嘟文")
                                .font(.caption)
                        }
                    }.buttonStyle(.bordered)
                }
            }
        }
        .padding([.horizontal, .top])
    }

    var statusTagsFilterView: some View {
        HStack {
            ScrollView {
                Picker("tags", selection: $selectedTag) {
                    ForEach(ProfileTabFilterVeiwModel.currentAccountTabs, id: \.rawValue) { tag in
                        Image(systemName: tag.iconName)
                            .tag(tag)
                    }
                }
                .pickerStyle(.segmented)
            }
        }
        .padding()
    }
}

struct ProfileView_Previews: PreviewProvider {
    static var previews: some View {
        ProfileView()
    }
}