import React, { useCallback } from 'react';
import { useMarketList } from '@vegaprotocol/market-list';
import { t } from '@vegaprotocol/i18n';
import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
import { Link as UILink, TinyScroll } from '@vegaprotocol/ui-toolkit';
import type { OnCellClickHandler } from '../select-market';
import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/market-list';
import {
  ColumnKind,
  columns,
  SelectMarketTableHeader,
  SelectMarketTableRow,
} from '../select-market';
import { WelcomeDialogHeader } from './welcome-dialog-header';
import { Link } from 'react-router-dom';
import { ProposedMarkets } from './proposed-markets';
import { Links, Routes } from '../../pages/client-router';
import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';

export const SelectMarketLandingTable = ({
  markets,
  onClose,
}: {
  markets: MarketMaybeWithDataAndCandles[] | null;
  onClose: () => void;
}) => {
  const onSelect = useMarketClickHandler();
  const onSelectMarket = useCallback(
    (id: string, metaKey?: boolean) => {
      onSelect(id, metaKey);
      if (!metaKey) {
        onClose();
      }
    },
    [onSelect, onClose]
  );
  const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
  const onCellClick = useCallback<OnCellClickHandler>(
    (e, kind, value) => {
      if (value && kind === ColumnKind.Asset) {
        openAssetDetailsDialog(value, e.target as HTMLElement);
      }
    },
    [openAssetDetailsDialog]
  );
  const showProposed = (markets?.length || 0) <= 5;
  return (
    <>
      <TinyScroll
        className="max-h-[60vh] overflow-x-auto -mr-4 pr-4"
        data-testid="select-market-list"
      >
        <p className="text-neutral-500 dark:text-neutral-400 mb-4">
          {t('Select a market to get started...')}
        </p>
        <table className="text-sm relative h-full min-w-full whitespace-nowrap">
          <thead className="sticky top-0 z-10 bg-white dark:bg-black">
            <SelectMarketTableHeader />
          </thead>
          <tbody>
            {markets?.map((market, i) => (
              <SelectMarketTableRow
                marketId={market.id}
                key={i}
                detailed={false}
                onSelect={onSelectMarket}
                columns={columns(market, onSelectMarket, onCellClick)}
              />
            ))}
          </tbody>
        </table>
      </TinyScroll>
      <div className="mt-4 text-md">
        <Link
          to={Links[Routes.MARKETS]()}
          data-testid="view-market-list-link"
          onClick={() => onClose()}
        >
          <UILink className="text-sm underline">
            {'Or view full market list'}
          </UILink>
        </Link>
      </div>
      {showProposed && <ProposedMarkets />}
    </>
  );
};

interface LandingDialogContainerProps {
  onClose: () => void;
}

export const WelcomeLandingDialog = ({
  onClose,
}: LandingDialogContainerProps) => {
  const { data, loading, error } = useMarketList();
  if (error) {
    return (
      <div className="flex justify-center items-center">
        <p className="my-8">{t('Failed to load markets')}</p>
      </div>
    );
  }

  if (loading) {
    return (
      <div className="flex justify-center items-center">
        <p className="my-8">{t('Loading...')}</p>
      </div>
    );
  }

  return (
    <>
      <WelcomeDialogHeader />
      <SelectMarketLandingTable markets={data} onClose={onClose} />
    </>
  );
};