/*
	GoToSocial
	Copyright (C) GoToSocial Authors admin@gotosocial.org
	SPDX-License-Identifier: AGPL-3.0-or-later

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.

	You should have received a copy of the GNU Affero General Public License
	along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

import React, { useMemo } from "react";
import { useLocation, useParams } from "wouter";
import FormWithData from "../../../lib/form/form-with-data";
import BackButton from "../../../components/back-button";
import { useBaseUrl } from "../../../lib/navigation/util";
import { InteractionRequest } from "../../../lib/types/interaction";
import MutationButton from "../../../components/form/mutation-button";
import { Status } from "../../../components/status";
import { useGetAppQuery } from "../../../lib/query/user/applications";
import { App } from "../../../lib/types/application";

export default function AppDetail({ }) {
	const params: { appId: string } = useParams();
	const baseUrl = useBaseUrl();
	const backLocation: String = history.state?.backLocation ?? `~${baseUrl}`;

	return (
		<div className="application-details">
			<h1><BackButton to={backLocation}/> Application Details</h1>
			<FormWithData
				dataQuery={useGetAppQuery}
				queryArg={params.appId}
				DataForm={AppForm}
				{...{ backLocation: backLocation }}
			/>
		</div>
	);
}

function AppForm({ data: app, backLocation }: { data: App, backLocation: string }) {	
	const [ _location, setLocation ] = useLocation();

	const appWebsite = useMemo(() => {
		if (!app.website) {
			return "";
		}

		try {
			// Try to parse nicely and return link.
			const websiteURL = new URL(app.website);
			const websiteURLStr = websiteURL.toString();
			return (
				<a
					href={websiteURLStr}
					target="_blank"
					rel="nofollow noreferrer noopener"
				>{websiteURLStr}</a>
			);
		} catch {
			// Fall back to returning string.
			return app.website;
		}
	}, [app.website]);
    
	const created = useMemo(() => {
		const createdAt = new Date(app.created_at);
		return <time dateTime={app.created_at}>{createdAt.toDateString()}</time>;
	}, [app.created_at]);

	const redirectURIs = useMemo(() => {
		const length = app.redirect_uris.length;
		if (length === 1)  {
			return app.redirect_uris[0];
		}

		return app.redirect_uris.map((redirectURI, i) => {
			return i === 0 ? <>{redirectURI}</> : <><br/>{redirectURI}</>;
		});

	}, [app.redirect_uris]);

	return (
		<>
			<dl className="info-list">
				<div className="info-list-entry">
					<dt>Name:</dt>
					<dd className="text-cutoff">{app.name}</dd>
				</div>

				{ appWebsite && 
					<div className="info-list-entry">
						<dt>Website:</dt>
						<dd>{appWebsite}</dd>
					</div>
				}

				<div className="info-list-entry">
					<dt>Created:</dt>
					<dd>{created}</dd>
				</div>

				<div className="info-list-entry">
					<dt>Scopes:</dt>
					<dd className="monospace">{app.scopes.join(" ")}</dd>
				</div>

				<div className="info-list-entry">
					<dt>Redirect URI(s):</dt>
					<dd className="monospace">{redirectURIs}</dd>
				</div>
			</dl>
		</>
	);
}