import { Box, Heading, VStack, Text, SimpleGrid } from '@chakra-ui/react'
import CyclingImage from './CyclingImage'

/**
 * Demo component showcasing various configurations of CyclingImage
 * This demonstrates the different ways to use the cycling animation effect
 */
function CyclingImageDemo() {
  return (
    <Box p={8} bg="gray.50" minH="100vh">
      <VStack gap={8} align="stretch">
        <Box textAlign="center">
          <Heading size="2xl" mb={2}>CyclingImage Component Demo</Heading>
          <Text color="gray.600">
            Showcasing continuous light-to-dark color cycling animations
          </Text>
        </Box>

        <SimpleGrid columns={{ base: 1, md: 2 }} gap={8}>
          {/* Example 1: Default Settings */}
          <Box bg="white" p={6} borderRadius="lg" shadow="md">
            <Heading size="md" mb={4}>Default Settings</Heading>
            <Text fontSize="sm" color="gray.600" mb={4}>
              3s cycle, 50% intensity, auto-start
            </Text>
            <Box position="relative" h="300px" bg="gray.100" borderRadius="md">
              <CyclingImage
                src="/images/new/threehightext.webp"
                position="absolute"
                w="200px"
                left="50%"
                top="50%"
                style={{ transform: 'translate(-50%, -50%)' } as any}
              />
            </Box>
          </Box>

          {/* Example 2: With Controls */}
          <Box bg="white" p={6} borderRadius="lg" shadow="md">
            <Heading size="md" mb={4}>With Interactive Controls</Heading>
            <Text fontSize="sm" color="gray.600" mb={4}>
              Adjustable speed and intensity
            </Text>
            <Box position="relative" h="300px" bg="gray.100" borderRadius="md">
              <CyclingImage
                src="/images/new/fattext.webp"
                position="absolute"
                w="200px"
                left="50%"
                top="50%"
                style={{ transform: 'translate(-50%, -50%)' } as any}
                showControls={true}
                cycleDuration={4}
                intensity={0.7}
              />
            </Box>
          </Box>

          {/* Example 3: Fast Cycle */}
          <Box bg="white" p={6} borderRadius="lg" shadow="md">
            <Heading size="md" mb={4}>Fast Cycle (1s)</Heading>
            <Text fontSize="sm" color="gray.600" mb={4}>
              Quick pulsing effect with high intensity
            </Text>
            <Box position="relative" h="300px" bg="gray.100" borderRadius="md">
              <CyclingImage
                src="/images/new/centerfattext.webp"
                position="absolute"
                w="200px"
                left="50%"
                top="50%"
                style={{ transform: 'translate(-50%, -50%)' } as any}
                cycleDuration={1}
                intensity={0.8}
              />
            </Box>
          </Box>

          {/* Example 4: Slow & Subtle */}
          <Box bg="white" p={6} borderRadius="lg" shadow="md">
            <Heading size="md" mb={4}>Slow & Subtle (8s)</Heading>
            <Text fontSize="sm" color="gray.600" mb={4}>
              Gentle breathing effect with low intensity
            </Text>
            <Box position="relative" h="300px" bg="gray.100" borderRadius="md">
              <CyclingImage
                src="/images/new/hairlosstext.webp"
                position="absolute"
                w="200px"
                left="50%"
                top="50%"
                style={{ transform: 'translate(-50%, -50%)' } as any}
                cycleDuration={8}
                intensity={0.3}
                timingFunction="linear"
              />
            </Box>
          </Box>

          {/* Example 5: Paused by Default */}
          <Box bg="white" p={6} borderRadius="lg" shadow="md">
            <Heading size="md" mb={4}>Paused by Default</Heading>
            <Text fontSize="sm" color="gray.600" mb={4}>
              Animation starts paused, with controls
            </Text>
            <Box position="relative" h="300px" bg="gray.100" borderRadius="md">
              <CyclingImage
                src="/images/new/threehightext.webp"
                position="absolute"
                w="200px"
                left="50%"
                top="50%"
                style={{ transform: 'translate(-50%, -50%)' } as any}
                showControls={true}
                autoStart={false}
                cycleDuration={3}
                intensity={0.6}
              />
            </Box>
          </Box>

          {/* Example 6: Custom Timing Function */}
          <Box bg="white" p={6} borderRadius="lg" shadow="md">
            <Heading size="md" mb={4}>Ease-In-Out-Back</Heading>
            <Text fontSize="sm" color="gray.600" mb={4}>
              Custom cubic-bezier timing function
            </Text>
            <Box position="relative" h="300px" bg="gray.100" borderRadius="md">
              <CyclingImage
                src="/images/new/fattext.webp"
                position="absolute"
                w="200px"
                left="50%"
                top="50%"
                style={{ transform: 'translate(-50%, -50%)' } as any}
                cycleDuration={5}
                intensity={0.7}
                timingFunction="cubic-bezier(0.68, -0.55, 0.265, 1.55)"
              />
            </Box>
          </Box>
        </SimpleGrid>

        {/* Features List */}
        <Box bg="white" p={6} borderRadius="lg" shadow="md">
          <Heading size="md" mb={4}>Component Features</Heading>
          <VStack align="start" gap={2}>
            <Text>✅ Smooth continuous light-to-dark cycling animation</Text>
            <Text>✅ Fully responsive with all Chakra UI responsive props</Text>
            <Text>✅ Maintains absolute/relative positioning</Text>
            <Text>✅ Customizable cycle duration (0.5s - 10s+)</Text>
            <Text>✅ Adjustable intensity (0-100%)</Text>
            <Text>✅ Multiple timing functions (ease, linear, cubic-bezier)</Text>
            <Text>✅ Play/Pause controls (optional)</Text>
            <Text>✅ Real-time speed adjustment</Text>
            <Text>✅ Real-time intensity adjustment</Text>
            <Text>✅ Auto-start or paused initial state</Text>
            <Text>✅ CSS-based animations (hardware accelerated)</Text>
            <Text>✅ Minimal performance impact</Text>
          </VStack>
        </Box>

        {/* Usage Examples */}
        <Box bg="white" p={6} borderRadius="lg" shadow="md">
          <Heading size="md" mb={4}>Usage Examples</Heading>
          <VStack align="start" gap={4}>
            <Box>
              <Text fontWeight="bold" mb={2}>Basic Usage:</Text>
              <Box as="pre" bg="gray.100" p={3} borderRadius="md" fontSize="sm" overflowX="auto">
{`<CyclingImage 
  src="/path/to/image.png"
  position="absolute"
  w="200px"
  left="50px"
  top="100px"
/>`}
              </Box>
            </Box>

            <Box>
              <Text fontWeight="bold" mb={2}>With Custom Settings:</Text>
              <Box as="pre" bg="gray.100" p={3} borderRadius="md" fontSize="sm" overflowX="auto">
{`<CyclingImage 
  src="/path/to/image.png"
  position="absolute"
  w={{ base: "100px", lg: "200px" }}
  left={{ base: "20px", lg: "50px" }}
  top="100px"
  cycleDuration={5}
  intensity={0.7}
  timingFunction="ease-in-out"
/>`}
              </Box>
            </Box>

            <Box>
              <Text fontWeight="bold" mb={2}>With Interactive Controls:</Text>
              <Box as="pre" bg="gray.100" p={3} borderRadius="md" fontSize="sm" overflowX="auto">
{`<CyclingImage 
  src="/path/to/image.png"
  position="absolute"
  w="200px"
  left="50px"
  top="100px"
  showControls={true}
  autoStart={false}
  cycleDuration={3}
  intensity={0.6}
/>`}
              </Box>
            </Box>
          </VStack>
        </Box>
      </VStack>
    </Box>
  )
}

export default CyclingImageDemo