import { NoContent, Icon } from 'UI';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import React from 'react';
import { InishtIssue } from 'App/mstore/types/widget';
import FilterItem from 'App/mstore/types/filterItem';
import {
  FilterKey,
  IssueCategory,
  IssueType,
} from 'App/types/filter/filterType';
import { filtersMap } from 'Types/filter/newFilter';
import InsightItem from './InsightItem';
import { useTranslation } from 'react-i18next';

function InsightsCard({ data }: any) {
  const { dashboardStore } = useStore();
  const { drillDownFilter } = dashboardStore;
  const { t } = useTranslation();

  const clickHanddler = (
    e: React.MouseEvent<HTMLDivElement>,
    item: InishtIssue,
  ) => {
    let filter: any = {};
    switch (item.category) {
      case IssueCategory.RESOURCES:
        filter = {
          ...filtersMap[
            item.name === IssueType.MEMORY
              ? FilterKey.AVG_MEMORY_USAGE
              : FilterKey.AVG_CPU_LOAD
          ],
        };
        filter.source = [item.oldValue];
        filter.value = [];
        break;
      case IssueCategory.RAGE:
        filter = { ...filtersMap[FilterKey.CLICK] };
        filter.value = [item.name];
        break;
      case IssueCategory.NETWORK:
        filter = { ...filtersMap[FilterKey.FETCH] };
        filter.value = [];
        filter.filters.forEach((f: any) => {
          f.value = [];
          if (f.key === FilterKey.FETCH_URL) {
            f.value = [item.name];
          }

          if (f.key === FilterKey.FETCH_DURATION) {
            f.operator = '>=';
            f.value = [item.oldValue];
          }
        });
        break;
      case IssueCategory.ERRORS:
        filter = { ...filtersMap[FilterKey.ERROR] };
        filter.value = [item.name];
        break;
    }

    filter = new FilterItem(filter);
    drillDownFilter.merge({
      filters: [filter.toJson()],
    });
  };

  return (
    <NoContent
      style={{ minHeight: 220 }}
      title={
        <div className="flex items-center text-lg">
          <Icon name="info-circle" className="mr-2" size="14" />
          {t('No data available for the selected period.')}
        </div>
      }
      show={data.issues && data.issues.length === 0}
    >
      <div className="overflow-y-auto" style={{ maxHeight: '240px' }}>
        {data.issues &&
          data.issues.map((item: any) => (
            <InsightItem
              key={item.name}
              item={item}
              onClick={(e) => clickHanddler(e, item)}
            />
          ))}
      </div>
    </NoContent>
  );
}

export default observer(InsightsCard);
