import React from 'react';
import { Badge, Box, Tooltip } from '@wix/design-system';
import {
  LockLockedFilledSmall,
  FlagFilledSmall,
} from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';
import { Column } from '../../model';

export interface FieldIndicationsProps {
  column: Column;
}

function _FieldIndications({ column }: FieldIndicationsProps) {
  const { translate: t } = useWixPatternsContainer();
  const { isPii, isPrimary, isSystem, dataExtension } = column;
  const isDataExtension = !!dataExtension;
  const isNonEditableAppField =
    !isSystem && isDataExtension && !dataExtension?.editable;
  const isEditableAppField =
    !isSystem && isDataExtension && dataExtension?.editable;

  const hasAny = isPii || isPrimary || isSystem || isDataExtension;
  if (!hasAny) {
    return null;
  }

  return (
    <Box gap="SP1" verticalAlign="middle" inline>
      {isPii && (
        <Tooltip
          key="pii"
          content={t('cairo.table.custom-columns.indication.pii.tooltip')}
          appendTo="window"
        >
          <Box align="center" verticalAlign="middle" color="G10">
            <LockLockedFilledSmall />
          </Box>
        </Tooltip>
      )}
      {isPrimary && (
        <Tooltip
          key="primary"
          content={t('cairo.table.custom-columns.indication.primary.tooltip')}
          appendTo="window"
        >
          <Box align="center" verticalAlign="middle">
            <FlagFilledSmall />
          </Box>
        </Tooltip>
      )}
      {isSystem && (
        <Tooltip
          key="system"
          content={t('cairo.table.custom-columns.indication.system.tooltip')}
          appendTo="window"
        >
          <Badge
            size="tiny"
            skin="neutralLight"
            type="outlined"
            uppercase={false}
          >
            {t('cairo.table.custom-columns.indication.system')}
          </Badge>
        </Tooltip>
      )}
      {isNonEditableAppField && (
        <Tooltip
          key="app"
          content={t('cairo.table.custom-columns.indication.app.tooltip')}
          appendTo="window"
        >
          <Badge
            size="tiny"
            skin="neutralLight"
            type="outlined"
            uppercase={false}
          >
            {t('cairo.table.custom-columns.indication.app')}
          </Badge>
        </Tooltip>
      )}
      {isEditableAppField && (
        <Tooltip
          key="user"
          content={t('cairo.table.custom-columns.indication.user.tooltip')}
          appendTo="window"
        >
          <Badge
            size="tiny"
            skin="neutralLight"
            type="outlined"
            uppercase={false}
          >
            {t('cairo.table.custom-columns.indication.user')}
          </Badge>
        </Tooltip>
      )}
    </Box>
  );
}

export const FieldIndications = observer(_FieldIndications);