import { action } from '@storybook/addon-actions';
import { ASSETS_URL } from '../../../../consts/common';
import { TextWithBG } from '../../../text-with-bg';
import { _palette } from '../../../@styles/theme-provider';

import type {
  RenderButtonCellProps,
  RenderLinkCellProps,
  RenderSwitchCellProps,
  RenderTextGroupCellProps
} from '../column-types';
import type { CardGridActionIcon, CardGridProps, CardGridColDef, CardGridRowDef } from '../types';

const actionIntegrateHandler = action('integrate button clicked');

const generateActionButtons = (onClick: CardGridActionIcon['onClick']) =>
  [
    {
      icon: { src: `${ASSETS_URL}/icons2/icon_trash.svg` },
      value: 'delete',
      onClick,
      title: 'Delete'
    },
    {
      icon: { src: `${ASSETS_URL}/icons2/icon_edit.svg` },
      value: 'edit',
      onClick,
      title: 'Edit'
    }
  ] as CardGridColDef['actions'];

interface IntegrationsCardsRowDef extends CardGridRowDef {
  _data: {
    enabled?: boolean; // is integration enabled?
  };
  integrationName: RenderTextGroupCellProps['cell'];
  events: RenderLinkCellProps['cell'];
  status: RenderSwitchCellProps['cell'];
  integrate: RenderButtonCellProps['cell']; // hidden if enabled === true
}

const integrateButtonProps: IntegrationsCardsRowDef['integrate'] = {
  children: 'Integrate',
  onClick: actionIntegrateHandler
};

export const mockIntegrationsCards = ({
  onActionClick
}: {
  onActionClick?: CardGridActionIcon['onClick'];
}) =>
  ({
    cols: [
      {
        field: 'integrationName',
        headerName: 'Integration Name',
        type: 'textGroup',
        maxWidth: 'none'
      },
      {
        field: 'events',
        headerName: 'Events',
        description: 'Integration Events',
        type: 'link',
        align: 'center',
        width: 96,
        hideDivider: true
      },
      {
        field: 'status',
        headerName: 'Status',
        description: 'Integration Status',
        type: 'switch'
      },
      {
        field: 'integrate',
        headerName: '',
        type: 'button',
        align: 'end',
        width: 'auto',
        hideColumn: true,
        hideDivider: true
      },
      {
        field: 'actionButtons',
        type: 'actionButtons',
        actions: generateActionButtons(onActionClick)
      }
    ],
    rows: [
      {
        id: 'SPLUNK',
        integrationName: {
          title: 'Splunk',
          afterTitle: <TextWithBG severity="success">Healthy</TextWithBG>,
          subtitle: 'Forward Perimeter 81 events to your Splunk instance.',
          avatarProps: {
            src: `${ASSETS_URL}/images/providers/icon_splunk.svg`
          }
        },
        events: {
          children: 'View Events',
          href: '#integrations/splunk'
        },
        status: {
          checked: true
        },
        integrate: integrateButtonProps,
        _data: {
          enabled: true
        }
      },
      {
        id: 'AZURE_SENTINEL',
        integrationName: {
          title: 'Microsoft Sentinel',
          afterTitle: (
            <TextWithBG
              severity="warning"
              tooltipText="We've detected batch forwarding failures in the last 24 hours."
            >
              Degraded
            </TextWithBG>
          ),

          subtitle: 'Forward Perimeter 81 events to Microsoft Sentinel.',
          avatarProps: {
            src: `${ASSETS_URL}/images/providers/icon_azureSentinel.svg`
          }
        },
        events: {
          children: 'View Events',
          href: '#integrations/azureSentinel'
        },
        status: {
          checked: true
        },
        integrate: integrateButtonProps,
        _data: {
          enabled: true
        }
      },
      {
        id: 'AMAZON_S3',
        integrationName: {
          title: 'Amazon S3',
          afterTitle: <TextWithBG severity="error">Tag</TextWithBG>,
          subtitle: 'Forward Perimeter 81 event batches to Amazon S3.',
          avatarProps: {
            src: `${ASSETS_URL}/images/providers/icon_amazonS3.svg`
          }
        },
        events: {
          children: 'View Batches',
          href: '#integrations/amazonS3'
        },
        status: {
          checked: false
        },
        integrate: integrateButtonProps,
        _data: {
          enabled: true
        }
      },
      {
        id: 'CONNECT_WISE',
        integrationName: {
          title: 'Connectwise PSA',
          subtitle: 'Forward Perimeter 81 event batches to Connectwise PSA.',
          avatarProps: {
            src: `${ASSETS_URL}/images/providers/icon_connectwisePSA.svg`
          }
        },
        integrate: integrateButtonProps,
        _data: {
          enabled: false
        },
        _props: {
          // for demo purposes
          disabled: true,
          disableInteractive: true,
          indicator: true
        }
      }
    ] as IntegrationsCardsRowDef[],
    // example of implementation
    getCardGridRowProps: props => {
      const { cols = [], row, rowIndex } = props;
      const { enabled } = (row._data as IntegrationsCardsRowDef['_data']) || {};
      // toggle hidden columns
      let newCols = cols.map(colDef =>
        typeof colDef.hideColumn !== 'undefined'
          ? { ...colDef, hideColumn: enabled }
          : { ...colDef }
      );
      if (!enabled) {
        newCols = newCols.filter(
          (colDef, index) => index === 0 || typeof colDef.hideColumn !== 'undefined'
        );
      }
      return { cols: newCols, row, rowIndex };
    }
  } as CardGridProps);