"use strict";

const React = require("react");
const url = require("url");

function NoticeBox({ children, siteName }) {
	return (
		<div style={{backgroundColor: "#3C0000", color: "white", padding: "4px", margin: "4px"}}>
			<strong>This is a mobile proxy.</strong> It is intended to visit {siteName} on devices that would otherwise not correctly display the site. {children}
		</div>
	);
}

module.exports = {
	port: 3000,
	hosts: {
		"awesomedude.cryto.net": {
			prefix: () => (
				<NoticeBox siteName="AwesomeDude" />
			),
			filters: [{
				matchPath: "/",
				mapUrl: "http://www.awesomedude.com/",
				mapContent: ($) => $("#container").html()
			}, {
				mapUrl: ({path}) => url.resolve("http://www.awesomedude.com/", path),
				mapContent: ($) => $("body").html()
			}]
		},
		"castleroland.cryto.net": {
			prefix: () => (
				<NoticeBox siteName="CastleRoland.net">
					Please direct all your feedback to <a style={{ color: "white" }} href="http://www.castleroland.net/">CastleRoland.net</a> directly!
				</NoticeBox>
			),
			filters: [{
				matchPath: "/",
				mapUrl: "https://castleroland.net/stories-categories/",
				mapContent: ($) => $("section.home_about").html()
			}, {
				mapUrl: ({path}) => url.resolve("https://www.castleroland.net/", path),
				mapContent: ($) => $("section.home_about").html()
			}]
		},
		"iomfats.cryto.net": {
			prefix: () => (
				<NoticeBox siteName="the IOMfAtS Story Shelf">
					Please direct all your feedback to the <a style={{ color: "white" }} href="http://iomfats.org/aboutme/">friendly guy over at IOMfAtS</a>!
				</NoticeBox>
			),
			filters: [{
				matchPath: "/",
				mapUrl: "http://iomfats.org/storyshelf/",
				mapContent: ($) => $("div#homelinks").html()
			}, {
				mapUrl: ({path}) => url.resolve("http://iomfats.org/", path),
				mapContent: ($) => $("div#content").html()
			}]
		}
	}
};