import { Tooltip } from "@mui/material";
import { FC, useState } from "react";
import { FormatterResultWithHtml, FormatterResultWithText } from "slickgrid";

import { StyledDialogContentText } from "../styles";

import Styled from "./TotalByColumn.style";

export const TotalByColumn: FC<IProps> = ({ label, total, totalFormatted }) => {
	const [open, setOpen] = useState(false);

	function copyToClipboard() {
		navigator.clipboard.writeText(`${total}`);
		setOpen(true);
		setTimeout(() => {
			setOpen(false);
		}, 1000);
	}

	return (
		<StyledDialogContentText>
			<span>{`Total ${label}:`}</span>
			<Styled.Total>
				<span>{`${totalFormatted}`}</span>
				{open ? (
					<Styled.Icon className={"sgi sgi-check"}></Styled.Icon>
				) : (
					<Tooltip title={"Copy to clipboard"}>
						<Styled.Icon
							className={"sgi sgi-content-copy"}
							onClick={copyToClipboard}
						/>
					</Tooltip>
				)}
			</Styled.Total>
		</StyledDialogContentText>
	);
};

interface IProps {
	label: string;
	total: number;
	totalFormatted:
		| string
		| HTMLElement
		| DocumentFragment
		| FormatterResultWithHtml
		| FormatterResultWithText;
}