import { jsx as _jsx } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { tableRowHeight, } from './TableUtils';
import { Icon } from '../icon/Icon.component';
import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
import { spacing } from '../../spacing';
const borderSize = '4px';
export const SortIncentive = styled.span `
  position: absolute;
  display: none;
`;
export const SortCaretWrapper = styled.span `
  padding-left: ${spacing.r4};
  position: absolute;
`;
export const TableHeader = styled.div `
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: ${(props) => props.headerHeight};
  cursor: ${(props) => props.tabIndex !== undefined && props.tabIndex >= 0
    ? 'pointer'
    : 'default'};
  &:hover {
    ${SortIncentive} {
      display: block;
    }
  }
  &:focus-visible {
    ${FocusVisibleStyle}
  }
`;
export const HeadRow = styled.div `
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: ${spacing.r16};
  height: 2.286rem;
  width: ${(props) => props.hasScrollBar
    ? `calc(100% - ${props.scrollBarWidth}px - ${borderSize} )!important` // -4px for border
    : `calc(100% - ${borderSize} ) !important`};
  height: ${(props) => tableRowHeight[props.rowHeight]}rem;
  table-layout: fixed;
  color: ${(props) => props.theme.textPrimary};
  font-weight: bold;
  overflow: hidden;
  border-bottom: 1px solid
    ${(props) => props.theme[props.separationLineVariant]};
  padding-right: ${borderSize};
  padding-left: ${spacing.r16};
`;
export const TableRow = styled.div `
  color: ${(props) => props.theme.textPrimary};
  gap: ${spacing.r16};
  border-bottom: 1px solid
    ${(props) => props.theme[props.separationLineVariant]};
  cursor: default;
  box-sizing: border-box;
  padding-left: ${spacing.r16};
  padding-right: ${borderSize};

  // single selectable case
  ${(props) => {
    if (props.selectedId) {
        return css `
        &:hover,
        &:focus {
          background-color: ${(props) => props.theme.highlight};
          outline: none;
          cursor: pointer;
        }
        &:focus-visible {
          ${FocusVisibleStyle}
        }
      `;
    }
}}

  ${(props) => {
    if (props.selectedId && props.isSelected) {
        return css `
        background-color: ${props.theme.highlight};
        border-right: ${borderSize} solid ${props.theme.selectedActive};
      `;
    }
}}
`;
export const TableRowMultiSelectable = styled.div `
  color: ${(props) => props.theme.textPrimary};
  border-bottom: 1px solid
    ${(props) => props.theme[props.separationLineVariant]};
  box-sizing: border-box;
  ${(props) => {
    if (props.isSelected) {
        return css `
        background-color: ${(props) => props.theme.highlight};
        border-right: ${borderSize} solid ${props.theme.selectedActive};
      `;
    }
}}
  padding-right: ${borderSize};
  padding-left: ${spacing.r16};
  &:hover,
  &:focus {
    background-color: ${(props) => props.theme.highlight};
    outline: none;
    cursor: pointer;
  }
`;
export const TableBody = styled.div `
  box-sizing: border-box;
  display: block;
  flex-grow: 1;
  height: 100%;
`;
export const TableWrapper = styled.div `
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
`;
export const TooltipContent = styled.div `
  color: ${(props) => props.theme.textSecondary};
  font-weight: bold;
  min-width: 60px;
`;
export const SortCaret = ({ column, }) => {
    return !column.disableSortBy ? (_jsx(SortCaretWrapper, { children: column.isSorted ? (column.isSortedDesc ? (_jsx(Icon, { name: "Sort-down" })) : (_jsx(Icon, { name: "Sort-up" }))) : (_jsx(SortIncentive, { children: _jsx(Icon, { name: "Sort" }) })) })) : null;
};
