import {
    Container,
    Grid,
    Center, Group, SegmentedControl, useMantineTheme, Box, rem,
} from '@mantine/core';

import MobileRender from "./mobile-render/MobileRender";
import DefaultSidebar from "./left-sidebar/DefaultSidebar";
import {useViewportSize} from "@mantine/hooks";

import Header from "./Header";
import OnboardModal from "./onboard/OnboardModal";
import RightSidebar from "./right-sidebar/RightSidebar";
import {useDispatch, useSelector} from "react-redux";
import {setViewMode} from "../../features/preview/viewModeSlice";
import BlockActivityWaitLoader from "../../utils/loader/BlockActivityWaitLoader";
import {fetchBlockActivityStatus} from "../../features/blockActivity/blockActivityThunks";
import {useEffect, useState} from "@wordpress/element";




const Dashboard = () => {

    const theme = useMantineTheme();
    const {height, width} = useViewportSize();
    const dispatch = useDispatch();

    const {viewMode} = useSelector(state => state.viewMode)

    const [firstPluginActivationThemeProcessingLoader, setFirstPluginActivationThemeProcessingLoader] = useState(true);


    const handleViewMode = (value) => dispatch(setViewMode(value))

    const startPolling = (dispatch) => {
        const pollInterval = setInterval(() => {
            dispatch(fetchBlockActivityStatus())
                .unwrap()
                .then((data) => {


                    if (data.status === 'completed' || data.status === 'idle') {

                        setFirstPluginActivationThemeProcessingLoader(false)

                        clearInterval(pollInterval);
                    }
                })
                .catch(() => {
                    // Keep polling on network errors
                });
        }, 5000); // Poll every 5 seconds
    };

    useEffect(() => {
        startPolling(dispatch)
    }, [])


    if (firstPluginActivationThemeProcessingLoader){
        return (
            <Box pos="relative" h={height}>
                <BlockActivityWaitLoader/>
            </Box>
        )
    }

    return (
        <>
            <Header/>
            <Container fluid px={0} pr={1} bg="var(--mantine-color-gray-light)" h={height - 42}>
                <Grid gutter={0} h="inherit" justify="center">
                    <Grid.Col span="auto">

                        <DefaultSidebar />

                    </Grid.Col>
                    <Grid.Col span={6}>
                        <Center maw={`100%`} h={`90vh`}>

                            <MobileRender />



                        </Center>
                        {/*<Group justify="center">
                            <SegmentedControl
                                bg="gray.3"
                                color={theme.primaryColor}
                                value={viewMode}
                                onChange={(value) => handleViewMode(value)}
                                data={[
                                    {
                                        value: 'preview',
                                        label: (
                                            <Center style={{ gap: 10 }}>
                                                <IconEye size={16} />
                                                <span>Preview</span>
                                            </Center>
                                        ),
                                    },
                                    {
                                        value: 'edit',
                                        label: (
                                            <Center style={{ gap: 10 }}>
                                                <IconEdit size={16} />
                                                <span>Edit</span>
                                            </Center>
                                        ),
                                    }
                                ]}
                            />
                        </Group>*/}
                    </Grid.Col>
                    <Grid.Col span={3} pos="relative">

                        <RightSidebar />

                    </Grid.Col>
                </Grid>
            </Container>

            <OnboardModal/>

        </>
    );
}

export default Dashboard;