import React from 'react';
import styled, { css } from 'styled-components';

import { CaretDownIcon } from '@redocly/theme/icons/CaretDownIcon/CaretDownIcon';
import { CaretUpIcon } from '@redocly/theme/icons/CaretUpIcon/CaretUpIcon';
import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks';
import {
  BaseEntity,
  CatalogColumn,
} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';

export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
  column: CatalogColumn<T>;
  currentSortOption?: string | null;
  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
};

export const CatalogTableHeaderCell = <T extends BaseEntity>({
  column,
  currentSortOption,
  handleSortClick,
  isColumnSorted,
}: CatalogTableHeaderCellProps<T>) => {
  const { handleCellClick, sortKey, isUpActive, isDownActive } = useCatalogTableHeaderCellActions({
    column,
    currentSortOption,
    handleSortClick,
    isColumnSorted,
  });

  return (
    <TableHeaderCellWrapper
      key={column.key}
      data-component-name="Catalog/CatalogTableView/CatalogTableHeaderCell"
      onClick={handleCellClick}
      $sortable={Boolean(column.sortable && sortKey)}
    >
      <HeaderContent>
        <span>{column.title}</span>
        {column.sortable && sortKey && (
          <SortIndicator>
            <SortArrow $isActive={isUpActive}>
              <CaretUpIcon
                size="9px"
                color={
                  isUpActive
                    ? 'var(--catalog-table-header-sort-icon-color-active)'
                    : 'var(--catalog-table-header-sort-icon-color-inactive)'
                }
              />
            </SortArrow>
            <SortArrow $isActive={isDownActive}>
              <CaretDownIcon
                size="9px"
                color={
                  isDownActive
                    ? 'var(--catalog-table-header-sort-icon-color-active)'
                    : 'var(--catalog-table-header-sort-icon-color-inactive)'
                }
              />
            </SortArrow>
          </SortIndicator>
        )}
      </HeaderContent>
    </TableHeaderCellWrapper>
  );
};

const TableHeaderCellWrapper = styled.div<{ $sortable: boolean }>`
  padding: var(--catalog-table-header-cell-padding);
  border-bottom: 1px solid var(--catalog-table-border-color);
  ${(props) =>
    props.$sortable &&
    css`
      cursor: pointer;
      user-select: none;
    `}
`;

const HeaderContent = styled.div`
  display: flex;
  align-items: center;
  width: 100%;
`;

const SortIndicator = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  gap: 2px;
  color: var(--catalog-table-header-sort-indicator-color);
`;

const SortArrow = styled.div<{ $isActive: boolean }>`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 9px;
  border-radius: 2px;
  transition: background-color 0.2s ease;

  svg {
    display: block;
  }

  ${(props) =>
    props.$isActive &&
    css`
      background-color: var(--catalog-table-header-sort-arrow-bg-active);
    `}
`;