import { size, theme } from '@planview/pv-utilities'
import React from 'react'
import styled, { css } from 'styled-components'
import { useGridContext, useGridSelector } from '../../../context/grid-context'
import { GridColumnMoveHandle } from '../../../layout'
import { GridHeaderGroupCellDefaultRenderer } from '../../../renderers'
import { GridHeaderCellExpand } from '../../grid-header-cell-expand'
import { useColumnBorders } from '../../../hooks/use-column-borders'

const Wrap = styled.div<{
    $leftBorder?: boolean
    $rightBorder?: boolean
    $bottomBorder?: boolean
}>`
    ${(props) =>
        props.$leftBorder
            ? `border-left: 1px solid ${theme.borderLight}`
            : null};
    ${(props) =>
        props.$rightBorder
            ? css`
                  border-right: 1px solid ${theme.borderLight};
              `
            : null};
    ${(props) =>
        props.$bottomBorder
            ? `border-bottom: 1px solid ${theme.borderLight}`
            : null};

    overflow: hidden;
    box-sizing: border-box;
    position: relative;
`

const InnerWrap = styled.div`
    display: flex;
`

export const GridHeaderCellOverlay = ({
    columnId,
    height = size.small,
    spacer = false,
    isDragging = false,
    last = false,
}: {
    columnId: string
    height?: number
    spacer?: boolean
    isDragging?: boolean
    last?: boolean
}) => {
    const { selectors } = useGridContext()
    const { actualWidth, data: column } = useGridSelector((state) =>
        selectors.selectColumn(state, columnId)
    )
    const { showLeftBorder, showRightBorder } = useColumnBorders(
        columnId,
        'header'
    )
    const CellHeaderComponent = column.header?.Renderer

    return (
        <Wrap
            style={{
                width: actualWidth,
                height,
                paddingTop: height - size.small,
            }}
            $leftBorder={showLeftBorder}
            $rightBorder={showRightBorder && !last}
        >
            {spacer ? null : CellHeaderComponent ? (
                <>
                    {isDragging && (
                        <GridColumnMoveHandle horizontal $resizable />
                    )}
                    <InnerWrap>
                        {!!column.tree && (
                            <GridHeaderCellExpand
                                tabIndex={-1}
                                collapseOnly={column.header?.treeCollapseOnly}
                            />
                        )}
                        <CellHeaderComponent
                            tabIndex={-1}
                            columnId={columnId}
                        />
                    </InnerWrap>
                </>
            ) : (
                column.label
            )}
        </Wrap>
    )
}

export const GridHeaderGroupCellOverlay = ({
    columnId,
    height = size.small,
    spacer = false,
    isDragging = false,
    last = false,
}: {
    columnId: string
    height?: number
    spacer?: boolean
    isDragging?: boolean
    last?: boolean
}) => {
    const { selectors } = useGridContext()
    const { actualWidth } = useGridSelector((state) =>
        selectors.selectColumn(state, columnId)
    )

    return (
        <Wrap
            style={{
                width: actualWidth,
                height,
                paddingTop: height - size.small,
            }}
            $rightBorder={!last}
            $bottomBorder={!spacer}
        >
            {spacer ? null : (
                <>
                    {isDragging && (
                        <GridColumnMoveHandle horizontal $resizable />
                    )}
                    <GridHeaderGroupCellDefaultRenderer
                        tabIndex={-1}
                        columnId={columnId}
                    />
                </>
            )}
        </Wrap>
    )
}