import { Container, ContainerEdit } from '@abearxiong/container';
import { useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router';
import { query } from '@/modules';
import { message } from 'antd';
import '@abearxiong/container/dist/container.css';

export const Deck = () => {
  const params = useParams<{ id: string }>();
  const id = params.id;
  const ref = useRef<HTMLDivElement>(null);
  const containerRef = useRef<any>(null);
  const [data, setData] = useState<any>({});

  useEffect(() => {
    if (!id) return;
    fetch();
  }, []);
  const fetch = async () => {
    const res = await query.post({
      path: 'page',
      key: 'getDeck',
      id,
    });
    if (res.code === 200) {
      const data = res.data;
      console.log('data', data);
      const { page, containerList } = data;
      const { edges, nodes } = page.data;
      for (let edge of edges) {
        const { source, target } = edge;
        const node = nodes.find((node: any) => node.id === source);
        if (!node) continue;
        node.children = node.children || [];
        node.children.push(target);
      }
      for (let node of nodes) {
        const container = containerList.find((container: any) => container.id === node.data?.cid);
        if (container) {
          node.container = container;
        }
      }
      const codes = nodes.map((node: any) => {
        const container = node.container;
        const data = container?.data || {};
        return {
          id: node.id,
          title: node.title,
          code: container?.code || '',
          data: data,
          children: node.children,
          ...data, // style className shadowRoot showChild
        };
      });
      // const code = {
      //   id: data.id,
      //   title: data.title,
      //   code: data.code,
      //   data: data.data,
      // };
      // init([code]);
      init(codes);
      console.log('codes', codes);
    }
    // if (res.code === 200) {
    //   const data = res.data;
    //   // setData([data]);
    //   console.log('data', data);
    //   const code = {
    //     id: data.id,
    //     title: data.title,
    //     code: data.code,
    //     data: data.data,
    //   };
    //   init([code]);
    // } else {
    //   message.error(res.msg || 'Failed to fetch data');
    // }
  };
  const init = async (data: any[]) => {
    // console.log('data', data, ref.current);
    const container = new ContainerEdit({
      root: ref.current!,
      data: data as any,
      showChild: true,
      // edit: false,
    });
    container.render(id!);
    containerRef.current = container;
  };
  return (
    <div className='w-full h-full bg-gray-200'>
      <div className='text-center mb-10 font-bold text-4xl mt-4 '>Preview</div>
      <div
        className='flex '
        style={{
          height: 'calc(100% - 32px)',
        }}>
        <div className='mx-auto border bg-white h-h-full w-[80%] h-[80%]' ref={ref}></div>
      </div>
    </div>
  );
};