//
// Swiftfin is subject to the terms of the Mozilla Public
// License, v2.0. If a copy of the MPL was not distributed with this
// file, you can obtain one at https://mozilla.org/MPL/2.0/.
//
// Copyright (c) 2022 Jellyfin & Jellyfin Contributors
//

import JellyfinAPI
import SwiftUI

struct SingleSeasonEpisodesRowView: View {

	@EnvironmentObject
	var itemRouter: ItemCoordinator.Router
	@ObservedObject
	var viewModel: SingleSeasonEpisodesRowViewModel

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

			L10n.episodes.text
				.font(.title3)
				.padding(.horizontal, 50)

			ScrollView(.horizontal) {
				ScrollViewReader { _ in
					HStack(alignment: .top) {
						if viewModel.isLoading {
							VStack(alignment: .leading) {

								ZStack {
									Color.secondary.ignoresSafeArea()

									ProgressView()
								}
								.mask(Rectangle().frame(width: 500, height: 280))
								.frame(width: 500, height: 280)

								VStack(alignment: .leading) {
									Text("S-E-")
										.font(.caption)
										.foregroundColor(.secondary)
									Text("--")
										.font(.footnote)
										.padding(.bottom, 1)
									Text("--")
										.font(.caption)
										.fontWeight(.light)
										.lineLimit(4)
								}
								.padding(.horizontal)

								Spacer()
							}
							.frame(width: 500)
							.focusable()
						} else if viewModel.episodes.isEmpty {
							VStack(alignment: .leading) {

								Color.secondary
									.mask(Rectangle().frame(width: 500, height: 280))
									.frame(width: 500, height: 280)

								VStack(alignment: .leading) {
									Text("--")
										.font(.caption)
										.foregroundColor(.secondary)
									L10n.noEpisodesAvailable.text
										.font(.footnote)
										.padding(.bottom, 1)
								}
								.padding(.horizontal)

								Spacer()
							}
							.frame(width: 500)
							.focusable()
						} else {
							ForEach(viewModel.episodes, id: \.self) { episode in
								Button {
									itemRouter.route(to: \.item, episode)
								} label: {
									HStack(alignment: .top) {
										VStack(alignment: .leading) {

											ImageView(src: episode.getBackdropImage(maxWidth: 445),
											          bh: episode.getBackdropImageBlurHash())
												.mask(Rectangle().frame(width: 500, height: 280))
												.frame(width: 500, height: 280)

											VStack(alignment: .leading) {
												Text(episode.getEpisodeLocator() ?? "")
													.font(.caption)
													.foregroundColor(.secondary)
												Text(episode.name ?? "")
													.font(.footnote)
													.padding(.bottom, 1)
												Text(episode.overview ?? "")
													.font(.caption)
													.fontWeight(.light)
													.lineLimit(4)
											}
											.padding(.horizontal)

											Spacer()
										}
										.frame(width: 500)
									}
								}
								.buttonStyle(PlainButtonStyle())
								.id(episode.name)
							}
						}
					}
					.padding(.horizontal, 50)
					.padding(.vertical)
				}
				.edgesIgnoringSafeArea(.horizontal)
			}
		}
	}
}