import { Box, Flex, Image as ChakraImage } from '@chakra-ui/react';
import React from 'react';
import { Logo } from '~/components/Branding/Logo';

export default function Scratchpad() {
  const [xDrag, setXDrag] = React.useState(0);
  const [yDrag, setYDrag] = React.useState(0);

  const [dragImg, setDragImg] = React.useState<null | HTMLElement>();

  React.useEffect(() => {
    const dragImg = new Image(0, 0);
    dragImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
    setDragImg(dragImg);
  }, []);

  const [startDrag, setStartDrag] = React.useState({ x: 0, y: 0 });

  const onStartDrag = (e) => {
    console.log('nik e', e);

    e.dataTransfer.setDragImage(dragImg, 0, 0);

    setStartDrag({ x: e.clientX, y: e.clientY });
  };

  const onDrag = (e) => {
    if (e.clientX && e.clientY) {
      const { x, y } = { x: startDrag.x - e.clientX, y: e.clientY - startDrag.y };

      // console.log('nik x', x);
      // console.log('nik y', y);
      // console.log('nik e.clientX', e.clientX);
      // console.log('nik e.clientY', e.clientY);
      // console.log('nik startDrag.x', startDrag.x);
      // console.log('nik startDrag.y', startDrag.y);

      setXDrag(x);
      setYDrag(y);
    }
  };

  const checkerBoard = React.useMemo(() => {
    return (
      <Logo
        // opacity={0.2}
        space={0}
        matrix={checkerMatrix}
        colourMap={{
          0: 'white',
          1: 'random'
        }}
      ></Logo>
    );
  }, []);

  return (
    <div>
      <h1>Scratchpad</h1>
      <p>This is a scratchpad for testing out new code snippets.</p>

      <div>
        xDrag: {xDrag}
        yDrag: {yDrag}
      </div>

      {/* <canvas id="canvas" width="1920" height="1080">
        
      </canvas> */}
      <Flex userSelect={'none'} pointerEvents={'none'} pos={'relative'}>
        <ChakraImage pos={'absolute'} top={0} right={0} alt="gbg" src="/gbg.png"></ChakraImage>

        <ChakraImage
          onDragStart={onStartDrag}
          onDrag={onDrag}
          // marginLeft={'-50px'}
          // marginTop={'-75px'}
          marginRight={'25%'}
          marginTop={'25%'}
          zIndex={999}
          pointerEvents={'all'}
          cursor={'pointer'}
          pos={'absolute'}
          top={yDrag + 'px'}
          right={xDrag + 'px'}
          alt="gh"
          src="/gh.png"
        ></ChakraImage>

        <Box
          // filter={'url(#displace-filter-y) url(#anti-displace-filter-y)'}
          // filter={'url(#displace-filter-gradient-2)'}
          filter={'url(#displace-filter-gradient)'}
          // filter={'url(#displace-filter-y)'}
          // filter={'url(#displace-filter)'}
          overflow="hidden"
          width={'1920px'}
          height={'1080px'}
          pos="relative"
          backgroundImage={'url(/gs2.png)'}
        >
          {/* {checkerBoard}
          <Box pos={'absolute'} width={'100%'} height={'100%'} overflow={'hidden'}></Box>
          <Box bg="lightpink" pos="absolute" top="10%" left="5%" w={'40%'} textAlign="center">
            <h2>Centered Box</h2>
            <p>This box is centered in the parent box.</p>
          </Box>
          <Box bg="orange" pos="absolute" top="10%" right="5%" w={'40%'} textAlign="center">
            <h2>Centered Box</h2>
            <p>This box is centered in the parent box.</p>
          </Box> */}
        </Box>
      </Flex>

      {/* 
      
        P'(x,y) ← P(x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))
        
        1 + 50 * (0 - 0.5)
      
       */}

      <svg width="0" height="0">
        <defs>
          <filter colorInterpolationFilters="sRGB" width={1920} height={1080} x="0" y="0" id="displace-filter-y">
            <feImage width={1920} height={1080} xlinkHref="/displacement.svg" result="pict2" />;
            <feDisplacementMap
              xChannelSelector="G"
              yChannelSelector="A"
              scale={-1 * yDrag}
              width={1920}
              height={1080}
              in2="pict2"
              in="SourceGraphic"
            ></feDisplacementMap>
          </filter>
          <filter colorInterpolationFilters="sRGB" width={1920} height={1080} x="0" y="0" id="displace-filter-gradient">
            <feImage width={1920} height={1080} xlinkHref="/displacement-gradient.svg" result="pict2" />;
            <feDisplacementMap xChannelSelector="A" yChannelSelector="A" scale={-1000} width={1920} height={1080} in2="pict2" in="SourceGraphic">
              <animate attributeName="scale" values="0; -1000; 0" dur="5s" repeatCount="indefinite" />
            </feDisplacementMap>
          </filter>
          <filter colorInterpolationFilters="sRGB" width={2147} height={1884} id="displace-filter-gradient-2">
            <feImage width={2147} height={1884} xlinkHref="/displacement-gradient-2.svg" result="pict2" />;
            <feDisplacementMap xChannelSelector="A" yChannelSelector="A" scale={0} width={2147} height={1884} in2="pict2" in="SourceGraphic">
              <animate attributeName="scale" values="0; -1000; 0" dur="5s" repeatCount="indefinite" />
            </feDisplacementMap>
          </filter>
        </defs>
      </svg>
      <svg width="0" height="0">
        <defs>
          <filter colorInterpolationFilters="sRGB" width={1920} height={1080} x="0" y="0" id="anti-displace-filter-y">
            <feImage width={1920} height={1080} xlinkHref="/anti-displacement.svg" result="pict3" />;
            <feDisplacementMap
              xChannelSelector="G"
              yChannelSelector="A"
              scale={1 * yDrag}
              width={1920}
              height={1080}
              in2="pict3"
              in="SourceGraphic"
            ></feDisplacementMap>
          </filter>
        </defs>
      </svg>

      {/* <img src="/displacement-gradient.svg" alt="displacement" /> */}
      <img src="/displacement-gradient-2.svg" alt="displacement" />
      {/* <img src="/displacement.svg" alt="displacement" /> */}
    </div>
  );
}

const checkerMatrix = [
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101',
  '1010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010',
  '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101'
];