import webpack from "../../webpack";
import { after } from "../../patcher";
import plugins from "./plugins.jsx";
import hummus from "./hummus.jsx";
import css from "../../css";
import { React } from "../../common";

const SettingsView = webpack.findByDisplayName("SettingsView");

let pluginSettings = [
	{
		section: "HEADER",
		label: "Demoncord"
	},
	{
		section: "demoncord",
		label: "Plugins",
		element: plugins
	},
	{
		section: "DIVIDER"
	}
];

function init() {
	css.createClass("demon-settings-url", {
		"margin-top": "10px",
		width: "100%"
	});
	css.createClass("demon-settings-divider", {
		"margin-top": "10px",
		"margin-bottom": "10px",
		height: "1px"
	});
	css.createClass("demon-settings-card-divider", {
		"margin-top": "5px",
		"margin-bottom": "5px",
		"margin-left": "10px",
		"margin-right": "10px",
		height: "1px",
		border: "thin solid var(--background-modifier-accent)"
	});
	css.createClass("demon-settings-card-base", {
		"margin-bottom": "10px"
	});
	css.createClass("demon-settings-card-header", {
		"margin-left": "10px",
		"margin-top": "10px"
	});
	css.createClass("demon-settings-card-desc", {
		color: "var(--header-secondary)",
		display: "inline-block",
		"font-size": "15px",
		"line-height": "15px",
		"margin-left": "10px",
		"margin-top": "5px",
		"margin-bottom": "10px"
	});
	css.createClass("demon-settings-card-switch", {
		"margin-right": "10px",
		"margin-top": "0px",
		"margin-bottom": "10px",
		float: "right"
	});
	css.createClass("demon-settings-card-delete", {
		"margin-right": "5px",
		float: "right",
		width: "24px",
		cursor: "pointer"
	});
	css.createClass("demon-settings-header-size30", {
		"font-size": "30px",
		"line-height": "34px"
	});
	if (!!window.webpackChunkdiscord_app) {
		after(
			SettingsView.prototype,
			"getPredicateSections",
			(args, sections) => {
				sections.unshift(...pluginSettings);
				return sections;
			}
		);
	} else {
		//I AM SO SORRY
		const UserSettingsModal = webpack.findByProps(
			"getUserSettingsModalSections"
		);
		const TabBar = webpack.findByProps("TabBarItem");
		after("render", UserSettingsModal.default.prototype, (args, ret) => {
			ret.props.children[0].props.children.props.children[1].push(
				React.createElement(
					TabBar.TabBarItem,
					{ key: "demoncord" },
					"Plugins"
				)
			);
			if (
				ret.props.children[0].props.children.props.selectedItem ===
				"demoncord"
			) {
				ret.props.children[1].props.children[0].props.children =
					React.createElement(hummus, {}, "");
			}
		});
	}
}

function add(name, ele) {
	const idx =
		pluginSettings.push({
			section: "demoncord-plugins",
			label: "name",
			element: ele
		}) - 1;
	return () => {
		delete pluginSettings[idx];
	};
}

export default { init, add };