import { RefObject, useLayoutEffect, useMemo, useRef } from "react";
import { store as blockEditorStore } from "@wordpress/block-editor";
import { useDispatch, useSelect } from "@wordpress/data";

import { buildStackRows } from "../../responsive-stack";
import { buildOccupancy, GridRow } from "./grid-model";

/**
 * The tablet/mobile "stack" mode, previewed on the real block tree.
 *
 * The frontend stacks a table by moving its cells into new rows (see
 * frontend/responsive.ts). The editor cannot do that: React and the block
 * editor own those elements. So the table becomes a CSS grid instead, its
 * rows step aside (`display: contents`) and each cell is placed where the
 * frontend would put it. The cells stay the real blocks, so they can still
 * be selected and edited, the way the core Columns block stacks.
 */

export interface StackSettings {
    stackCount: number;
    transpose: boolean;
    repeatFirstCol: boolean;
}

export interface StackLayoutItem {
    id: string;
    /** 1-based grid row. */
    row: number;
    /** 1-based grid column. */
    col: number;
    /** Index among the repeated copies, for those only. */
    repeatIndex?: number;
}

export interface StackLayout {
    columns: number;
    rows: number;
    items: StackLayoutItem[];
}

export function useStackLayout(
    clientId: string,
    settings: StackSettings | null
): StackLayout | null {
    const enabled = !!settings;

    // The cells' grid positions as a string, so the selector's result stays
    // the same until the table's structure changes.
    const matrixKey = useSelect(
        select => {
            if (!enabled) {
                return "";
            }

            const be = select(blockEditorStore) as any;
            const rows: GridRow[] = (be.getBlock(clientId)?.innerBlocks ?? [])
                .filter((block: any) => block.name === "tableberg/row")
                .map((rowBlock: any) =>
                    rowBlock.innerBlocks
                        .filter((block: any) => block.name === "tableberg/cell")
                        .map((cellBlock: any) => ({
                            id: cellBlock.clientId,
                            rowSpan: cellBlock.attributes?.span?.rowSpan ?? 1,
                            colSpan: cellBlock.attributes?.span?.colSpan ?? 1,
                        }))
                );
            const occupancy = buildOccupancy(rows);
            // Each cell at the column it starts at, like the frontend's
            // `data-cell-col`, with nothing where a span covers.
            const matrix: Array<Array<string | null>> = rows.map(() =>
                Array.from({ length: occupancy.cols }, () => null)
            );
            occupancy.anchors.forEach(({ row, col }, id) => {
                matrix[row][col] = id;
            });

            return JSON.stringify(matrix);
        },
        [clientId, enabled]
    );

    const stackCount = settings?.stackCount ?? 1;
    const transpose = settings?.transpose ?? false;
    const repeatFirstCol = settings?.repeatFirstCol ?? false;

    return useMemo(() => {
        if (!matrixKey) {
            return null;
        }

        const stackRows = buildStackRows<string>(
            JSON.parse(matrixKey),
            stackCount,
            transpose,
            repeatFirstCol
        );

        let repeatIndex = 0;
        const items: StackLayoutItem[] = [];
        stackRows.forEach((stackRow, rowIndex) => {
            stackRow.forEach(({ cell, repeat }, colIndex) => {
                items.push({
                    id: cell,
                    row: rowIndex + 1,
                    col: colIndex + 1,
                    ...(repeat ? { repeatIndex: repeatIndex++ } : {}),
                });
            });
        });

        return {
            columns: stackRows.reduce(
                (max, stackRow) => Math.max(max, stackRow.length),
                0
            ),
            rows: stackRows.length,
            items,
        };
    }, [matrixKey, stackCount, transpose, repeatFirstCol]);
}

const repeatSelector = (index: number) =>
    `[data-tableberg-stack-repeat="${index}"]`;

/**
 * The grid itself: what does not depend on how the cells look.
 *
 * @param spacing The table's cell spacing, when it has any. A grid has no
 *                `border-spacing`, so its gaps and padding stand in for it.
 */
export function getStackLayoutCss(
    tableClientId: string,
    layout: StackLayout,
    spacing: { horizontal: string; vertical: string } | null
): string {
    const table = `#block-${tableClientId} .tableberg-table`;
    const groups = `${table} > tbody, ${table} > tfoot`;
    const rows = `${table} > tbody > tr, ${table} > tfoot > tr`;
    const cells = `${table} > tbody > tr > *, ${table} > tfoot > tr > *`;

    // Stacked cells sit in their own rows, so the column gap stops showing.
    // Borrow it for the vertical gap, as the frontend does.
    const verticalSpacing =
        spacing &&
        parseFloat(spacing.horizontal) > parseFloat(spacing.vertical || "0")
            ? spacing.horizontal
            : spacing?.vertical || "0";

    const css = [
        `${table} { display: grid; grid-template-columns: repeat(${Math.max(
            1,
            layout.columns
        )}, auto);${
            spacing
                ? ` column-gap: ${spacing.horizontal || "0"}; row-gap: ${verticalSpacing}; padding: ${verticalSpacing} ${spacing.horizontal || "0"};`
                : ""
        } }`,
        `${table} > colgroup { display: none; }`,
        `${groups}, ${rows} { display: contents; }`,
        // A grid item is no table cell, so `vertical-align` does nothing:
        // a column flexbox aligns the content instead (see below).
        `${cells} { display: flex; flex-direction: column; }`,
        // The row no longer paints a box, so its cells show its colour.
        `${table} > tbody > tr > * { background-color: inherit; }`,
    ];

    layout.items.forEach(item => {
        const selector =
            item.repeatIndex === undefined
                ? `#block-${item.id}`
                : `${table} ${repeatSelector(item.repeatIndex)}`;
        css.push(
            `${selector} { grid-row: ${item.row}; grid-column: ${item.col}; }`
        );
    });

    return css.join("\n");
}

