import { create } from 'zustand';
import { query } from '@/modules';
import { message } from 'antd';
import { produce } from 'immer';

type PanelStore = {
  id: string;
  setId: (id: string) => void;
  loading: boolean;
  setLoading: (loading: boolean) => void;
  data: any;
  setData: (data: any) => void;
  getPanel: (id?: string) => Promise<void>;
  saveNodesEdges: (data: { nodes?: any[]; edges?: any[]; viewport?: any }) => Promise<void>;
  updateNodeData: (data: any) => Promise<void>;
  updateNodeDataStyle: (data: any, force?: boolean) => Promise<any>;
};
export const usePanelStore = create<PanelStore>((set, get) => {
  return {
    id: '',
    setId: (id) => set({ id }),
    loading: false,
    setLoading: (loading) => set({ loading }),
    data: {},
    setData: (data) => set({ data }),
    getPanel: async (pid) => {
      const id = pid || get().id;
      if (!id) {
        message.error('ID is required');
        return;
      }
      set(
        produce((state) => {
          state.data = {};
          state.loading = true;
        }),
      );
      const res = await query.post({
        path: 'page',
        key: 'get',
        id,
      });
      set({ loading: false });
      console.log('res', res);
      if (res.code === 200) {
        set(
          produce((state) => {
            state.data = res.data;
            state.id = res.data.id;
          }),
        );
      } else {
        message.error(res.message || 'Request failed');
      }
    },
    saveNodesEdges: async ({ edges, nodes, viewport }) => {
      const { id, data: panelData } = get();
      const { data } = panelData || {};
      const res = await query.post({
        path: 'page',
        key: 'update',
        data: {
          id,
          data: {
            ...data.data,
            edges,
            nodes,
            viewport,
          },
        },
      });
      if (res.code === 200) {
        message.success('Success', 1);
        set(
          produce((state) => {
            state.data = res.data;
          }),
        );
      } else {
        message.error(res.message || 'Request failed');
      }
    },
    updateNodeData: async (data) => {
      // const { getList } = get();
      const { id, data: panelData } = get();
      const res = await query.post({
        path: 'page',
        key: 'updateNode',
        data: {
          id: id,
          nodeData: data,
        },
      });
      if (res.code === 200) {
        message.success('Success', 1);
        // getList();
      } else {
        message.error(res.message || 'Request failed');
      }
    },
    updateNodeDataStyle: async (data, force) => {
      const { loading } = get();
      if (loading) {
        message.error('Request in progress, please wait');
        return;
      }
      const loaded = message.loading('Saving...', 0);
      set({ loading: true });
      const res = await query.post({
        path: 'page',
        key: 'updateNode',
        data: data,
        force,
      });
      loaded();
      set({ loading: false });
      if (res.code === 200) {
        message.success('Update Style Success', 1);
        // getList();
        return true;
      } else {
        message.error(res.message || 'Request failed');
      }
      return false;
    },
  };
});
