import { useState, useCallback } from '@my-react/react';
import { createReconciler } from '@my-react/react-reconciler-compact';

const Reconciler = createReconciler({
  // Define the reconciler configuration here
});

const App = () => {
  const [state, setState] = useState(0);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState(i => i + 1)}>add</button>
      <button onClick={() => setState(i => i - 1)}>del</button>
    </div>
  );
};

const container = Reconciler.createContainer(
  document.querySelector('#root')
);

Reconciler.updateContainer(<App />, container, null, () => {
  console.log('Render complete');
});

// 1. create a Next.js project

// 2. install @my-react
pnpm add @my-react/react @my-react/react-dom

pnpm add -D @my-react/react-refresh @my-react/react-refresh-tools

// 3. config next.config.js
const withNext = require('@my-react/react-refresh-tools/withNext');

module.exports = withNext(nextConfig);

// 4. start
pnpm run dev

// 1. create a Vite React template

// 2. install @my-react
pnpm add @my-react/react @my-react/react-dom

pnpm add -D @my-react/react-refresh @my-react/react-vite

// 3. config vite.config.ts
import react from "@my-react/react-vite";

export default defineConfig({
  plugins: [react({
    // for remix
    // remix: true,

    // for react router v7
    // reactRouter: true,
  })],
});

// 4. start
pnpm run dev

import { Canvas, useFrame } from "@my-react/react-three-fiber";
import { useRef, useState } from "react";

import type { ThreeElements } from "@my-react/react-three-fiber";

function Box(props: ThreeElements["mesh"]) {
  const ref = useRef<THREE.Mesh>(null!);
  const [hovered, hover] = useState(false);
  const [clicked, click] = useState(false);
  useFrame((state, delta) => (ref.current.rotation.x += delta));
  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => hover(true)}
      onPointerOut={(event) => hover(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
    </mesh>
  );
}

export const Exp = () => {
  return (
    <Canvas>
      <ambientLight intensity={Math.PI / 2} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
      <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
    </Canvas>
  );
};

import React from 'react'
import { Canvas, Text, Flex } from '@canvas-ui/react'

function HelloWorld() {

  const containerStyle = {
    width: 250,
    flexDirection: 'column'
  } as const

  const textStyle = {
    maxWidth: containerStyle.width,
    maxLines: 1,
    cursor: 'pointer',
    fontSize: 14,
    color: '#333'
  } as const

  const [text, setText] = React.useState('Hello, Canvas UI!')
  const setTextRef = (ref) => {
      console.info('Access underlying RenderText object:', ref)
  }

  const handlePointerDown = () => {
    setText(text === 'Hello, Canvas UI!' ? 'Welcome to Canvas UI!' : 'Hello, Canvas UI!')
  }

  return (
    <div style={{ height: '120px', border: '1px solid #ddd', borderRadius: '4px' }}>
      <Canvas>
        <Flex style={containerStyle}>
          <Text
            ref={setTextRef}
            onPointerDown={handlePointerDown}
            style={textStyle}
          >
            {text}
          </Text>
          <Text style={{ ...textStyle, marginTop: 8, fontSize: 12, color: '#666' }}>
            Click the text above to see it change!
          </Text>
        </Flex>
      </Canvas>
    </div>
  )
}

// 1. clone the @my-react devtool repo
git clone https://github.com/MrWangJustToDo/myreact-devtools.git

// 2. init project
pnpm install

// 3. prepare
pnpm run build:packages

// 4. dev / build
// local dev by web
pnpm run dev:web
// install this extension in chrome
pnpm run build:extension

// 5. connect a @my-react app
// copy the connect command in the webUI into the @my-react app console