type Sides = { top: number; right: number; bottom: number; left: number };

const JUSTIFY_BY_VERTICAL_ALIGN: Record<string, string> = {
    middle: "center",
    bottom: "flex-end",
};

/**
 * What can only be read off the rendered cells: their vertical alignment,
 * and the borders a collapsed table would have merged. A grid draws both
 * borders of two neighbours, so of each pair only the wider one is kept (the
 * top/left one on a tie), the way `border-collapse` resolves them. A cell on
 * the table's edge gives way to the table's own border there.
 */
function resolveStackCellCss(
    table: HTMLTableElement,
    tableClientId: string,
    layout: StackLayout,
    collapse: boolean
): string {
    const view = table.ownerDocument.defaultView;
    if (!view) {
        return "";
    }

    const widthsOf = (style: CSSStyleDeclaration): Sides => ({
        top: parseFloat(style.borderTopWidth) || 0,
        right: parseFloat(style.borderRightWidth) || 0,
        bottom: parseFloat(style.borderBottomWidth) || 0,
        left: parseFloat(style.borderLeftWidth) || 0,
    });

    const entries: Array<{
        item: StackLayoutItem;
        selector: string;
        widths: Sides;
        verticalAlign: string;
    }> = [];
    layout.items.forEach(item => {
        const element =
            item.repeatIndex === undefined
                ? table.ownerDocument.getElementById(`block-${item.id}`)
                : table.querySelector(repeatSelector(item.repeatIndex));
        if (!element) {
            return;
        }
        const style = view.getComputedStyle(element);
        entries.push({
            item,
            selector:
                item.repeatIndex === undefined
                    ? `#block-${item.id}`
                    : `#block-${tableClientId} .tableberg-table ${repeatSelector(
                          item.repeatIndex
                      )}`,
            widths: widthsOf(style),
            verticalAlign: style.verticalAlign,
        });
    });

    const rules = new Map<string, string[]>();
    const add = (selector: string, declaration: string) => {
        rules.set(selector, [...(rules.get(selector) ?? []), declaration]);
    };

    entries.forEach(({ selector, verticalAlign }) => {
        const justify = JUSTIFY_BY_VERTICAL_ALIGN[verticalAlign];
        if (justify) {
            add(selector, `justify-content: ${justify}`);
        }
    });

    if (collapse) {
        const at = new Map(
            entries.map(entry => [`${entry.item.row},${entry.item.col}`, entry])
        );
        const hide = (selector: string, side: keyof Sides) =>
            add(selector, `border-${side}: none !important`);

        const tableWidths = widthsOf(view.getComputedStyle(table));

        entries.forEach(entry => {
            const { row, col } = entry.item;

            const right = at.get(`${row},${col + 1}`);
            if (right && entry.widths.right > 0 && right.widths.left > 0) {
                if (entry.widths.right >= right.widths.left) {
                    hide(right.selector, "left");
                } else {
                    hide(entry.selector, "right");
                }
            }

            const below = at.get(`${row + 1},${col}`);
            if (below && entry.widths.bottom > 0 && below.widths.top > 0) {
                if (entry.widths.bottom >= below.widths.top) {
                    hide(below.selector, "top");
                } else {
                    hide(entry.selector, "bottom");
                }
            }

            if (row === 1 && tableWidths.top > 0) {
                hide(entry.selector, "top");
            }
            if (row === layout.rows && tableWidths.bottom > 0) {
                hide(entry.selector, "bottom");
            }
            if (col === 1 && tableWidths.left > 0) {
                hide(entry.selector, "left");
            }
            if (col === layout.columns && tableWidths.right > 0) {
                hide(entry.selector, "right");
            }
        });
    }

    return Array.from(rules, ([selector, declarations]) => {
        return `${selector} { ${declarations.join("; ")}; }`;
    }).join("\n");
}

/**
 * Keeps `resolveStackCellCss` in the given `<style>` up to date as the cells
 * change (a border, an alignment, a cell selected).
 */
