import React, { useState } from 'react';
import { Button } from 'antd';

export const useGetCards = (
  eventsList: any,
  translations: {
    moreInfo: string;
    hideInfo: string;
  },
): any => {
  const [currentRow, setCurrentRow] = useState<string[]>([]);

  const handleSetExpandable = (
    e: React.MouseEvent<HTMLElement>,
    text: string,
  ): void => {
    e.stopPropagation();

    if (currentRow.includes(text)) {
      const index = currentRow?.indexOf(text);
      setCurrentRow(() => [
        ...currentRow.slice(0, index),
        ...currentRow.slice(index + 1),
      ]);
    } else {
      setCurrentRow([...currentRow, text]);
    }
  };

  return eventsList.map((card: any) => {
    const isMoreInfo = currentRow?.includes(card.event_src_msg);
    return {
      ...card,
      event_src_msg: (
        <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
          <div
            style={
              !isMoreInfo
                ? {
                    width: '100%',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    overflow: 'hidden',
                  }
                : { maxWidth: '90%' }
            }
          >
            {card.event_src_msg}
          </div>
          <Button
            type="link"
            onClick={(e) => {
              handleSetExpandable(e, card.event_src_msg);
            }}
            style={{ padding: 0 }}
          >
            {!isMoreInfo ? translations.moreInfo : translations.hideInfo}
          </Button>
        </div>
      ),
    };
  });
};
