import {useEffect} from "@wordpress/element";
import {
    Container,
    Flex,
    Text,
    Tooltip,
    Button,
    Modal,
    Grid,
    Box,
    Image,
    ScrollArea,
    Select,
    useMantineTheme,
    Center,
    AspectRatio,
    Paper,
    Tabs, HoverCard, Anchor, ActionIcon, Title
} from "@mantine/core";
import {
    IconArrowsMaximize,
    IconArrowsMinimize,
    IconBorderCornerSquare,
    IconBrandWordpress, IconDeviceMobileCog, IconExternalLink,
    IconQrcode,
    IconXboxX,
} from "@tabler/icons-react";
import {useDisclosure, useFullscreen} from "@mantine/hooks";
import Logo from "../../../assets/images/appza_logo.png";
import QRCodePlayStore from "../../../assets/images/appza-demo-play-store.png";
import QRCodeAppStore from "../../../assets/images/appza-demo-app-store.png";
import classes from './Header.module.css';
import {useDispatch, useSelector} from "react-redux";
import {fetchScreens} from "../../features/screen/screenThunks";
import {setSelectedComponent} from "../../features/selectedComponent/selectedComponentSlice";
import {setActiveScreen} from "../../features/screen/screenSlice";
const Header = () => {
    const {ref, toggle, fullscreen} = useFullscreen();
    const [isOpenPreviewModal, handlesPreviewModal] = useDisclosure(false);

    const theme = useMantineTheme();


    const dispatch = useDispatch();
    const {config} = useSelector(state => state.config);
    const {screens, activeScreen, loading} = useSelector((state) => state.screens);
    const {activeSupportPlugin} = useSelector((state => state.config));
    const {viewMode} = useSelector(state => state.viewMode)


    const handleChangeScreen = (screenSlug) => {
        dispatch(setActiveScreen(screenSlug));
        dispatch(setSelectedComponent(null))
    }

    useEffect(() => {
        dispatch(fetchScreens())
    }, [dispatch, activeSupportPlugin]);




    useEffect(()=>{
        if (fullscreen){
            document.getElementById('adminmenumain').setAttribute('style','display: none');
            document.getElementById('wpcontent').setAttribute('style','margin-left: 0px !important; padding-left: 0px !important');
        }else {
            document.getElementById('adminmenumain').setAttribute('style','display: block');
            document.getElementById('wpcontent').setAttribute('style','margin-left: 36px !important; padding-left: 0px !important');
        }

    }, [fullscreen])


    return (
            <Container fluid bg={'transparent'} style={{ borderBottom: '1px solid var(--mantine-color-gray-3)'}}>

                <Grid align="center" py={5}>
                    <Grid.Col span="auto">
                        <Image w={70} fit="contain" src={Logo}/>
                    </Grid.Col>
                    <Grid.Col span={6}>
                        {
                            'edit' === viewMode && (
                                <Flex
                                    justify="center"
                                    align="center"
                                    gap="sm"
                                    w="inherit"
                                >
                                    <Text fw={700}>Screen</Text>
                                    <Select
                                        size="xs"
                                        label=""
                                        checkIconPosition="right"
                                        disabled={loading}
                                        data={screens?.map(item => ({label: item.name, value: item.slug}))}
                                        value={activeScreen}
                                        onChange={handleChangeScreen}
                                        placeholder="Pages"
                                        maxDropdownHeight={250}
                                        allowDeselect={false}
                                        styles={{
                                            input: {
                                                backgroundColor: 'transparent',
                                                width: 300,
                                                border: `1px solid ${theme.primaryColor}`,
                                            }
                                        }}
                                    />
                                </Flex>
                            )
                        }

                    </Grid.Col>
                    <Grid.Col span="auto">
                        <Flex justify="flex-end" gap="xs" wrap="nowrap">
                            {/*<Link
                                to="/make-components"
                            >
                                <Button size="xs">Make Components</Button>
                            </Link>*/}
                            <Tooltip label="Preview app QR code" bg={`${theme.primaryColor}.5`} c={`dark`}>
                                <Button
                                    size="xs"
                                    color="#475177"
                                    onClick={handlesPreviewModal.open}
                                    leftSection={<IconQrcode />}
                                >
                                    Preview
                                </Button>
                            </Tooltip>
                            <Box id="appza-app-buildZ">
                                { window.appzaPremium && <window.appzaPremium.AppBuild theme={theme} /> }
                                {!window.appzaPremium &&
                            
                                    <HoverCard width={320} shadow="md" withArrow openDelay={200} closeDelay={400}>
                                        <HoverCard.Target>
                                            <Button
                                                size="xs"
                                                onClick={()=> console.log('Upgrade to premium')}
                                                leftSection={<IconDeviceMobileCog/>}
                                                variant="outline"
                                            >
                                                Build App
                                            </Button>
                                        </HoverCard.Target>
                                        <HoverCard.Dropdown>
                                            <Text size="sm">
                                                Upgrade to premium to unlock more features and build your app <Anchor href={config?.appza_buy_premium_url} target="_blank">Click here<IconExternalLink size={12}/></Anchor> buy premium.
                                            </Text>
                                        </HoverCard.Dropdown>
                                    </HoverCard>
                                }
                                
                            </Box>
                            <Tooltip label={fullscreen ? "Normal screen" : "Full screen"} bg={`${theme.primaryColor}.5`} c={`dark`}>
                                <Button
                                    size="xs"
                                    onClick={toggle}
                                >
                                    { fullscreen ? <IconArrowsMinimize /> : <IconArrowsMaximize /> }
                                </Button>
                            </Tooltip>

                            <Tooltip label="Wordpress dashboard" bg={`${theme.primaryColor}.5`} c={`dark`}>
                                <Button
                                    component="a"
                                    href={appLocalizer.homeUrl + 'wp-admin'}
                                    size="xs"
                                    radius="xl"
                                    bg="gray.1"
                                    c="gray.5"
                                    px={2}
                                >
                                    <IconBrandWordpress />
                                </Button>
                            </Tooltip>
                        </Flex>
                    </Grid.Col>
                </Grid>

                <Modal
                    opened={isOpenPreviewModal}
                    onClose={handlesPreviewModal.close}
                    title=""
                    size="75%"
                    pos="relative"
                    centered
                    closeOnClickOutside={false}
                    scrollAreaComponent={ScrollArea.Autosize}
                    withCloseButton={false}
                >
                    <Modal.Header p={0}>
                        <Modal.Title>
                            <Title order={3}>Preview on Mobile App</Title>
                        </Modal.Title>
                        <Modal.CloseButton>
                            <ActionIcon
                                variant="light"
                                color={theme.colors.gray[5]}
                                onClick={handlesPreviewModal.close}
                            >
                                <IconXboxX stroke={1.5} />
                            </ActionIcon>
                        </Modal.CloseButton>
                    </Modal.Header>


                    <Grid justify="center" align="center" gutter="sm" px="md" py={60}>
                        <Grid.Col span={6}>
                            <Paper
                                radius="md"
                                py={50}
                                px={0}
                                shadow="sm"
                                withBorder
                            >
                                <Tabs
                                    defaultValue="demo-app"
                                    variant="pills"
                                    h="100%"
                                >
                                    <Tabs.List grow my="xs" px="xl" className={classes.list}>
                                        <Tabs.Tab size="xs" value="demo-app" className={classes.tab}><Text fw={700}>Demo App</Text></Tabs.Tab>
                                        {/*<Tabs.Tab size="xs" value="domain" className={classes.tab}><Text fw={700}>Domain</Text></Tabs.Tab>*/}
                                        <Tabs.Tab size="xs" value="domain" className={classes.tab}><Text fw={700}>Connect Site</Text></Tabs.Tab>
                                    </Tabs.List>
                                    <Tabs.Panel value="demo-app" px="xl">
                                        <Grid justify="center" align="center">
                                            <Grid.Col span={6}>
                                                <Text pb="sm" fw={500} ta="center">Android</Text>
                                                <Center>
                                                    <Box
                                                        style={{
                                                            border: '1px solid var(--mantine-color-gray-5)',
                                                            borderRadius: theme.radius.sm,
                                                        }}
                                                        p={40}
                                                        bg={theme.colors.gray[4]}
                                                    >
                                                        <Box pos="relative">
                                                            <IconBorderCornerSquare color="#475177" style={{position: 'absolute', top: -9, left: -9}}/>
                                                            <IconBorderCornerSquare color="#475177" style={{position: 'absolute', top: -9, right: -9, transform: 'rotate(90deg)'}}/>
                                                            <IconBorderCornerSquare color="#475177" style={{position: 'absolute', bottom: -9, right: -9, transform: 'rotate(180deg)'}}/>
                                                            <IconBorderCornerSquare color="#475177" style={{position: 'absolute', bottom: -9, left: -9, transform: 'rotate(270deg)'}}/>
                                                            <Image w="100%" src={QRCodePlayStore}/>
                                                        </Box>

                                                    </Box>
                                                </Center>
                                                <Text size="xs" mt="xs" ta="center">Find <Text span fw={600}>Appza Demo App</Text> on Play Store</Text>
                                            </Grid.Col>
                                            <Grid.Col span="auto">
                                                <Text pb="sm" fw={500} ta="center">iOS</Text>
                                                <Center>
                                                    <Box
                                                        style={{
                                                            border: '1px solid var(--mantine-color-gray-5)',
                                                            borderRadius: theme.radius.sm,
                                                        }}
                                                        p={40}
                                                        bg={theme.colors.gray[4]}
                                                    >
                                                        <Box pos="relative">
                                                            <IconBorderCornerSquare color="#475177" style={{position: 'absolute', top: -9, left: -9}}/>
                                                            <IconBorderCornerSquare color="#475177" style={{position: 'absolute', top: -9, right: -9, transform: 'rotate(90deg)'}}/>
                                                            <IconBorderCornerSquare color="#475177" style={{position: 'absolute', bottom: -9, right: -9, transform: 'rotate(180deg)'}}/>
                                                            <IconBorderCornerSquare color="#475177" style={{position: 'absolute', bottom: -9, left: -9, transform: 'rotate(270deg)'}}/>
                                                            <Image w="100%" src={QRCodeAppStore}/>
                                                        </Box>

                                                    </Box>
                                                </Center>
                                                <Text size="xs" mt="xs" ta="center">Find <Text span fw={600}>Appza Demo App</Text> on App Store</Text>
                                            </Grid.Col>
                                        </Grid>
                                    </Tabs.Panel>
                                    <Tabs.Panel value="domain" py={23}>
                                        <Center>
                                            <Box
                                                style={{
                                                    border: '1px solid var(--mantine-color-gray-5)',
                                                    borderRadius: theme.radius.sm,
                                                }}
                                                p={40}
                                                bg={theme.colors.gray[4]}
                                            >
                                                <Box pos="relative">
                                                    <IconBorderCornerSquare color="#475177" style={{position: 'absolute', top: -9, left: -9}}/>
                                                    <IconBorderCornerSquare color="#475177" style={{position: 'absolute', top: -9, right: -9, transform: 'rotate(90deg)'}}/>
                                                    <IconBorderCornerSquare color="#475177" style={{position: 'absolute', bottom: -9, right: -9, transform: 'rotate(180deg)'}}/>
                                                    <IconBorderCornerSquare color="#475177" style={{position: 'absolute', bottom: -9, left: -9, transform: 'rotate(270deg)'}}/>
                                                    <Image w="100%" fit="contain" src={config?.media_urls?.preview_app_qrcode}/>
                                                </Box>

                                            </Box>
                                        </Center>
                                        <Text size="xs" mt="xs" ta="center">Open <Text span fw={600}>Appza Demo App</Text> and scan to connect this site</Text>

                                    </Tabs.Panel>

                                </Tabs>
                            </Paper>
                        </Grid.Col>
                        <Grid.Col span="auto">
                            <Paper
                                radius="md"
                                shadow="sm"
                                px="md"
                                py={50}
                                withBorder
                            >
                                <Title order={5} mb="xs">How to get your app?</Title>
                                <AspectRatio ratio={16 / 10} data-autofocus>
                                    <iframe
                                        src="https://www.youtube.com/embed/fPsk1PSH6iw?si=W6dhy-K7sdeH_0my"
                                        title="Appza Guideline Video"
                                        style={{border: 0}}
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    />
                                </AspectRatio>
                            </Paper>

                        </Grid.Col>
                    </Grid>
                </Modal>
            </Container>
    );
}

export default Header;