import React from 'react';
import * as DashboardStoreNs from '../dashboard-store';
import { Instance } from 'mobx-state-tree';
import { observer } from 'mobx-react-lite';
import * as KanbanWidgetNs from './kanban';
import { DebugInfo } from '../../misc-components/debug-info';
import * as IssuesListNs from './issues-list';
import * as CalendarNextEventsNs from './calendar-next-events';
import * as DailyEccmV2 from './daily-eccm-v2';

export type Props = {
  store: Instance<typeof DashboardStoreNs.Widget>;
};

export const WidgetFactory = observer((props: Props): JSX.Element => {
  const type = props.store.type;

  if (type.startsWith('kanban_by_')) {
    return <KanbanWidgetNs.Kanban store={props.store} />;
  }

  if (type.startsWith('issues_list_')) {
    return <IssuesListNs.IssuesList store={props.store} />;
  }

  if (type === 'calendar_next_events') {
    return <CalendarNextEventsNs.CalendarNextEvents store={props.store} />;
  }

  if (type === 'daily_eccm_v2') {
    return <DailyEccmV2.DailyEccmV2 store={props.store} />;
  }

  return (
    <div>
      <div>Unknown widget</div>
      <DebugInfo value={JSON.stringify(props.store, null, '  ')} />
    </div>
  );
});
