import styles from './AdminPage.module.css';
import {Tabs} from "@mantine/core";
import PageBlock from "../../components/PageBlock/PageBlock.tsx";
import {IconBriefcase, IconCalendarUser, IconCurrencyDollar, IconUser} from "@tabler/icons-react";
import RolesAndPositionsTab from "./tabs/RolesAndPositions/RolesAndPositionsTab.tsx";
import UsersTab from "./tabs/Users/UsersTab.tsx";
import {motion} from "framer-motion";
import FinancesTab from "./tabs/Finances/FinancesTab.tsx";
import WorkTimeTable from "./tabs/WorkTimeTable/ui/WorkTimeTable.tsx";

const AdminPage = () => {

    return (
        <div className={styles['container']}>
            <PageBlock fullHeight>
                <Tabs variant={"outline"} keepMounted={false} defaultValue={"users"}>
                    <Tabs.List>
                        <Tabs.Tab value={"users"} leftSection={<IconUser/>}>
                            Пользователи
                        </Tabs.Tab>
                        <Tabs.Tab value={"finances"} leftSection={<IconCurrencyDollar/>}>
                            Финансы
                        </Tabs.Tab>
                        <Tabs.Tab value={"rolesAndPositions"} leftSection={<IconBriefcase/>}>
                            Должности
                        </Tabs.Tab>
                        <Tabs.Tab value={"workTimeTable"} leftSection={<IconCalendarUser/>}>
                            Рабочее время
                        </Tabs.Tab>
                    </Tabs.List>
                    <Tabs.Panel value={"users"}>
                        <motion.div
                            initial={{opacity: 0}}
                            animate={{opacity: 1}}
                            transition={{duration: 0.2}}
                        >
                            <UsersTab/>
                        </motion.div>
                    </Tabs.Panel>
                    <Tabs.Panel value={"rolesAndPositions"}>
                        <motion.div
                            initial={{opacity: 0}}
                            animate={{opacity: 1}}
                            transition={{duration: 0.2}}
                        >
                            <RolesAndPositionsTab/>
                        </motion.div>
                    </Tabs.Panel>
                    <Tabs.Panel value={"finances"}>
                        <motion.div
                            initial={{opacity: 0}}
                            animate={{opacity: 1}}
                            transition={{duration: 0.2}}
                        >
                            <FinancesTab/>
                        </motion.div>
                    </Tabs.Panel>
                    <Tabs.Panel value={"workTimeTable"}>
                        <motion.div
                            initial={{opacity: 0}}
                            animate={{opacity: 1}}
                            transition={{duration: 0.2}}
                        >
                            <WorkTimeTable/>
                        </motion.div>
                    </Tabs.Panel>

                </Tabs>
            </PageBlock>

        </div>
    )
}

export default AdminPage;