import { React, nestsReact } from "../../common";
import webpack from "../../webpack";
import { toggle, del } from "../../plugin";

const Header = webpack.findByProps("Sizes", "Tags");
const Card = webpack.findByDisplayName("Card");
const Flex = webpack.findByDisplayName("Flex");
const FormText = webpack.findByDisplayName("FormText");
const Button = webpack.findByProps("BorderColors", "Colors");
const FormDivider = webpack.findByDisplayName("FormDivider");
const Switch = webpack.findByDisplayName("Switch");

export default (props: { nest: Nest<{ plugins: any }>; name: string }) => {
	nestsReact.useNest(props.nest);
	if (!props.nest.ghost.plugins[props.name]) {
		return null; //you wouldn't think i'd have to do this but
	}
	return (
		<>
			<Card
				type="cardPrimary"
				className="demon-settings-card-base"
				outline={false}
				editable={false}
			>
				<Header
					className="demon-settings-card-header"
					size={Header.Sizes.SIZE_20}
				>
					{props.name}
				</Header>
				<hr className="demon-settings-card-divider" />
				<FormText className="demon-settings-card-desc">
					{props.nest.ghost.plugins[props.name].desc}
				</FormText>
				<svg
					position="top"
					onClick={async () => {
						del(props.name);
					}}
					className="demon-settings-card-delete"
					viewBox="0 0 24 24"
				>
					<path
						fill="var(--text-muted)"
						d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12 1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"
					/>
				</svg>
				<Switch
					className="demon-settings-card-switch"
					checked={props.nest.ghost.plugins[props.name].enabled}
					onChange={async () => {
						toggle(props.name);
					}}
				/>
			</Card>
		</>
	);
};