export function useStackCellCss(
    tableRef: RefObject<HTMLTableElement>,
    styleRef: RefObject<HTMLStyleElement>,
    tableClientId: string,
    layout: StackLayout | null,
    collapse: boolean
) {
    useLayoutEffect(() => {
        const table = tableRef.current;
        const style = styleRef.current;
        const view = table?.ownerDocument.defaultView;
        if (!table || !style || !view || !layout) {
            if (style) {
                style.textContent = "";
            }
            return;
        }

        let frame = 0;
        const update = () => {
            frame = 0;
            // Measured without the previous result: a border it hid would
            // read as no border at all.
            style.textContent = "";
            style.textContent = resolveStackCellCss(
                table,
                tableClientId,
                layout,
                collapse
            );
        };
        update();

        // The `<style>` sits outside the table, so writing it does not
        // trigger the observer again.
        const observer = new view.MutationObserver(() => {
            if (!frame) {
                frame = view.requestAnimationFrame(update);
            }
        });
        observer.observe(table, {
            subtree: true,
            childList: true,
            attributes: true,
            attributeFilter: ["style", "class"],
        });

        return () => {
            observer.disconnect();
            if (frame) {
                view.cancelAnimationFrame(frame);
            }
        };
    }, [tableRef, styleRef, tableClientId, layout, collapse]);
}

// What makes an element part of the block editor's UI rather than of the
// content: copied over, they would make the copy look selected or let the
// editor take it for the block it copies.
const EDITOR_CLASSES = [
    "block-editor-block-list__block",
    "is-selected",
    "has-child-selected",
    "is-hovered",
    "is-highlighted",
    "is-multi-selected",
    "is-typing",
];

function isEditorAttribute(name: string) {
    return (
        name === "id" ||
        name === "tabindex" ||
        name === "contenteditable" ||
        name === "draggable" ||
        name === "role" ||
        name.startsWith("aria-") ||
        name.startsWith("data-block") ||
        name === "data-type" ||
        name === "data-title"
    );
}

function toDecorativeCopy(element: Element) {
    element
        .getAttributeNames()
        .filter(isEditorAttribute)
        .forEach(name => element.removeAttribute(name));
    element.classList.remove(...EDITOR_CLASSES);
}

/**
 * One copy of a first-column cell, as "Repeat first column" shows it at the
 * start of a later stack. The cell itself can only be in one place, so this
 * mirrors what it renders, read-only, and a click on it selects the cell.
 */
function StackRepeatCell({
    sourceId,
    repeatIndex,
}: {
    sourceId: string;
    repeatIndex: number;
}) {
    const ref = useRef<HTMLTableCellElement>(null);
    const { selectBlock } = useDispatch(blockEditorStore) as any;

    useLayoutEffect(() => {
        const target = ref.current;
        const view = target?.ownerDocument.defaultView;
        const source = target?.ownerDocument.getElementById(
            `block-${sourceId}`
        );
        if (!target || !view || !source) {
            return;
        }

        let frame = 0;
        const sync = () => {
            frame = 0;
            const copy = source.cloneNode(true) as HTMLElement;
            toDecorativeCopy(copy);
            copy.querySelectorAll("*").forEach(toDecorativeCopy);

            target.className = copy.className;
            target.setAttribute("style", copy.getAttribute("style") || "");
            // What the cell takes from its row, which this copy is not in.
            const computed = view.getComputedStyle(source);
            target.style.color = computed.color;
            target.style.backgroundColor = computed.backgroundColor;
            target.replaceChildren(...Array.from(copy.childNodes));
        };
        sync();

        const observer = new view.MutationObserver(() => {
            if (!frame) {
                frame = view.requestAnimationFrame(sync);
            }
        });
        observer.observe(source, {
            subtree: true,
            childList: true,
            characterData: true,
            attributes: true,
        });
        // The row's own colour changes on the row, not on the cell.
        if (source.parentElement) {
            observer.observe(source.parentElement, {
                attributes: true,
                attributeFilter: ["style"],
            });
        }

        return () => {
            observer.disconnect();
            if (frame) {
                view.cancelAnimationFrame(frame);
            }
        };
    }, [sourceId]);

    return (
        <td
            ref={ref}
            aria-hidden="true"
            data-tableberg-stack-repeat={repeatIndex}
            onClick={event => {
                event.stopPropagation();
                selectBlock(sourceId);
            }}
        />
    );
}

/**
 * The repeated first-column copies. A `<tfoot>` keeps them apart from the
 * block tree's `<tbody>`, and out of what selects its rows (pagination).
 */
export function StackRepeatCells({ layout }: { layout: StackLayout }) {
    const repeats = layout.items.filter(
        item => item.repeatIndex !== undefined
    );
    if (repeats.length === 0) {
        return null;
    }

    return (
        <tfoot aria-hidden="true">
            {repeats.map(item => (
                <tr key={item.repeatIndex}>
                    <StackRepeatCell
                        sourceId={item.id}
                        repeatIndex={item.repeatIndex!}
                    />
                </tr>
            ))}
        </tfoot>
    );
}