package components

import "fmt"
import "github.com/ortfo/db"
import "github.com/ewen-lbh/portfolio/shared"

func ThumbPath(work ortfodb.AnalyzedWork, language string) string {
	return shared.Media(work.ThumbnailPath(language, 600))
}

func Thumb(work ortfodb.AnalyzedWork, language string) ortfodb.Media {
	return work.ThumbnailBlock(language)
}

func css(work ortfodb.AnalyzedWork, language string) templ.Component {
	accentColor := work.Colors(language).Tertiary
	if accentColor == "" {
		accentColor = work.Colors(language).Secondary
	}
	return shared.CSS(shared.Selectors{
		"[data-work=" + work.ID + "]": {
			"--accent":      shared.Color(accentColor),
			"--accent-text": shared.ReadableOn(accentColor),
		},
		"[data-work=" + work.ID + "] img": {
			"width":  "300px",
			"height": fmt.Sprintf("%dpx", int(300/work.ThumbnailBlock(language).Dimensions.AspectRatio)),
		},
	})
}

css card() {
	display: flex;
	background-color: white;
	color: black;
	overflow: hidden;
	transition: all 0.25s ease,  box-shadow 0.12s ease-in-out;
	width: 300px;
	box-shadow: 0 0 0 0px var(--secondary, white);
}

css image() {
	height: 100%;
	width: 100%;
	background-color: white;
	transition: all 0.25s ease 0.12s;
}

css anchor() {
	display: block;
	height: 100%;
	width: 100%;
	text-decoration: none;
}

css info() {
	padding: 0.5em;
	transition: max-height 0.2s ease-in-out;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

css infoTitleAndDate() {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

css tags() {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	column-gap: 0.5em;
	font-size: 0.8em;
}

css title() {
	max-width: 65%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

css wipIndicator() {
	font-family: var(--mono);
}

templ WorkCard(work ortfodb.AnalyzedWork, language string) {
	@shared.PseudoElement(wipIndicator(), "before", shared.Declarations{
		"content": "''",
		"height":"1.3ch",
		"width": "1.3ch",
		"display": "inline-block",
		"margin-right": "1ch",
		"border-radius": "50%",
		"background-color": "red",
	})
	@css(work, language)
	<style>
		article.work:hover, article.work:focus-within {
			box-shadow: 0 0 0 5px var(--accent, black);
			color: var(--accent-text, black);
			background-color: var(--accent, white);
			border-radius: 0.75em;
		}
		article.work:hover img, article.work:focus-within img {
			border-radius: 0 0 0.75em 0.75em;
		}

		article.work .info * {
			text-decoration: none;
		}
	</style>
	<article
		i18n-attrs
		data-work={ work.ID }
		data-title={ work.Content.Localize(language).Title.String() }
		i18n:commas:data-tags={ strings.Join(work.Metadata.Tags, ",") }
		data-year={ shared.FormatDate(work.Metadata.CreatedAt(), "2006", language) }
		class={ "work", card() }
		data-no-thumb?={ ThumbPath(work, language) == "http://localhost:8080/" }
		data-primary={ shared.Color(work.Colors(language).Primary) }
		data-secondary={ shared.Color(work.Colors(language).Secondary) }
	>
		<a class={ anchor() } href={ templ.URL("/" + work.ID) }>
			if ThumbPath(work, language) != "" {
				<img
					class={ image() }
					class="thumb"
					src={ ThumbPath(work, language) }
					loading="lazy"
				/>
			} else {
				<h4 data-long?={ len(work.Content.Localize(language).Title.String()) > 10 }>
					@shared.HTML(work.Content.Localize(language).Title)
				</h4>
			}
			<div class={ "info", info() }>
				<div class={ infoTitleAndDate() }>
					<span class={ title() }>
						@shared.HTML(work.Content.Localize(language).Title)
					</span>
					if work.Metadata.WIP {
						<abbr class={ wipIndicator() } title="Work In Progress">
							WIP	
						</abbr>
					} else if work.Metadata.CreatedAt().Year() != 9999 {
						<span class="date">
							{ shared.FormatDate(work.Metadata.CreatedAt(), "Jan 2006", language) }
						</span>
					}
				</div>
				<ul class={ tags() }>
					for _, tag := range work.Metadata.Tags {
						<li i18n>{ tag }</li>
					}
				</ul>
			</div>
		</a>
	</article>
}