import { Button } from '@wix/design-system';
import React, { useEffect } from 'react';
import { ToolbarCollectionState } from '../../state';
import { FiltersMap, withoutDefaults } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import { AdjustSmall, TableChartSmall } from '@wix/wix-ui-icons-common/lazy';
import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
import { CustomColumnsPanelEntry } from './CustomColumnsPanelEntry';
import type { CustomColumnsDragAndDrop } from '../CustomColumns/CustomColumnsDragAndDrop';
import type { Column } from '../../model';
import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
import { useSchemaContext } from '../../providers/SchemaContext';

export interface CustomColumnsCTAButtonProps<T, F extends FiltersMap> {
  state: ToolbarCollectionState<T, F>;
  onColumnClick?: (column: Column, checked: boolean) => unknown;
  dragAndDrop?: typeof CustomColumnsDragAndDrop;
}

export function _CustomColumnsCTAButton<T, F extends FiltersMap>({
  state,
  onColumnClick,
  dragAndDrop,
}: CustomColumnsCTAButtonProps<T, F>) {
  const {
    container: { translate: t, experiments },
    toolbar: { responsive },
  } = state;

  const analyticsButtonDiscoverability = experiments?.get(
    'specs.analytics.CustomColumnsWithLabelAndNewIcon',
  );
  const isBmHarmonyTheme = useBmHarmonyTheme();

  useEffect(() => {
    CustomColumnsPanelEntry.CustomColumnsDragAndDrop = dragAndDrop;
    state.panels.registerSidePanel('customColumns', CustomColumnsPanelEntry);
  }, []);

  useEffect(() => {
    if (state.customColumnsState) {
      state.customColumnsState.onColumnClick = onColumnClick;
    }
  }, [onColumnClick, state.customColumnsStateInitialized]);

  const schemaCtx = useSchemaContext();
  const isSchema = !!schemaCtx?.schema;
  const isEditable = !!state.collectionFieldsSource || isSchema;
  const text = t(
    isEditable
      ? 'cairo.table.manage-fields.button.cta'
      : 'cairo.table.custom-columns.button.cta',
  );
  const props = {
    size: 'small' as const,
    priority: isBmHarmonyTheme ? ('tertiary' as const) : ('secondary' as const),
    dataHook: 'custom-columns-button',
    onClick: () => {
      const isOpened = state.panels.toggleSidePanel('customColumns');

      state.reportBi(
        withoutDefaults(cairoFiltersPanelUsed)({
          isOpened,
          feature: 'Custom Columns',
          origin: 'Custom Columns CTA',
        }),
      );
    },
  };

  const getButton = () => {
    if (
      analyticsButtonDiscoverability === 'b' ||
      analyticsButtonDiscoverability === 'c'
    ) {
      return (
        <Button
          {...props}
          prefixIcon={
            analyticsButtonDiscoverability === 'b' ? (
              <AdjustSmall />
            ) : (
              <TableChartSmall />
            )
          }
        >
          {text}
        </Button>
      );
    }

    return (
      <ResponsiveButton
        state={responsive.actions}
        icon={<AdjustSmall />}
        {...props}
      >
        {text}
      </ResponsiveButton>
    );
  };

  return getButton();
}

export const CustomColumnsCTAButton = observer(_CustomColumnsCTAButton);