import { ContextModalProps } from "@mantine/modals";
import { CreateEditFormProps } from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import { UserSchema } from "../../../../client";
import { Stack } from "@mantine/core";
import CommonTab from "./tabs/CommonTab/CommonTab.tsx";
import DepartmentSectionsTab from "./tabs/DepartmentSectionsTab/DepartmentSectionsTab.tsx";
import { ModalTab, UsersModalTabSegmentedControl } from "./components/UsersModalTabSegmentedControl.tsx";
import { useState } from "react";

type PropsRefetch = {
    refetch: () => void;
}
type Props = CreateEditFormProps<UserSchema> & PropsRefetch;

const UserFormModal = ({
                           context,
                           id,
                           innerProps,
                       }: ContextModalProps<Props>) => {
    const isEditing = "element" in innerProps;
    const [modalTab, setModalTab] = useState<ModalTab>(ModalTab.COMMON);

    const closeModal = () => {
        context.closeContextModal(id);
    }

    if (!isEditing) {
        return (
            <CommonTab closeModal={closeModal} formProps={innerProps} />
        );
    }

    return (
        <Stack>
            <UsersModalTabSegmentedControl
                value={modalTab.toString()}
                onChange={event => setModalTab(parseInt(event))}
            />
            {modalTab === ModalTab.COMMON ? (
                <CommonTab
                    closeModal={closeModal}
                    formProps={innerProps}
                />
            ) : (
                <DepartmentSectionsTab
                    closeModal={closeModal}
                    user={innerProps.element}
                    refetch={innerProps.refetch}
                />
            )}
        </Stack>
    );
};

export default UserFormModal;
