export default function Preview({ transform, showBtn }) {
  const [handSide, setHandSide] = useState('left');
  const [clientX, setClientX] = useState(0)

  // 是否在拖动
  const [isResizing, setIsResizing] = useState(false)

  const handleStartResize = useCallback((e, side) => {
    setHandSide(side)
    setIsResizing(true)
    setClientX(e.clientX)
  }, [])

  const handleStopResize = useCallback(() => {
    setIsResizing(false);
  }, [])

  const didHandleResize = debounce(e => {
    if (!isResizing) return;
    const offset = e.clientX - clientX;
    let scale = 0;
    const pixelToScale = 0.01;

    if (handSide === 'left') {
      scale = config.scale - offset * pixelToScale;
    }
    if (handSide === 'right') {
      scale = config.scale + offset * pixelToScale;
    }
    setClientX(e.clientX);
    handleConfigChange(parseFloat(scale.toFixed(2)), 'scale');
  }, 0)

  const handleResize = useCallback(didHandleResize, [isResizing, clientX, didHandleResize])

  useEffect(() => {
    document.addEventListener('mouseup', handleStopResize)
    document.addEventListener('mousemove', handleResize)

    return () => {
      document.removeEventListener('mouseup', handleStopResize)
      document.removeEventListener('mousemove', handleResize)
    }
  }, [handleStopResize, handleResize])
  
  return (
    <div className={styles.frameContent}>
      
      <div className={styles.displayContainer}>
        <div className={clsx(styles.mockupModule, styles[config.mockup.theme])} style={{ transform: transform, display: config.hideMockup ? 'none' : 'block' }}>
          <div className={styles.devices}>
            <div className={styles.item}>
              <div className={clsx(styles.itemContainer, 'item-container')}>
              { /*省略*/ }
              </div>
            </div>
            <div className={styles.resizeHandle}>
              <div className={clsx(styles.handleArea, styles.leftTop)} onMouseDown={e => handleStartResize(e, 'left')}>
                <div className={styles.handle} />
              </div>
              <div className={clsx(styles.handleArea, styles.rightTop)} onMouseDown={e => handleStartResize(e, 'right')}>
                <div className={styles.handle} />
              </div>
              <div className={clsx(styles.handleArea, styles.rightBottom)} onMouseDown={e => handleStartResize(e, 'right')}>
                <div className={styles.handle} />
              </div>
              <div className={clsx(styles.handleArea, styles.leftBottom)} onMouseDown={e => handleStartResize(e, 'left')}>
                <div className={styles.handle} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

function getDisplayMedia(options) {
  if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
    return navigator.mediaDevices.getDisplayMedia(options);
  }
  if (navigator.getDisplayMedia) {
    return navigator.getDisplayMedia(options);
  }
  if (navigator.webkitGetDisplayMedia) {
    return navigator.webkitGetDisplayMedia(options);
  }
  if (navigator.mozGetDisplayMedia) {
    return navigator.mozGetDisplayMedia(options);
  }
  throw new Error('getDisplayMedia is not defined');
}

async function takeScreenshotStream() {
  const width = screen.width * (window.devicePixelRatio || 1);
  const height = screen.height * (window.devicePixelRatio || 1);

  const errors = [];
  let stream;
  const mediaStreamConstraints = {
    audio: false,
    video: { width, height, frameRate: 1 }
  };

  try {
    stream = await getDisplayMedia(mediaStreamConstraints);
  } catch (ex) {
    errors.push(ex);
  }

  if (errors.length) {
    console.debug(...errors);
    if (!stream) {
      throw errors[errors.length - 1];
    }
  }

  return stream;
}

async function takeScreenshotCanvas() {
  const stream = await takeScreenshotStream();
  const video = document.createElement('video');
  const result = await new Promise((resolve, reject) => {
    video.onloadedmetadata = () => {
      video.play();
      video.pause();
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const context = canvas.getContext('2d');
      context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
      resolve(canvas);
    }
    video.srcObject = stream;
  })
  
  stream.getTracks().forEach(function (track) {
    track.stop();
  })

  if (result == null) {
    throw new Error('Cannot take canvas screenshot');
  }

  return result;
}

import Slider from '@mui/material/Slider';

export default function Main() {
  <Slider
    aria-label="Temperature"
    defaultValue={30}
    color="secondary"
  />
}

<Slider
  sx={{
    height: 28
  }}
/>

<Slider
  sx={{
    height: 28,
    color: 'rgba(220,220,220,1)'
  }}
/>

<Slider
  sx={{
    height: 28,
    color: 'rgba(220,220,220,1)',
    borderRadius: '5px',
    '& .MuiSlider-thumb': {
      width: '2px',
      height: '20px',
      margin: '0 4px',
      borderRadius: 0,
      backgroundColor: 'currentColor',
      boxShadow: 'none',
      border: 'none',
      '&::before': { boxShadow: 'none' },
    }
  }}
/>

import { Box, Slider } from '@mui/material';

export default function CustomSlider() {
  const [score, setScore] = useState(45);
  return (
    <Box sx={{ position: 'relative', display: 'flex' }}>
      <Slider
        defaultValue={score}
        aria-label='Score'
        min={1}
        step={1}
        max={100}
        sx={{
          height: 28,
          color: 'rgba(220,220,220,1)',
          borderRadius: '5px',
          '& .MuiSlider-thumb': {
            width: '2px',
            height: '20px',
            margin: '0 4px',
            borderRadius: 0,
            backgroundColor: 'currentColor',
            boxShadow: 'none',
            border: 'none',
            '&::before': { boxShadow: 'none' },
          },
          '& .MuiSlider-rail': {
            position: 'relative'
          },
          '& .MuiSlider-track': {
            border: 'none'
          }
        }}
        onChange={(e, val) => setScore(val)}
      />
      <Box sx={{
        width: '100%',
        display: 'flex',
        position: 'absolute',
        height: '100%',
        top: 0,
        zIndex: 1,
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '0 8px',
        pointerEvents: 'none',
        fontSize: '11px',
        color: 'rgba(0,0,0,0.56)'
      }}>
        <span>Score</span>
        <span>{score}</span>
      </Box>
    </Box>
  )
}

import React from 'react';
import Lottie from 'react-lottie';
import * as animationData from '../json/github.json';

export default function WebLottie () {
  return (
    <Lottie
      options={{
        loop: true,
        autoplay: true, 
        animationData: animationData,
        rendererSettings: {
          preserveAspectRatio: 'xMidYMid slice'
        }
      }}
      height={400}
      width={400}
    />
  )
}

import React, { useRef } from 'react';
import * as d3 from 'd3';

export default function Chart() {
  const width = 320;
  const height = 200;

  const svgRef = useRef();

  return (
    <svg ref={svgRef} width={width} height={height}></svg>
  )
}

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

export default function Chart({ data }) {
  ...

  useEffect(() => {
    const svg = d3.select(svgRef.current);

    // 计算比例尺
    const xScale = d3.scaleLinear()
      .domain(d3.extent(data.map(d => d.distance)))
      .range([margin.left, width - margin.right]);

    const yScale = d3.scaleLinear()
      .domain(d3.extent(data.map(d => d.elevation)))
      .range([height - margin.bottom - 5, margin.top]);
    
    const xAxis = d3.axisBottom(xScale).ticks(width / 80)
      .tickSizeOuter(0).tickFormat(val => val + 'm');
    const yAxis = d3.axisLeft(yScale).ticks(height / 40);

    // 绘制横坐标轴
    svg
      .append('g')
      .attr('transform', `translate(0, ${height - margin.bottom})`)
      .call(xAxis);

    // 绘制纵坐标轴
    svg
      .append('g')
      .attr('transform', `translate(${margin.left}, 0)`)
      .call(yAxis)
      .call(g => g.append("text")
        .attr("x", -margin.left)
        .attr("y", 10)
        .attr("fill", "#6b716a")
        .attr("text-anchor", "start")
        .text("海拔 (m)"));

  }, data);

  ...
}

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

export function Chart({ data }) {
  ...

  useEffect(() => {
    ...

    const line = d3
      .line()
      .x(d => xScale(d.distance))
      .y(d => yScale(d.elevation));
        
    // 绘制折线
    svg
      .append('path')
      .datum(data)
      .attr('class', 'line')
      .attr('d', line)
      .attr('fill', 'none')
      .attr('stroke', '#75A134')
      .attr('stroke-width', 1);

  }, data);

  ...
}

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

export function ChartDrawArea({ data }) {
  ...

  useEffect(() => {
    ...
    
    const area = d3
      .area()
      .x(d => xScale(d.distance))
      .y0(height - margin.bottom)
      .y1(d => yScale(d.elevation));
    
    // 绘制渐变区域
    svg
      .append('path')
      .datum(data)
      .attr('d', area)
      .attr('fill', 'url(#gradient)');

  }, data);

  return (
    <svg ref={svgRef} width={width} height={height}>
      <defs>
        <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="rgba(117,161,52, 0.3)" />
          <stop offset="60%" stopColor="rgba(117,161,52, 0.2)" />
          <stop offset="100%" stopColor="rgba(117,161,52, 0)" />
        </linearGradient>
      </defs>
    </svg>
  )
}

import React, { useRef, useEffect, useState } from 'react';
import * as d3 from 'd3';

export default function Chart({ data, width, height }) {
  ...

  const clamp = (num, min, max) => Math.min(Math.max(num, min), max);

  const handleMouseMove = e => {
    const bounds = e.target.getBoundingClientRect()
    const posX = e.clientX ? e.clientX : clamp(e.targetTouches[0].clientX, 58, width + 32)
    const x = posX - bounds.left + margin.left

    const xScale = d3.scaleLinear()
      .domain(d3.extent(data.map(d => d.distance)))
      .range([margin.left, width - margin.right]);

    // 根据鼠标当前所在位置计算横坐标
    const distance = xScale.invert(x)

    // 根据当前鼠标所在横坐标的值获得最近的点
    const { elevation, coordinates } = data.reduce((prev, curr) =>
      Math.abs(curr.distance - distance) < Math.abs(prev.distance - distance) ? curr : prev,
    )

    setHoverX(x)
    setHoverDistance(Math.round(distance * 100) / 100)
    setHoverElevation(Math.floor(elevation))
  }

  const handleMouseLeave = () => {
    setHoverX(null)
    setHoverDistance(null)
  }

  function HoverText({ y, children }) {
    const alignToRight = hoverX > width - margin.left - margin.right - 55
    return (
      <text
        x={alignToRight ? -4 : 4}
        y={y}
        textAnchor={alignToRight ? 'end' : 'start'}
        alignmentBaseline="hanging"
        fill="currentColor"
        className='hover-text'
      >
        {children}
      </text>
    )
  }

  return (
    <svg className='chart' ref={svgRef} width={width} height={height}>
      <defs>
        <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="rgba(117,161,52, 0.3)" />
          <stop offset="60%" stopColor="rgba(117,161,52, 0.2)" />
          <stop offset="100%" stopColor="rgba(117,161,52, 0)" />
        </linearGradient>
      </defs>

      {/* 垂直引导线 */}
      {hoverX && (
        <g transform={`translate(${hoverX}, 0)`}>
          <line y1={margin.top} y2={height - margin.bottom} stroke="currentColor" />
          <HoverText y={margin.top}>Dist: {hoverDistance} km</HoverText>
          <HoverText y={margin.top + 16}>Elev: {hoverElevation} m</HoverText>
        </g>
      )}

      {/* 悬浮效果触发区域 */}
      {width > 0 && height > 0 && (
        <rect
          width={width - margin.left - margin.right}
          height={height - margin.top - margin.bottom}
          fill="transparent"
          x={margin.left}
          y={margin.top}
          onMouseMove={handleMouseMove}
          onMouseLeave={handleMouseLeave}
          onTouchMove={handleMouseMove}
          onTouchEnd={handleMouseLeave}
        />
      )}
    </svg>
  );
}

import React, { useRef, useEffect, useState } from 'react';
import * as d3 from 'd3';

export default function Chart({ data, width, height }) {
  const svgRef = useRef();

  const [hoverX, setHoverX] = useState(null)
  const [hoverDistance, setHoverDistance] = useState(null)
  const [hoverElevation, setHoverElevation] = useState(null)

  const margin = {
    top: 20,
    right: 0,
    bottom: 20,
    left: 25
  }

  const clamp = (num, min, max) => Math.min(Math.max(num, min), max);

  useEffect(() => {
    const svg = d3.select(svgRef.current);

    const xScale = d3.scaleLinear()
      .domain(d3.extent(data.map(d => d.distance)))
      .range([margin.left, width - margin.right]);

    const yScale = d3.scaleLinear()
      .domain(d3.extent(data.map(d => d.elevation)))
      .range([height - margin.bottom - 5, margin.top]);

    const line = d3.line().x(d => xScale(d.distance)).y(d => yScale(d.elevation));
    const area = d3.area().x(d => xScale(d.distance)).y0(height - margin.bottom).y1(d => yScale(d.elevation));
    
    const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0).tickFormat(val => val + 'm');
    const yAxis = d3.axisLeft(yScale).ticks(height / 40);

    // 绘制坐标轴
    svg
      .append('g')
      .attr('transform', `translate(0, ${height - margin.bottom})`)
      .call(xAxis);
    
    svg
      .append('g')
      .attr('transform', `translate(${margin.left}, 0)`)
      .call(yAxis)
      .call(g => g.append("text")
        .attr("x", -margin.left)
        .attr("y", 10)
        .attr("fill", "#6b716a")
        .attr("text-anchor", "start")
        .text("海拔 (m)"));

    // 绘制折线
    svg
      .append('path')
      .datum(data)
      .attr('class', 'line')
      .attr('d', line)
      .attr('fill', 'none')
      .attr('stroke', '#75A134')
      .attr('stroke-width', 1);

    svg
      .append('path')
      .datum(data)
      .attr('d', area)
      .attr('fill', 'url(#gradient)');

  }, [svgRef.current, data]);

  const handleMouseMove = e => {
    const bounds = e.target.getBoundingClientRect()
    const posX = e.clientX ? e.clientX : clamp(e.targetTouches[0].clientX, 58, width + 32) // TODO: measure - 58px from left screen edge, 32px from right
    const x = posX - bounds.left + margin.left

    // 根据鼠标当前所在位置计算横坐标
    const xScale = d3.scaleLinear()
      .domain(d3.extent(data.map(d => d.distance)))
      .range([margin.left, width - margin.right]);
    const distance = xScale.invert(x)
    // 根据当前鼠标所在横坐标的值获得最近的点
    const { elevation, coordinates } = data.reduce((prev, curr) =>
      Math.abs(curr.distance - distance) < Math.abs(prev.distance - distance) ? curr : prev,
    )

    setHoverX(x)
    setHoverDistance(Math.round(distance * 100) / 100)
    setHoverElevation(Math.floor(elevation))
  }

  const handleMouseLeave = () => {
    setHoverX(null)
    setHoverDistance(null)
  }

  function HoverText({ y, children }) {
    const alignToRight = hoverX > width - margin.left - margin.right - 55
    return (
      <text
        x={alignToRight ? -4 : 4}
        y={y}
        textAnchor={alignToRight ? 'end' : 'start'}
        alignmentBaseline="hanging"
        fill="currentColor"
        className='hover-text'
      >
        {children}
      </text>
    )
  }

  return (
    <svg className='chart' ref={svgRef} width={width} height={height}>
      <defs>
        <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="rgba(117,161,52, 0.3)" />
          <stop offset="60%" stopColor="rgba(117,161,52, 0.2)" />
          <stop offset="100%" stopColor="rgba(117,161,52, 0)" />
        </linearGradient>
      </defs>

      {/* 垂直引导线 */}
      {hoverX && (
        <g transform={`translate(${hoverX}, 0)`}>
          <line y1={margin.top} y2={height - margin.bottom} stroke="currentColor" />
          <HoverText y={margin.top}>Dist: {hoverDistance} km</HoverText>
          <HoverText y={margin.top + 16}>Elev: {hoverElevation} m</HoverText>
        </g>
      )}

      {/* 悬浮效果触发区域 */}
      {width > 0 && height > 0 && (
        <rect
          width={width - margin.left - margin.right}
          height={height - margin.top - margin.bottom}
          fill="transparent"
          x={margin.left}
          y={margin.top}
          onMouseMove={handleMouseMove}
          onMouseLeave={handleMouseLeave}
          onTouchMove={handleMouseMove}
          onTouchEnd={handleMouseLeave}
        />
      )}
    </svg>
  );
}