import { observer } from 'mobx-react-lite';
import React from 'react';
import * as DashboardStoreNs from './dashboard-store';
import * as WidgetFactoryNs from './widgets/widget-factory';

export type Props = {
  store: DashboardStoreNs.IWidget;
};

/**
 * Пример данных передаваемых в виджет:
 *
 * {
 *   "type": "kanban_by_tree",
 *   "id": "first",
 *   "title": "Первый виджет",
 *   "dataLoaderParams": {
 *     "rootIssueId": 2,
 *     "groups": {
 *       "fromIssues": [
 *         {
 *           "issueId": 3,
 *           "name": "Тест"
 *         }
 *       ],
 *       "fromIssuesIncluded": false,
 *       "showOthers": true
 *     },
 *     "statuses": [
 *       "New",
 *       "Re-opened",
 *       "In Progress",
 *       "Code Review",
 *       "Resolved",
 *       "Testing",
 *       "Feedback",
 *       "Wait Release",
 *       "Pending",
 *       "Closed",
 *       "Rejected"
 *     ],
 *     "tags": {
 *       "tagsKeyName": "tags",
 *       "styledTagsKeyName": "styledTags",
 *       "styles": {
 *         "supertag": "background-color: rgb(128, 0, 0); color: rgb(255, 255, 255);"
 *       },
 *       "defaultStyle": "background-color: rgb(128, 128, 128);"
 *     },
 *     "priorities": [
 *       {
 *         "rules": [
 *           {
 *             "priorityName": "P1",
 *             "style": "background-color: #DB2228;"
 *           },
 *           {
 *             "priorityName": "P2",
 *             "style": "background-color: #FA5E26;"
 *           },
 *           {
 *             "priorityName": "P3",
 *             "style": "background-color: #FDAF19;"
 *           },
 *           {
 *             "priorityName": "P4",
 *             "style": "background-color: #31A8FF;",
 *             "default": true
 *           },
 *           {
 *             "priorityName": "P5",
 *             "style": "background-color: #FFFFFF; border: 0.5px solid #393838; color: #202020;"
 *           }
 *         ],
 *         "targetKey": "priorityStyle"
 *       }
 *     ]
 *   }
 * }
 */

function onWidgetVisibleToggleClick(store: DashboardStoreNs.IWidget): void {
  if (!store.loaded && store.dashboardId) {
    DashboardStoreNs.WidgetLoadData(store);
  }
  store.toggle();
}

export const Widget = observer((props: Props): JSX.Element => {
  const display = props.store.visible ? 'block' : 'none';

  return (
    <div>
      <div>
        <button onClick={() => onWidgetVisibleToggleClick(props.store)}>
          Show/hide
        </button>
        <span>Title - {props.store.title}</span>
      </div>
      <div style={{ display: display }}>
        <WidgetFactoryNs.WidgetFactory store={props.store} />
      </div>
    </div>
  );
});