import { css } from '@rocket.chat/css-in-js';
import { Box, SidebarDivider, Palette, SidebarFooter as Footer } from '@rocket.chat/fuselage';
import { useThemeMode } from '@rocket.chat/ui-client';
import { useSetting } from '@rocket.chat/ui-contexts';
import DOMPurify from 'dompurify';
import { useMemo } from 'react';

import { SidebarFooterWatermark } from './SidebarFooterWatermark';

const SidebarFooterDefault = () => {
	const theme = useThemeMode();
	const logo = useSetting(theme === 'dark' ? 'Layout_Sidenav_Footer_Dark' : 'Layout_Sidenav_Footer', '').trim();

	const dangerousLogo = useMemo(() => ({ __html: DOMPurify.sanitize(logo) }), [logo]);

	const sidebarFooterStyle = css`
		& img {
			max-width: 100%;
			height: 100%;
		}

		& a:any-link {
			color: ${Palette.text['font-info']};
		}
	`;

	return (
		<Footer>
			<SidebarDivider />
			<Box paddingBlock={12} height='x48' width='auto' className={sidebarFooterStyle} dangerouslySetInnerHTML={dangerousLogo} />
			<SidebarFooterWatermark />
		</Footer>
	);
};

export default SidebarFooterDefault;