import { Divider, Flex, Pagination, rem, Skeleton, Stack } from "@mantine/core";
import { ShiftsTable } from "./components/ShiftsTable.tsx";
import {
    ShiftsTableSegmentedControl,
} from "../../components/ShiftsTableSegmentedControl/ShiftsTableSegmentedControl.tsx";
import useWorkShiftsTable from "./hooks/useWorkShiftsTable.tsx";
import WorkShiftInput from "./components/WorkShiftInput.tsx";

export const WorkShiftsTab = () => {
    const {
        shifts,
        shiftsTableType,
        setShiftsTableType,
        totalPages,
        page,
        setPage,
        fetchShifts,
        isLoading,
    } = useWorkShiftsTable();

    return (
        <Stack gap={0}>
            <WorkShiftInput fetchShifts={fetchShifts} />
            <Divider />
            <ShiftsTableSegmentedControl
                value={shiftsTableType.toString()}
                onChange={event => {
                    setPage(1);
                    setShiftsTableType(parseInt(event));
                }}
            />
            <Skeleton visible={isLoading}>
                <Flex gap={rem(10)} direction={"column"}>
                    <ShiftsTable
                        shiftsTableType={shiftsTableType}
                        shifts={shifts}
                        fetchShifts={fetchShifts}
                    />
                    {totalPages > 1 && (
                        <Pagination
                            style={{ alignSelf: "flex-end" }}
                            withEdges
                            onChange={event => setPage(event)}
                            value={page}
                            total={totalPages}
                        />
                    )}
                </Flex>
            </Skeleton>
        </Stack>
    );
};

