import { ActionIcon, Group, Stack, Tabs, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import {
	FiArrowLeftCircle,
	FiBook,
	FiBookmark,
	FiEdit,
	FiGlobe,
	FiMail,
	FiSearch,
	FiUser,
} from 'react-icons/fi';
import { useNavigate } from 'react-router-dom';
import { actionIconClasses, tabClasses, textClasses } from 'styles';
import Applications from './components/Applications';
import Bookmarks from './components/Bookmarks';
import Categories from './components/Categories';
import Messages from './components/Messages';
import Personalization from './components/Personalization';
import SearchProviders from './components/SearchProviders';
import Themes from './components/Themes';

export function Settings() {
	const { isMobile } = useCommonHooks();
	const navigate = useNavigate();
	return (
		<Stack px={'2rem'}>
			<Group gap={0}>
				<ActionIcon
					className={actionIconClasses.backButton}
					classNames={actionIconClasses}
					component='a'
					onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}`)}
				>
					<FiArrowLeftCircle />
				</ActionIcon>
				<Text className={textClasses.settingsTitle} classNames={textClasses}>
					Settings
				</Text>
			</Group>
			<Tabs
				orientation={isMobile ? 'horizontal' : 'vertical'}
				defaultValue={'personalization'}
				className={tabClasses.settingsTabs}
				classNames={tabClasses}
			>
				<Tabs.List>
					<Tabs.Tab value='personalization'>
						{isMobile ? <FiUser /> : 'Personal Info'}
					</Tabs.Tab>
					<Tabs.Tab value='messages'>{isMobile ? <FiMail /> : 'Messages'}</Tabs.Tab>
					<Tabs.Tab value='applications'>
						{isMobile ? <FiGlobe /> : 'Applications'}
					</Tabs.Tab>
					<Tabs.Tab value='bookmarks'>{isMobile ? <FiBookmark /> : 'Bookmarks'}</Tabs.Tab>
					<Tabs.Tab value='bookmarksCategories'>
						{isMobile ? <FiBook /> : 'Categories'}
					</Tabs.Tab>
					<Tabs.Tab value='themes'>{isMobile ? <FiEdit /> : 'Themes'}</Tabs.Tab>
					<Tabs.Tab value='providers'>
						{isMobile ? <FiSearch /> : 'Search Providers'}
					</Tabs.Tab>
				</Tabs.List>
				<Tabs.Panel value='personalization'>
					<Personalization />
				</Tabs.Panel>
				<Tabs.Panel value='messages'>
					<Messages />
				</Tabs.Panel>
				<Tabs.Panel value='applications'>
					<Applications />
				</Tabs.Panel>
				<Tabs.Panel value='bookmarks'>
					<Bookmarks />
				</Tabs.Panel>
				<Tabs.Panel value='bookmarksCategories'>
					<Categories />
				</Tabs.Panel>
				<Tabs.Panel value='themes'>
					<Themes />
				</Tabs.Panel>
				<Tabs.Panel value='providers'>
					<SearchProviders />
				</Tabs.Panel>
			</Tabs>
		</Stack>
	);
}
export default Settings;