import React, { useCallback, useContext, useEffect, useState } from 'react';
import { Texture } from 'fabric-texture';
import Skew from 'fabric-texture/modes/skew'
import styles from './style.less';
import { DocsContext } from 'docs/docs';

const canvasToURL = async (canvas: HTMLCanvasElement) =>
  new Promise<string>((resolve) => {
    canvas.toBlob((blob) => {
      if (blob) {
        const url = URL.createObjectURL(blob);
        resolve(url);
      }
    });
  });

function Principle() {
  const { placeholder } = useContext(DocsContext);

  const [previews, setPreviews] = useState<string[]>([]);

  const run = useCallback(async (image: HTMLImageElement) => {
    const canvases: HTMLCanvasElement[] = [];

    const texture = new Texture(image);
    texture.setSplitUnit(0.2).setInputLimitSize({ width: 400 }).setSplitStrategy({
      name: 'skew',
      execute: Skew.execute,
    });

    // 原图
    canvases.push(texture.create());

    // 显示分割线
    texture.setRenderOptions({ showGrid: true });
    canvases.push(texture.create());

    // 透视效果
    texture
      .setVertexCoord(0, 0, 'tl', { x: image.naturalWidth * 0.2, y: 0 })
      .setVertexCoord(0, 0, 'tr', { x: image.naturalWidth * 1.2, y: 0 });
    canvases.push(texture.create());

    // 隐藏分割线
    texture.setRenderOptions({ showGrid: false });
    canvases.push(texture.create());

    setPreviews(await Promise.all(canvases.map(canvasToURL)));
  }, []);

  useEffect(() => {
    if (placeholder) run(placeholder);
  }, [placeholder]);

  return (
    <div className={styles.demo}>
      {previews.map((image, index) => (
        <div className={styles.box}>
          <div className={styles.image}>
            <img src={image} />
          </div>
          <span>步骤{index + 1}</span>
        </div>
      ))}
    </div>
  );
}

export default Principle;