import { Container, ContainerEdit, RenderData } from '@abearxiong/container';
import { useEffect, useRef, useState } from 'react';
import { replace, useParams } from 'react-router';
import { query, ws, useStore } from '@/modules';
import { message } from 'antd';

export const useListener = (id?: string, opts?: any) => {
  const { refresh } = opts || {};
  const connected = useStore((state) => state.connected);
  // 监听服务器的消息
  useEffect(() => {
    if (!id) return;
    if (!connected) return;
    ws.send(
      JSON.stringify({
        type: 'subscribe',
        data: {
          type: 'pageEdit',
          data: {
            cid: id,
            // cids: [],
            // pids:'',
          },
        },
      }),
    );
    ws.addEventListener('message', listener);
    return () => {
      if (!id) return;
      if (!connected) return;
      ws.removeEventListener('message', listener);
    };
  }, [id, connected]);
  const listener = (event) => {
    const parseIfJson = (data: string) => {
      try {
        return JSON.parse(data);
      } catch (e) {
        return data;
      }
    };
    const receivedData = parseIfJson(event.data);
    if (typeof receivedData === 'string') return;
    if (receivedData.type === 'pageEdit' && receivedData.source === 'container') {
      const { data: containerData } = receivedData;
      if (containerData.id !== id) return;
      if (refresh) {
        refresh(containerData);
      }
    }
  };
};
export const Preview = () => {
  const params = useParams<{ id: string }>();
  const id = params.id;
  const ref = useRef<HTMLDivElement>(null);
  const containerRef = useRef<Container | null>(null);
  const [data, setData] = useState<any>({});

  useEffect(() => {
    if (!id) return;
    fetch();
  }, []);
  const fetch = async () => {
    const res = await query.post({
      path: 'container',
      key: 'get',
      id,
    });
    if (res.code === 200) {
      const data = res.data;
      // setData([data]);
      console.log('data', data);
      const code = {
        id: data.id,
        title: data.title,
        codeId: data.Id,
        code: data.code,
        data: data.data,
      };
      init([code]);
    } else {
      message.error(res.msg || 'Failed to fetch data');
    }
  };
  const refresh = (data: any) => {
    if (!data.id) return;
    const code = {
      id: data.id,
      title: data.title,
      codeId: data.Id,
      code: data.code,
      data: data.data,
      hash: '',
    };
    init([code], true);
  };
  useListener(id, { refresh: refresh });
  const init = async (data: any[], replace: boolean = false) => {
    // console.log('data', data, ref.current);
    if (containerRef.current) {
      const container = containerRef.current;
      console.log('data', data, container.data);
      container.updateData(data);
      await new Promise((resolve) => {
        setTimeout(resolve, 2000);
      });
      console.log('update---data', data, container.data);
      container.destroy(id!);
      container.renderId(id!);
      return;
    }
    console.log('data', containerRef.current);
    const container = new Container({
      root: ref.current!,
      data: data as any,
      showChild: false,
    });
    container.renderId(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>
  );
};
