import {
    Box,
    Center, Flex,
    LoadingOverlay, ScrollArea, Text, useMantineTheme
} from "@mantine/core";
import {useListState, useViewportSize} from "@mantine/hooks";
import {lazy, Suspense, useEffect, useRef, useState} from "@wordpress/element";
import axios from "axios";
import {DragDropContext, Draggable, Droppable} from "@hello-pangea/dnd";

const _Component = lazy(() => import('./_Component'));
const Appbar = lazy(() => import('./Appbar'));
const Navbar = lazy(() => import('./Navbar'));

const MobileRender = ({isSupportPluginChange, isThemeChange, recentAddedComponentId, setShowRightSidebar, setSelectedLayout, recallAppbar,recallNavbar, activeScreen, reloadScreen, setReloadPageList}) => {
    const {height, width} = useViewportSize();
    const theme = useMantineTheme();

    const [page, setPage] = useState(null);
    const [isLoading, setLoading] = useState(false);
    const viewport = useRef(null);
    const [sortComponents, handlers] = useListState();
    const getPageWithComponents = () => {
        setLoading(true)
        axios({
            method: 'get',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/page`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
            },
            params: {
                page_slug: activeScreen
            }
        })
            .then(res => {
                setPage(res.data);
                setLoading(false);

                handlers.setState(res.data?.components) // set components to sortComponents



            })
            .catch(function (err) {
                console.log(err);
                setLoading(false);

            });

    }


    useEffect(() => {
        getPageWithComponents();
    }, [activeScreen, reloadScreen, isThemeChange, isSupportPluginChange]);




    useEffect(() => {
        setLoading(true)
        axios({
            method: 'put',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/page/sort-components`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
            },
            data: sortComponents
        })
            .then(res => {
                setLoading(false);


            })
            .catch(function (err) {
                console.log(err);
            });

    }, [sortComponents]);


    useEffect(() => {
        recentAddedComponentId && setTimeout(() => {
            viewport.current.scrollTo({ top: viewport.current.scrollHeight, behavior: 'smooth' });
        },2000)
    }, [recentAddedComponentId])


    return(
        <Box
            w={height < 850 ? 350 : 400}
            p={5}
            m={20}
            style={{
                flexDirection: "column",
                alignItems: "center",
                backgroundColor: "var(--mantine-color-gray-0)",
                borderRadius: "var(--mantine-radius-xl)",
                boxShadow: "0px 0px 20px 3px var(--mantine-color-gray-5)",
            }}
        >
            <Center bg="gray.8" style={{ width: "100%", height: "50px", borderRadius: "25px 25px 0px 0px", zIndex: 999 }} >
                <Box bg="var(--mantine-color-gray-7)" w={15} h={15} mr={5} style={{borderRadius: "25px",}}/>
                <Box bg="var(--mantine-color-gray-6)" w={50} h={5} style={{borderRadius: "25px",}}/>
            </Center>
            <Flex
                direction="column"
                justify="space-between"
                gap={0}
                bg={page?.customize_properties?.page_decoration?.background_color}
                style={{
                    width: "100%",
                    border: "5px solid var(--mantine-color-gray-8)",
                }}
                pos="relative"
                h={height < 850 ? (height - 300) : 654}
            >
                <Suspense
                    fallback={
                        // <LoadingOverlay visible={true} zIndex={10} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ type: "dots", size: 'xs' }}/>
                        <LoadingOverlay visible={true} zIndex={10} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{size: 'xs' }}/>
                    }
                >
                    <Appbar
                        recallAppbar={recallAppbar}
                        setSelectedLayout={setSelectedLayout}
                        reloadScreen={reloadScreen}
                        isThemeChange={isThemeChange}
                        isSupportPluginChange={isSupportPluginChange}
                    />
                </Suspense>


                <ScrollArea h={ height < 850 ? (height - 300) : 502 } scrollbarSize={3} type={`never`} scrollbars="y" viewportRef={viewport}>
                    {/*<LoadingOverlay visible={isLoading} overlayProps={{radius: "sm", blur: 5}} loaderProps={{type: 'dots', size: 'sm'}} zIndex={10}/>*/}
                    <LoadingOverlay visible={isLoading} overlayProps={{radius: "sm", blur: 5}} loaderProps={{size: 'sm'}} zIndex={10}/>
                    {/*<LoadingOverlay visible={true} overlayProps={{radius: "sm", blur: 5}} loaderProps={{type: 'dots', size: 'sm'}} zIndex={10}/>*/}

                    <DragDropContext
                        onDragEnd={({destination, source}) =>
                            handlers.reorder({from: source.index, to: destination?.index || 0})
                        }
                    >
                        <Droppable droppableId="dnd-list" direction="vertical">
                            {(provided) => (
                                <div {...provided.droppableProps} ref={provided.innerRef}>
                                    {
                                        sortComponents?.map((component, index) => (
                                            <>
                                                <Draggable key={component.id} index={index} draggableId={component.id}>
                                                    {(provided, snapshot) => (
                                                        <div
                                                            {...provided.draggableProps}
                                                            ref={provided.innerRef}
                                                        >

                                                            <Suspense
                                                                fallback={
                                                                    // <LoadingOverlay visible={true} overlayProps={{radius: "sm", blur: 5}} loaderProps={{type: 'dots', size: 'sm'}} zIndex={10}/>
                                                                    <LoadingOverlay visible={true} overlayProps={{radius: "sm", blur: 5}} loaderProps={{size: 'sm'}} zIndex={10}/>
                                                                }
                                                            >
                                                                <_Component
                                                                    key={index}
                                                                    provided={provided}
                                                                    component={component}
                                                                    activeScreen={activeScreen}
                                                                    handlers={handlers}
                                                                    setReloadPageList={setReloadPageList}
                                                                    setShowRightSidebar={setShowRightSidebar}
                                                                    setSelectedLayout={setSelectedLayout}
                                                                    recentAddedComponentId={recentAddedComponentId}
                                                                />
                                                            </Suspense>


                                                        </div>
                                                    )}
                                                </Draggable>
                                            </>

                                        ))
                                    }
                                    {
                                        page?.components?.length === 0 && (
                                            <Center h={ height < 850 ? (height - 300) : 500 }>
                                                <Text align="center" size="xs" weight={700} c={theme.primaryColor}>This page doesn't have any component now.</Text>
                                            </Center>
                                        )
                                    }

                                    {provided.placeholder}
                                </div>
                            )}
                        </Droppable>
                    </DragDropContext>

                </ScrollArea>


                <Suspense
                    fallback={
                        // <LoadingOverlay visible={true} zIndex={10} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ type: "dots", size: 'xs' }}/>
                        <LoadingOverlay visible={true} zIndex={10} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{size: 'xs' }}/>
                    }
                >
                    <Navbar
                        recallNavbar={recallNavbar}
                        setSelectedLayout={setSelectedLayout}
                        reloadScreen={reloadScreen}
                        isThemeChange={isThemeChange}
                        isSupportPluginChange={isSupportPluginChange}
                    />
                </Suspense>

            </Flex>


            <Center bg="gray.8" style={{ width: "100%", height: "50px", borderRadius: "0px 0px 25px 25px", }} >
                <Box bg="var(--mantine-color-gray-3)" w={65} h={35} style={{borderRadius: "15px",}}/>
            </Center>
        </Box>
    );
}

export default MobileRender;