import { Tooltip, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
import classNames from 'classnames';
import type { HTMLAttributes } from 'react';
import { BORDER_COLOR, GRADIENT } from './constants';

type TableColumnDefinition = {
  displayName?: string;
  name: string;
  tooltip?: string;
  className?: string;
};

type TableProps = {
  columns: TableColumnDefinition[];
  data: Record<TableColumnDefinition['name'] | 'className', React.ReactNode>[];
  noHeader?: boolean;
  noCollapse?: boolean;
};

const INNER_BORDER_STYLE = `border-b ${BORDER_COLOR}`;

export const Table = ({
  columns,
  data,
  noHeader = false,
  noCollapse = false,
  className,
  ...props
}: TableProps & HTMLAttributes<HTMLTableElement>) => {
  const header = (
    <thead className={classNames({ 'max-md:hidden': !noCollapse })}>
      <tr>
        {columns.map(({ displayName, name, tooltip }) => (
          <th
            key={name}
            col-id={name}
            className={classNames(
              'px-5 py-3 text-sm  text-vega-clight-100 dark:text-vega-cdark-100',
              INNER_BORDER_STYLE
            )}
          >
            <span className="flex flex-row gap-2 items-center">
              <span>{displayName}</span>
              {tooltip ? (
                <Tooltip description={tooltip}>
                  <button className="text-vega-clight-400 dark:text-vega-cdark-400 no-underline decoration-transparent w-[12px] h-[12px] inline-flex">
                    <VegaIcon size={12} name={VegaIconNames.INFO} />
                  </button>
                </Tooltip>
              ) : null}
            </span>
          </th>
        ))}
      </tr>
    </thead>
  );
  return (
    <table
      className={classNames(
        'w-full',
        'border-separate border rounded-md border-spacing-0',
        BORDER_COLOR,
        GRADIENT,
        className
      )}
      {...props}
    >
      {!noHeader && header}
      <tbody>
        {data.map((d, i) => (
          <tr
            key={i}
            className={classNames(d['className'] as string, {
              'max-md:flex flex-col w-full': !noCollapse,
            })}
          >
            {columns.map(({ name, displayName, className }, j) => (
              <td
                className={classNames(
                  'px-5 py-3 text-base',
                  {
                    'max-md:flex max-md:flex-col max-md:justify-between':
                      !noCollapse,
                  },
                  INNER_BORDER_STYLE,
                  {
                    'border-none': i === data.length - 1 && noCollapse,
                    'md:border-none': i === data.length - 1,
                    'max-md:border-none':
                      i === data.length - 1 && j === columns.length - 1,
                  },
                  className
                )}
                key={`${i}-${name}`}
              >
                {/** display column name in mobile view */}
                {!noCollapse &&
                  !noHeader &&
                  displayName &&
                  displayName.length > 0 && (
                    <span
                      aria-hidden
                      className="md:hidden  font-mono text-xs px-0 text-vega-clight-100 dark:text-vega-cdark-100"
                    >
                      {displayName}
                    </span>
                  )}
                <span>{d[name]}</span>
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};