import { ActionIcon, Flex, rem, Text } from "@mantine/core";
import { IconEdit, IconMenu2, IconMenuDeep, IconPlus } from "@tabler/icons-react";
import { motion } from "framer-motion";
import styles from "../../ui/CardsPage.module.css";
import PageBlock from "../../../../components/PageBlock/PageBlock.tsx";
import DisplayMode from "../../enums/DisplayMode.ts";
import { UseFormReturnType } from "@mantine/form";
import { CardsPageState } from "../../hooks/useCardsPageState.tsx";
import React from "react";
import ObjectSelect from "../../../../components/ObjectSelect/ObjectSelect.tsx";
import CardsTableFiltersModal from "../../modals/CardsTableFiltersModal.tsx";
import { useProjectsEditorContext } from "../../contexts/ProjectsEditorContext.tsx";
import { useSelector } from "react-redux";
import { RootState } from "../../../../redux/store.ts";
import { useProjectsContext } from "../../../../contexts/ProjectsContext.tsx";
import { modals } from "@mantine/modals";

type Props = {
    displayMode: DisplayMode;
    setDisplayMode: React.Dispatch<React.SetStateAction<DisplayMode>>;
    form: UseFormReturnType<CardsPageState>;
}

const CardsPageHeader = ({
                             displayMode,
                             setDisplayMode,
                             form,
                         }: Props) => {
    const { openProjectsEditor } = useProjectsEditorContext();
    const { selectedProject, setSelectedProject, projects, refetchProjects } = useProjectsContext();
    const userRole = useSelector((state: RootState) => state.auth.role);
    const isAdmin = userRole === "admin";

    const handleCreateClick = () => {
        modals.openContextModal({
            modal: "createProjectModal",
            title: "Создание проекта",
            withCloseButton: false,
            innerProps: {
                refetchProjects,
            },
        });
    };

    const getHeaderInputsBoard = () => {
        return (
            <div
                className={styles["top-panel"]}
                style={{
                    display: displayMode === DisplayMode.BOARD ? "flex" : "none",
                }}
            >
                {isAdmin && (
                    <>
                        <ActionIcon
                            size={"lg"}
                            onClick={handleCreateClick}
                            variant={"default"}>
                            <IconPlus />
                        </ActionIcon>
                        <ActionIcon
                            size={"lg"}
                            onClick={openProjectsEditor}
                            variant={"default"}>
                            <IconEdit />
                        </ActionIcon>
                    </>
                )}
                <ObjectSelect
                    placeholder={"Выберите проект"}
                    data={projects}
                    value={selectedProject}
                    onChange={setSelectedProject}
                />
            </div>
        );
    };

    const getHeaderInputsTable = () => {
        return (
            <div
                className={styles["top-panel"]}
                style={{
                    display: displayMode === DisplayMode.TABLE ? "flex" : "none",
                }}
            >
                <CardsTableFiltersModal
                    form={form}
                    projects={projects}
                />
            </div>
        );
    };

    return (
        <PageBlock style={{ flex: 0 }}>
            <Flex
                align={"center"}
                justify={"space-between"}>
                <Flex
                    gap={rem(10)}
                    direction={"column"}
                    align={"center"}>
                    <Text size={"xs"}>Вид</Text>
                    <Flex gap={rem(10)}>
                        <ActionIcon
                            onClick={() =>
                                setDisplayMode(DisplayMode.BOARD)
                            }
                            variant={
                                displayMode === DisplayMode.BOARD
                                    ? "filled"
                                    : "default"
                            }>
                            <IconMenuDeep
                                style={{ rotate: "-90deg" }}
                            />
                        </ActionIcon>
                        <ActionIcon
                            onClick={() =>
                                setDisplayMode(DisplayMode.TABLE)
                            }
                            variant={
                                displayMode === DisplayMode.TABLE
                                    ? "filled"
                                    : "default"
                            }>
                            <IconMenu2 />
                        </ActionIcon>
                    </Flex>
                </Flex>
                <motion.div
                    key={displayMode}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ duration: 0.2 }}>
                    {getHeaderInputsTable()}
                    {getHeaderInputsBoard()}
                </motion.div>
            </Flex>
        </PageBlock>
    );
};

export default CardsPageHeader;
