import React, { useCallback } from 'react';
import { message } from 'antd';
import { useRecoilState } from 'recoil';
import {
  //
  CreateStateQuery,
  UpdateStateQuery,
  RemoveStateQuery,
  //
  CreateViewpointQuery,
  UpdateViewpointQuery,
  UpdateSceneQuery,
  //
  SceneStateConfig,
  SceneViewpointConfig,
  RemoveViewpointQuery,
} from '@easytwin/core';

import { StateApi, ViewpointApi, SceneApi } from '@/server';
import {
  _sceneStateList,
  _sceneStatesSelectKey,
  _sceneViewpointList,
  _sceneViewpointSelectKey,
} from '@/pages/ProjectEditor/module';

export const useProjectEditerScene = () => {
  const updateScene = useCallback(async (query: UpdateSceneQuery) => {
    const result = await SceneApi.update(query);
    return result;
  }, []);
  return { updateScene };
};

export const useProjectEditerState = () => {
  const [stateList, setStateList] = useRecoilState(_sceneStateList);
  const [, setSelectKey] = useRecoilState(_sceneStatesSelectKey);

  const createState = React.useCallback(
    async (query: CreateStateQuery) => {
      const data = await StateApi.create(query).catch(message.error);

      if (data) {
        message.success('创建成功!');
        setStateList([...stateList, data]);
        setSelectKey(data.id);
      } else {
        message.error('创建失败!');
      }
      return data;
    },
    [setSelectKey, stateList, setStateList],
  );

  const updateState = React.useCallback(
    async (query: UpdateStateQuery, showOkMsg: boolean = false) => {
      const data = await StateApi.update(query).catch(message.error);
      if (data) {
        const { id, name, config, rank } = query;
        showOkMsg && message.success('更新成功!');

        setStateList(
          stateList.map((item) => {
            if (item.id === id) {
              const result = {
                name,
                rank,
                config,
              };

              if (!name) delete result.name;
              if (!rank) delete result.rank;
              if (!config) delete result.config;

              return {
                ...item,
                ...result,
              } as SceneStateConfig;
            }
            return item;
          }),
        );
      } else {
        message.error('更新失败!');
      }
      return data;
    },
    [setStateList, stateList],
  );

  const removeState = React.useCallback(
    async (query: RemoveStateQuery) => {
      const data = await StateApi.remove(query).catch(message.error);
      if (data) {
        message.success('删除成功!');
        setStateList(stateList.filter((state) => state.id !== query.id));
        setSelectKey(stateList[0].id);
      } else {
        message.error('删除失败!');
      }
      return data;
    },
    [setSelectKey, setStateList, stateList],
  );

  return {
    createState,
    updateState,
    removeState,
  };
};

export const useProjectEditerViewpoint = () => {
  const [viewpointList, setViewpointList] = useRecoilState(_sceneViewpointList);
  const [, setSelectKey] = useRecoilState(_sceneViewpointSelectKey);

  const createViewpoint = React.useCallback(
    async (query: CreateViewpointQuery) => {
      const data = await ViewpointApi.create(query).catch(message.error);

      if (data) {
        message.success('创建成功!');
        setViewpointList([...viewpointList, data]);
        setSelectKey(data.id);
      } else {
        message.error('创建失败!');
      }
      return data;
    },
    [setSelectKey, viewpointList, setViewpointList],
  );

  const updateViewpoint = React.useCallback(
    async (query: UpdateViewpointQuery, showOkMsg: boolean = false) => {
      const data = await ViewpointApi.update(query).catch(message.error);
      if (data) {
        const { id, name, config, rank } = query;

        showOkMsg && message.success('更新成功!');
        setViewpointList(
          viewpointList.map((item) => {
            if (item.id === id) {
              const result = {
                name,
                rank,
                config,
              };

              if (!name) delete result.name;
              if (!rank) delete result.rank;
              if (!config) delete result.config;

              return {
                ...item,
                ...result,
              } as SceneViewpointConfig;
            }
            return item;
          }),
        );
      } else {
        message.error('更新失败!');
      }
      return data;
    },
    [viewpointList, setViewpointList],
  );

  const removeViewpoint = React.useCallback(
    async (query: RemoveViewpointQuery) => {
      const data = await ViewpointApi.remove(query).catch(message.error);
      if (data) {
        message.success('删除成功!');
        setViewpointList(viewpointList.filter((state) => state.id !== query.id));
        setSelectKey(viewpointList[0].id);
      } else {
        message.error('删除失败!');
      }
      return data;
    },
    [viewpointList, setViewpointList, setSelectKey],
  );

  return {
    createViewpoint,
    updateViewpoint,
    removeViewpoint,
  };
};