import { Box, Stack, Image, Text, Flex, Link } from '@chakra-ui/react'
import { colors } from '../colors';
import { useEffect, useRef } from 'react';
import { motion, useInView } from 'framer-motion'

function Salespoint() {
    const shopImages = [
        {
            image: '/images/pp.png',
            link: 'https://www.pns.hk/zh-hk/all-brands/b/112546/%E7%8D%85%E7%90%83%E5%98%9C',
        },
        {
            image: '/images/we.png',
            link: 'https://www.wellcome.com.hk/zh-hant/search?keyword=%E7%8D%85%E7%90%83%E5%98%9C&page=1',
        },
        {
            image: '/images/hk.png',
            link: 'https://www.hktvmall.com/hktv/zh/search_a?keyword=%E7%8D%85%E7%90%83%E5%98%9C',
        },
    ]

    const fbContainerRef = useRef<HTMLDivElement>(null);
    const titleRef = useRef<HTMLDivElement>(null);
    const isTitleInView = useInView(titleRef, { once: true });
    

    // Load Facebook SDK and initialize the plugin
    useEffect(() => {
        // Add Facebook SDK if it doesn't exist
        if (!document.getElementById('facebook-jssdk')) {
            const script = document.createElement('script');
            script.id = 'facebook-jssdk';
            script.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0';
            script.async = true;
            script.defer = true;
            document.body.appendChild(script);
        }

        // Parse XFBML when SDK is loaded
        const handleSDKLoad = () => {
            if ((window as any).FB && fbContainerRef.current) {
                (window as any).FB.XFBML.parse(fbContainerRef.current);
            }
        };

        // Check if FB is already loaded
        if ((window as any).FB) {
            handleSDKLoad();
        } else {
            // Listen for SDK load
            (window as any).fbAsyncInit = handleSDKLoad;
        }

        return () => {
            // Clean up
            (window as any).fbAsyncInit = undefined;
        };
    }, []);

    return (
        <Stack
            position="relative"
            w="100%"
            overflow="hidden"
            align={'center'}
        >
            <motion.div
                ref={titleRef}
                initial={{ opacity: 0, y: 50 }}
                animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
                transition={{ duration: 0.7 }}
            >
                <Stack
                    w='100%'
                    justify={'center'}
                    align={'center'}
                >
                    <Text
                        className='font-melle font-xbold'
                        color={colors.textColor}
                        fontSize={'4xl'}
                    >
                        銷售點
                    </Text>
                </Stack>
            </motion.div>

            <Flex
                gap={12}
                direction={{ base: 'column', sm: 'column', md: 'row' }}
                justify="center"
            >
                {shopImages.map((image, index) => (
                    <motion.div
                        key={index}
                        initial={{ opacity: 0, y: 30 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.5, delay: index * 0.2 }}
                    >
                        <Stack
                            w='250px'
                            justify={'flex-end'}
                        >
                            <Link href={image.link}>
                                <Image src={image.image} cursor="pointer" />
                            </Link>
                        </Stack>
                    </motion.div>
                ))}
            </Flex>

            {/* Facebook Page Plugin */}
            <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.7, delay: 0.3 }}
            >
                <Box
                    ref={fbContainerRef}
                    className="fb-page-container"
                    w="100%"
                    maxW="500px"
                    bgColor='red'
                    justifyItems={'center'}
                    my={4}
                    h="auto" // Add a minimum height so there's space for the plugin to render
                >
                    <div id="fb-root"></div>
                    <div
                        className="fb-page"
                        data-href="https://www.facebook.com/hoehinwhiteflower/" // Use a valid Facebook page URL
                        data-width="600"   // Increased from 500px to 600px
                        data-height="700"  // Increased from 230px to 400px
                        data-hide-cover="false"
                        data-show-facepile="false"
                        data-tabs="timeline"
                    ></div>
                </Box>
            </motion.div>
        </Stack>
    )
}

export default Salespoint;