import type React from 'react';
import { useSelector } from 'react-redux';
import type { RootState } from '../../../../ReduxState/store';
import type { CompanyDbModel } from '../../../Companies/Components/CompaniesComponents.helper';
import SignUpLogo from '../../../../Components/Layout/SignUpLogo';
import styles from '../../../../Components/Layout/Side/NavBar.module.scss';

const PrintDashboardCoverPage: React.FC = () => {
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	const protocol = window.location.protocol; // e.g., "https:"
	const hostname = window.location.hostname; // e.g., "www.example.com"
	const port = window.location.port; // e.g., "3000" or ""
	// Get today's date in DD/MM/YY format
	const today = new Date();
	const day = String(today.getDate()).padStart(2, '0');
	const month = String(today.getMonth() + 1).padStart(2, '0');
	const year = String(today.getFullYear()).slice(-2);
	const formattedDate = `${day}/${month}/${year}`;

	return (
		<div
			style={{
				display: 'flex',
				justifyContent: 'center',
				alignItems: 'center',
				height: '100vh',
				textAlign: 'center',
				fontFamily: 'Arial, sans-serif'
			}}
		>
			<div>
				<p style={{ textAlign: 'center' }}>
					{selectedCompany?.branding?.logo && (
						<img
							src={`${protocol}//${hostname}${port ? `:${port}` : ''}/${
								selectedCompany?.branding?.logo
							}`}
							alt="Company Logo"
							style={{ width: '100px', height: 'auto' }}
						/>
					)}
					{!selectedCompany?.branding?.logo && <SignUpLogo logoClass={styles.logo} />}
				</p>
				<p style={{ margin: 0, fontSize: '1.5em' }}>
					Prepared for {selectedCompany?.company_name} <br /> Services Only
				</p>
				<p style={{ margin: '10px 0', fontSize: '1.2em' }}>using moneyXplier® tools</p>
				<p style={{ margin: 0, fontSize: '1em' }}>{formattedDate}</p>
			</div>
		</div>
	);
};

export default PrintDashboardCoverPage;