import * as React from 'react';
import { observer } from 'mobx-react-lite';
import { FiltersMap, KeyedItem } from '@wix/bex-core';
import { Box, Text, ClickableCard } from '@wix/design-system';
import { KanbanBaseProps } from './KanbanProps';
import { ItemActionsState } from '../../state';
import { CardActions } from './CardActions';
import { KanbanState } from '../../state/KanbanState';
import { KanbanCardTags } from './KanbanCardTags';

export interface KanbanCardProps<T, S, F extends FiltersMap> {
  keyedItem: KeyedItem<T>;
  stageKey: string;
  originalItem: T;
  itemIndex: number;
  item: {
    key: string;
    title?: string | React.ReactNode;
    subtitle?: React.ReactNode;
    additionalInfo?: React.ReactNode;
    badge?: React.ReactNode;
  };
  actionCell?: KanbanBaseProps<T, S, F>['actionCell'];
  itemActionsState: ItemActionsState<T, F>;
  dataExtension?: KanbanBaseProps<T, S, F>['dataExtension'];
  tags?: KanbanBaseProps<T, S, F>['tags'];
  isDragging?: boolean;
  state: KanbanState<T, S, F>;
}

function _CardComponent<T, S, F extends FiltersMap>({
  originalItem,
  itemIndex,
  item,
  stageKey,
  actionCell,
  itemActionsState,
  isDragging,
  state,
  tags,
}: KanbanCardProps<T, S, F>) {
  const { title, subtitle, additionalInfo, badge } = item;

  return (
    <div
      data-hook={`kanban-card-container-${stageKey}-${item.key}`}
      style={{
        marginRight: '12px',
        marginLeft: '12px',
        overflow: 'visible',
        width: '246px',
        opacity: isDragging ? 0.8 : 1,
      }}
    >
      <ClickableCard hasPadding={false} skin="shadow">
        <Box
          padding="12px"
          dataHook={`kanban-card-${stageKey}-${item.key}`}
          direction="vertical"
        >
          <Box marginBottom="3px">{badge}</Box>
          {typeof title === 'string' ? (
            <Box paddingBottom="3px">
              <Text
                dataHook={`kanban-card-title-${stageKey}-${item.key}`}
                size="small"
                weight="normal"
                ellipsis={true}
                maxLines={2}
              >
                {title}
              </Text>
            </Box>
          ) : (
            <Box
              zIndex={51}
              paddingBottom="3px"
              dataHook={`kanban-card-title-${stageKey}-${item.key}`}
            >
              {title}
            </Box>
          )}

          <Box direction="vertical" gap="1px">
            {tags && (
              <KanbanCardTags
                item={originalItem}
                dataHook={`kanban-card-tags-${stageKey}-${item.key}`}
              />
            )}
            <Box>{subtitle}</Box>
            <Box>{additionalInfo}</Box>
          </Box>
          <Box align="right" paddingTop="6px">
            <CardActions
              actionCell={actionCell}
              originalItem={originalItem}
              itemIndex={itemIndex}
              itemActionsState={itemActionsState}
              stageKey={stageKey}
              item={item}
              state={state}
            />
          </Box>
        </Box>
      </ClickableCard>
    </div>
  );
}

export const CardComponent = observer(_CardComponent);