import { DragIndicator } from '@planview/pv-uikit'
import { theme, cursor, sizePx, states } from '@planview/pv-utilities'
import styled, { css } from 'styled-components'
export const GridHead = styled.thead<{ $hidden?: boolean }>`
    ${(props) =>
        props.$hidden
            ? css`
                  clip: rect(0 0 0 0);
                  clip-path: inset(50%);
                  height: 1px;
                  overflow: hidden;
                  position: absolute;
                  white-space: nowrap;
                  width: 1px;
                  top: 0;
                  left: 0;
              `
            : css`
                  position: sticky;
                  top: 0;
                  left: 0;
                  z-index: 10;

                  &::before {
                      content: '';
                      position: absolute;
                      inset: 0 0 auto;
                      transform: translateY(-100%);
                      height: var(--grid-scroll-head, 0);
                      background: ${theme.backgroundNeutral0};
                  }
              `}
`

export const GridHeaderRowLayout = styled.tr<{ $focusVisible: boolean }>`
    height: ${sizePx.small};
    display: flex;
    position: relative;
    flex-direction: row;
    width: 100%;
    background-color: ${theme.backgroundNeutral0};

    &:last-child {
        border-bottom: solid 1px ${theme.borderLight};
    }

    &:focus-visible {
        outline: none;
    }

    ${(props) =>
        props.$focusVisible
            ? css`
                  --grid-header-border-color: ${theme.borderActive};

                  &::after {
                      border: 2px solid var(--grid-header-border-color);
                      content: '';
                      width: 100%;
                      height: 100%;
                      position: absolute;
                      box-sizing: border-box;
                      pointer-events: none;
                  }
              `
            : null}
`

export const GridHeaderCellLayout = styled.th<{
    $sortable?: boolean
    $movable?: boolean
    $hovering?: boolean
    $resizing?: boolean
    $highlight?: boolean
    $sticky?: boolean
    $leftBorder?: boolean
    $rightBorder?: boolean
    $placeholder?: boolean
}>`
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    user-select: none;
    outline: none;

    ${(props) =>
        props.$rightBorder && !props.$placeholder
            ? `border-right: 1px solid ${theme.borderLight}`
            : null};

    ${(props) =>
        props.$leftBorder && !props.$placeholder
            ? `border-left: 1px solid ${theme.borderLight}`
            : null};

    ${(props) =>
        props.$sticky &&
        css`
            position: sticky;
            top: 0;
            z-index: 7;

            &::after {
                border-top: 2px solid var(--grid-header-border-color);
                border-bottom: 2px solid var(--grid-header-border-color);
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                box-sizing: border-box;
                pointer-events: none;
            }

            &:first-child {
                &::after {
                    border-left: 2px solid var(--grid-header-border-color);
                }
            }
        `}
    ${(props) =>
        props.$resizing
            ? css`
                  z-index: 10;
              `
            : null}
    ${(props) =>
        props.$sortable
            ? cursor.pointer
            : props.$movable
              ? cursor.grab
              : cursor.initial};

    ${(props) =>
        ((props.$sortable || props.$movable) && props.$hovering) ||
        props.$highlight
            ? css`
                  ${states.hover}
              `
            : css`
                  background-color: ${theme.backgroundNeutral0};
              `}
`

export const GridHeaderGroupCellLayout = styled(GridHeaderCellLayout)`
    border-bottom: solid 1px
        ${(props) => (props.$placeholder ? 'transparent' : theme.borderLight)};
`

export const GridColumnMoveHandle = styled(DragIndicator)<{
    $resizable: boolean
}>`
    position: absolute;
    top: 0;
    left: 0;
    right: ${(props) => (props.$resizable ? '4px' : '0')};
`

export const GridColumnResizeHandle = styled.div<{ $resizing: boolean }>`
    width: 4px;
    position: absolute;
    background-color: ${theme.gray200};
    top: 0;
    right: 0;
    bottom: 0;
    ${cursor.columnResize};

    &:hover {
        background-color: ${theme.primary500};
    }

    &::before {
        content: '';
        display: none;
        width: ${sizePx.small};
        background: transparent;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    /* This adds a larger hit area while dragging to prevent
       adjacent columns from flickering while dragging */
    ${(props) =>
        props.$resizing &&
        css`
            &::before {
                display: block;
            }
        `}
`