import { 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.webp',
            link: 'https://www.pns.hk/zh-hk/%E7%87%9F%E8%90%83%E8%AD%B7%E5%BF%83%E6%B2%B9/p/BP_401649',
        },
        {
            image: '/images/we.webp',
            link: 'https://www.wellcome.com.hk/zh-hant/p/%E7%8D%85%E7%90%83%E5%98%9C%E7%87%9F%E8%90%83%E8%AD%B7%E5%BF%83%E6%B2%B9%201%E5%85%AC%E5%8D%87/i/101341721.html?srsltid=AfmBOorpxphAzws9TIkKJW5xr1pYOaUOL5kHbsgRjYqwQeaOhq1cPQuO',
        },
        {
            image: '/images/hk.webp',
            link: 'https://www.hktvmall.com/hktv/zh/main/%E7%8D%85%E7%90%83%E5%98%9C%E6%97%97%E8%89%A6%E5%BA%97/s/H1261001/%E8%B6%85%E7%B4%9A%E5%B7%BF%E5%A0%B4/%E8%B6%85%E7%B4%9A%E5%B8%82%E5%A0%B4/%E7%B1%B3-%E9%A3%9F%E6%B2%B9/%E9%A3%9F%E6%B2%B9/%E5%85%B6%E4%BB%96/%E7%87%9F%E8%90%83%E8%AD%B7%E5%BF%83%E6%B2%B9%E9%97%9C%E6%B3%A8%E4%B8%89%E9%AB%98%E5%BF%83%E8%A1%80%E7%AE%A1%E5%81%A5%E5%BA%B7%E9%BB%83%E9%87%91%E6%AF%94%E4%BE%8B%E8%84%82%E8%82%AA%E9%85%B8%E5%B0%88%E6%A5%AD%E5%81%A5%E5%BA%B7%E9%85%8D%E6%96%B9%E9%99%8D%E5%A3%9E%E8%86%BD%E5%9B%BA%E9%86%87%E9%9B%B6%E5%8F%8D%E5%BC%8F%E8%84%82%E8%82%AA%E7%85%99%E9%BB%9E%E9%AB%98%E7%85%8E%E7%82%92%E7%85%AE%E7%82%B8/p/H0888001_S_10159486',
        },
    ]

    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"
                align={'flex-end'}

            >
                {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" fit={'contain'}
                                loading="lazy" />
                            </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
                my={15}
                ml={2}
            >
                <Link href={"https://www.facebook.com/profile.php?id=100064320806613"}
                    _focus={{ outline: 'none', boxShadow: 'none' }}
                    _active={{ outline: 'none', boxShadow: 'none' }}>
                    <Image
                        src={'/images/fb.webp'}
                        alt="salespoint"
                        w={"400px"}
                        loading='lazy'
                    />
                </Link>
            </Stack>
        </Stack>
    )
}

export default Salespoint;
