import React, { Fragment } from 'react';
import { baseSpacing, CloseableMessage, Flex, fontSizes, Title, Wrapper } from 'dot-design-system';
import SetupTab from '../authentication/SetupTab';
import PlacementTab from '../placements/PlacementTab';
import SavedPlacementsTab from '../placements/SavedPlacementsTab';
import { MdCloudDownload, MdEdit, MdSettings } from 'react-icons/md';
import { AiOutlineLineChart } from 'react-icons/ai';
import { RiHandHeartLine } from 'react-icons/ri';
import TabsMenu from '../layout/TabsMenu';
import { useStoreActions, useStoreState } from '../store/store.hooks';
import { AdminScreen } from './admin.models';
import Logo from '../assets/logo';
import { css } from 'styled-components';

interface Props {}

function AdminAppContainer({}: Props) {
	const { currentScreen, messageTitle, messageContent } = useStoreState((state) => ({
		currentScreen: state.admin.currentScreen,
		messageTitle: state.admin.messageTitle,
		messageContent: state.admin.messageContent,
	}));
	const setScreen = useStoreActions((actions) => actions.admin.setScreen);
	const resetPlacementSelect = useStoreActions(
		(actions) => actions.placements.resetPlacementSelect
	);
	const setMessage = useStoreActions((actions) => actions.admin.setMessage);

	return (
		<Fragment>
			<Flex
				justifyContent={'space-between'}
				alignItems={'center'}
				mt={baseSpacing * 3}
				mb={baseSpacing}
			>
				<Wrapper width={100}>{Logo}</Wrapper>
				<Title
					component={'h4'}
					p={0}
					fontSize={fontSizes.lg}
					css={`
						&& {
							@media (max-width: 550px) {
								font-size: ${fontSizes.medium};
							}
						}
					`}
				>
					DOT For Wordpress
				</Title>
			</Flex>
			{messageTitle && messageContent && (
				<Flex
					justifyContent={'center'}
					pr={330}
					pl={120}
					mt={-105}
					mb={baseSpacing * 3}
					css={css`
						&& {
							@media (max-width: 1160px) {
								margin-top: 0;
								padding-left: 0;
								padding-right: 0;
							}
						}
					`}
				>
					<CloseableMessage
						title={messageTitle}
						width={'100%'}
						css={`
							max-width: 80%;

							&& {
								@media (max-width: 750px) {
									max-width: 95%;
								}
							}
						`}
						onClose={() => setMessage({ title: '', content: '' })}
					>
						{messageContent}
					</CloseableMessage>
				</Flex>
			)}
			<TabsMenu
				activeKey={currentScreen}
				onTabSelect={(newActiveKey) => {
					setScreen(newActiveKey as AdminScreen);
					return true;
				}}
				variant={'dark'}
				tabs={[
					{
						title: 'Setup',
						icon: <MdSettings />,
						key: AdminScreen.Setup,
						tab: () => <SetupTab />,
					},
					{
						title: 'New Position',
						icon: <MdEdit />,
						key: AdminScreen.Publish,
						tab: () => <PlacementTab />,
						onClick: () => {
							resetPlacementSelect();
							return true;
						},
					},
					{
						title: 'Saved Position(s)',
						icon: <MdCloudDownload />,
						key: AdminScreen.Saved,
						tab: () => <SavedPlacementsTab />,
					},
					{
						key: AdminScreen.Analytics,
						title: 'Analytics >',
						icon: <AiOutlineLineChart />,
						onClick: () => {
							window.open('https://portal.dotaudiences.com/analytics');
							return false;
						},
						tab: () => null,
					},
					{
						key: AdminScreen.Help,
						title: 'Help >',
						icon: <RiHandHeartLine />,
						onClick: () => {
							window.open('https://help.dotaudiences.com');
							return false;
						},
						tab: () => null,
					},
				]}
			/>
		</Fragment>
	);
}

export default AdminAppContainer;