import { theme, sizePx, size } from '@planview/pv-utilities'
import styled, { css } from 'styled-components'
export const GridFooter = styled.tfoot`
    display: contents;
`

export const GridFooterRowLayout = styled.tr<{
    $compact: boolean
    $focusVisible: boolean
}>`
    --grid-footer-border-top-color: ${theme.borderLight};
    --grid-footer-border-bottom-color: ${(props) =>
        props.$compact ? 'transparent' : theme.borderLight};
    --grid-footer-border-active-color: 'transparent';
    height: ${(props) => (props.$compact ? sizePx.small : sizePx.medium)};
    border-top: solid 1px var(--grid-footer-border-top-color);
    border-bottom: solid 1px var(--grid-footer-border-bottom-color);
    display: flex;
    flex-direction: row;
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: ${theme.backgroundNeutral0};

    &::after {
        position: absolute;
        top: ${(props) => (props.$compact ? size.small : size.medium) - 1}px;
        left: 0;
        content: '';
        width: 100%;
        height: var(--grid-scroll-tail, 0);
        background-color: ${theme.backgroundNeutral0};
    }

    &:focus-visible {
        outline: none;
    }

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

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

export const GridFooterCellLayout = styled.td<{
    $sticky?: boolean
    $leftBorder?: boolean
    $rightBorder?: boolean
}>`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    outline: none;
    isolation: isolate;
    box-sizing: border-box;
    background-color: ${theme.backgroundNeutral0};

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

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

    ${(props) =>
        props.$sticky &&
        css`
            position: sticky;
            top: 0;
            z-index: 7;
            border-bottom: solid 1px var(--grid-footer-border-color);

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

            &:first-child {
                &::after {
                    border-left: 2px solid
                        var(--grid-footer-border-active-color);
                }
            }
        `}
`