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

// Create motion components from Chakra UI components

const MotionImage = motion(Image);
const MotionText = motion(Text);


function Hero2() {
    const textStackRef = useRef<HTMLDivElement>(null);
    const imageStackRef = useRef<HTMLDivElement>(null);
    
    // Create refs and animation controls for scroll-based animations
    const containerRef = useRef<HTMLDivElement>(null);
    const isInView = useInView(containerRef, { once: true, amount: 0.2 });
    const textControls = useAnimation();
    const imageControls = useAnimation();

    // Trigger animations when component comes into view
    useEffect(() => {
        if (isInView) {
            textControls.start("visible");
            imageControls.start("visible");
        } else {
            textControls.start("hidden");
            imageControls.start("hidden");
        }
    }, [isInView, textControls, imageControls]);

    // Add this useEffect to measure and update heights
    useEffect(() => {
        const updateHeight = () => {
            if (textStackRef.current) {
                // const height = textStackRef.current.offsetHeight;
            }
        };

        // Initial measurement
        updateHeight();

        // Setup resize observer for responsive adjustments
        const resizeObserver = new ResizeObserver(updateHeight);
        if (textStackRef.current) {
            resizeObserver.observe(textStackRef.current);
        }

        // Cleanup
        return () => {
            if (textStackRef.current) {
                resizeObserver.disconnect();
            }
        };
    }, []);

    return (
        <Box
            ref={containerRef}
            w="100%"
            position="relative"
            zIndex="1"
            bgColor={colors.backgroundColor}
        >
            <Flex 
                direction="column" 
                justify={"flex-start"} 
                align={"center"}
            >
                <Image 
                    src="/images/hero2title.webp"
                    w={{base:"420px",sm:"450px",md:"450px",lg:"350px",xl:"350px"}} 
                    maxW={"95%"}
                />
                <SimpleGrid
                    gap="25px"
                    columns={{ base: 1, md: 1, lg: 2, xl: 2 }}
                    px="4"
                    maxW="full"
                    mx="0"
                    marginTop={{ base: -7, md: -3, lg: 0, xl: 0 }}
                    height={{ base: "auto", md: "auto", lg: "auto", xl: "25vw", '2xl': "15vw" }}
                >
                    <Flex justify="flex-end">
                        <Stack
                            id='image_stack'
                            ref={imageStackRef}
                            alignItems='flex-end'
                            display={{ base: "none", md: "none", lg: "flex" }}
                            w={{ md: "80%", lg: "70%", xl: "60%" }}
                            h={"auto"}
                        >
                            <Image
                                src="/images/asking.jpg"
                                rounded="4xl"
                                loading="lazy" 
                                marginTop={'10px'}
                                height={{ md: "100%", lg: "85%", xl: "65%" }}
                                fit="cover"
                                objectPosition="center"
                               
                            />
                        </Stack>
                    </Flex>

                    <Flex justify={{ sm: 'center', md: "center", lg: "flex-start" }}>
                        <Stack
                            w={{ sm: "100%", md: "80%", lg: "90%", xl: "60%" }}
                            h="auto"
                            id="text_stack"
                            ref={textStackRef}
                            align={{ sm: 'flex-start', md: "flex-start", lg: "flex-start" }}
                        >
                            <Flex direction={"column"}>
                                <MotionText 
                                    color={colors.textColor} 
                                    className="font-melle font-medium" 
                                    fontSize={{ base: "2xl", sm: "3xl", md: "3xl", lg: "3xl" }}
                                    variants={{
                                        hidden: { x: -10, opacity: 0 },
                                        visible: { x: 0, opacity: 1 }
                                    }}
                                    initial="hidden"
                                    animate={textControls}
                                    transition={{ duration: 0.5, delay: 0.6 }}
                                >
                                    <strong>外出用餐</strong>難控用油，
                                </MotionText>
                                <MotionText 
                                    color={colors.textColor} 
                                    className="font-melle font-medium" 
                                    fontSize={{ base: "2xl", sm: "3xl", md: "3xl", lg: "3xl" }} 
                                    marginTop={-3}
                                    variants={{
                                        hidden: { x: -10, opacity: 0 },
                                        visible: { x: 0, opacity: 1 }
                                    }}
                                    initial="hidden"
                                    animate={textControls}
                                    transition={{ duration: 0.5, delay: 0.7 }}
                                >
                                    不健康油脂或增<strong>「三高」</strong>風險
                                </MotionText>
                            </Flex>
                            <MotionImage
                                src="/images/asking.jpg"
                                rounded="4xl"
                                loading="lazy" 
                                marginTop={'3px'}
                                h={{ md: "90%", lg: "65%", xl: "65%" }}
                                display={{ base: "flex", md: "flex", lg: "none" }}
                                fit="cover"
                                objectPosition="center"
                                variants={{
                                    hidden: { scale: 0.95, opacity: 0 },
                                    visible: { scale: 1, opacity: 1 }
                                }}
                                initial="hidden"
                                animate={imageControls}
                                transition={{ duration: 0.7, delay: 0.4 }}
                                whileHover={{ scale: 1.03 }}
                                whileTap={{ scale: 0.98 }}
                            />

                            <MotionText 
                                color={colors.textColor} 
                                className="font-noto-sans font-regular" 
                                lineHeight={2}
                                variants={{
                                    hidden: { y: 20, opacity: 0 },
                                    visible: { y: 0, opacity: 1 }
                                }}
                                initial="hidden"
                                animate={textControls}
                                transition={{ duration: 0.8, delay: 0.8 }}
                            >
                                {"都市人難免外出用餐，即使精選食材，也無法控制下鍋的食油，一天吃進多少隱形壞油難以估算。在家煮食雖可自選用油，但你確定自己用的是「好油」嗎？長期攝取高飽和脂肪、反式脂肪（如牛油、豬油、加工食品、重複使用的煎炸油），會提升壞膽固醇，導致血管堵塞，增加高血壓、高血脂及心血管疾病風險。"}
                            </MotionText>
                        </Stack>
                    </Flex>
                </SimpleGrid>
            </Flex>
        </Box>
    );
}
export default Hero2;