import { useEffect, useState } from 'react';

import { BaseModel, CHANGE_EVENT_TYPE, EventTopic } from '../models';
import { BelongsTo } from '../models/belongs-to';
import { Id } from '../types';
import { useAsync, UseAsyncResult } from './use-async';
import { useBaseModelRelation, useSDKEventBus } from './use-models';

export type UseBelongsTo<DataItem> = {
  model: any;
  getByParentId: (id: Id) => UseAsyncResult<DataItem>;
};

export const useBelongsTo = <DataItem>(
  model: BaseModel<any>,
  classProp: string,
) => {
  const relation = useBaseModelRelation(model, classProp);
  const eventBus = useSDKEventBus();
  return {
    model: relation,
    getByParentId: useGetByParentId<DataItem>(relation, eventBus),
  };
};

const useGetByParentId = <DataItem>(
  relation: BelongsTo<DataItem>,
  eventBus: EventTopic,
) => (id: Id): UseAsyncResult<DataItem> => {
  const [data, setData] = useState();
  const [gotten, fetch, loading, error] = useAsync(relation.get.bind(relation));

  async function handleChange() {
    const d = await relation.getLocal(id);
    setData(d);
  }

  useEffect(() => {
    handleChange();
  }, []);

  useEffect(() => {
    eventBus.addEventListener(CHANGE_EVENT_TYPE, handleChange);
    return () => eventBus.removeEventListener(CHANGE_EVENT_TYPE, handleChange);
  });

  useEffect(() => {
    setData(gotten);
  }, [gotten]);
  const exec = (...args: any[]) => fetch(id, ...args);
  return [data, exec, loading, error];
};