---
import type { Seller } from "../data/models/multis/Seller";
import { getAssetById, getLocaleField } from "../data/api-client";
import path from "node:path";
import { renderMarkdown } from "../lib/rendering";
import type { Multilingual, SquidexEditable } from "./SharedProperties";

interface Props extends Multilingual, SquidexEditable {
	seller: Seller,
}

const { seller, editToken, locale } = Astro.props;

let sellerLogoImageAsset = seller.logoImage[locale] ? await getAssetById(seller.logoImage[locale][0]) : undefined;
let sellerLogoImage = sellerLogoImageAsset ? path.posix.join('/img',
							sellerLogoImageAsset.links['content']
								.href
									.split('/')
										.reverse()
										.filter((_value, index, array) => index < (array.length - index - 2))
										.reverse()
											.join('/')) : '';
---

<div class="seller" data-squidex-token={editToken}>
    <div class="flex">
		{ sellerLogoImage ?
			( sellerLogoImage &&
				sellerLogoImageAsset?.metadata['background-color']
				?
				<img
					src={sellerLogoImage}
					alt={seller.sellerName[locale]}
					title={seller.sellerName[locale]}
					style={`background-color: ${sellerLogoImageAsset.metadata['background-color']}`}
				/>
				:
				<img
					src={sellerLogoImage}
					alt={seller.sellerName[locale]}
					title={seller.sellerName[locale]}
				/>
			) : seller.sellerName[locale]
        }
    </div>
</div>
<div class="seller-dark" data-squidex-token={editToken}>
    <div class="flex">
    	{seller.sellerBio && seller.sellerBio[locale] && <div class="after-flex"><Fragment set:html={renderMarkdown(seller.sellerBio[locale]||'')} /></div> }
	</div>
</div>

<style>
	.seller, .seller-dark {
		margin-bottom: 2rem;
		border: 1px solid rgba(var(--accent-light), 25%);
		padding: 0.5rem;
		border-radius: 8px;
  		font-weight: 300;
  		font-style: normal;
		text-align: left;
	}
	.seller {
		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
	}
	.seller-dark {
		padding: 1rem;
		background-color: rgb(35, 38, 45);
	}
	.seller img {
		min-width: 8rem;
		max-width: 10rem;
		border-radius: 7px;
	}
	.seller .flex {
		display: flex;
		gap: 0.8rem;
		align-items: center;
	}
	.seller .after-flex p {
		text-indent: 5em each-line;
		color: pink;
	}
	.seller .short-desc {
		font-family: "Caveat", cursive;
		font-size: 2.2rem;
	}
	.seller .float-left {
		justify-content: flex-start; 
	}
	.seller .flex-right {
		justify-content: flex-start; 
		position: relative;
	}
	.seller code {
		font-size: 0.8em;
		font-weight: bold;
		background: rgba(var(--accent-light), 12%);
		color: rgb(var(--accent-light));
		border-radius: 4px;
		padding: 0.3em 0.4em;
	}
	.seller strong {
		color: rgb(var(--accent-light));
		/* font-weight: 800; */
	}
</style>

<style is:global>
	.seller a, .seller a:link, .seller a:visited, .seller-dark a, .seller-dark a:link, .seller-dark a:visited {
		text-decoration: underline;
	}
</style>