import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useContext, useRef, useEffect, } from 'react';
import { HotkeysSectionContext } from '../../../../../../../../providers';
import { getIdByPath } from '../../../../../../../../../utils/get-id-by-path';
import { getStatePath, getSubstatePath } from '../../utils/paths';
import { AnimationEditorContext } from '../../providers';
import { useConfig } from '../../../../../../../../hooks';
import { getSelectedPaths, getFramesPath, getParentId } from './utils';
import { Frame } from './frame';
import { ListStyled, ListItemStyled } from './timeline.style';
export const List = () => {
    const { inspectedEntity, inspectEntity, entitySelection, selectEntities, } = useContext(AnimationEditorContext);
    const { clipboard, isCut } = useContext(HotkeysSectionContext);
    const lastSelectedKey = useRef();
    const lastSelectedKeys = useRef([]);
    const selectedPaths = getSelectedPaths(entitySelection.paths);
    const selectedIds = selectedPaths.map((path) => getIdByPath(path));
    const cutIds = isCut ? clipboard === null || clipboard === void 0 ? void 0 : clipboard.map((path) => getIdByPath(path)) : undefined;
    const statePath = getStatePath(inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.path);
    const substatePath = getSubstatePath(inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.path);
    const state = useConfig(statePath);
    const framesPath = getFramesPath(state, statePath, substatePath);
    const frames = useConfig(framesPath);
    useEffect(() => {
        lastSelectedKey.current = undefined;
        lastSelectedKeys.current = [];
    }, [getParentId(framesPath)]);
    const handleSelect = (key, event) => {
        if (!framesPath || !frames) {
            return;
        }
        const ctrlPick = event.ctrlKey || (event === null || event === void 0 ? void 0 : event.metaKey);
        const shiftPick = event === null || event === void 0 ? void 0 : event.shiftKey;
        const keys = frames.map((frame) => frame.id);
        const selectedKeysSet = new Set(selectedIds);
        if (ctrlPick) {
            if (selectedKeysSet.has(key)) {
                selectedKeysSet.delete(key);
            }
            else {
                selectedKeysSet.add(key);
            }
            lastSelectedKeys.current = Array.from(selectedKeysSet);
            lastSelectedKey.current = key;
        }
        else if (shiftPick) {
            if (!lastSelectedKey.current) {
                return;
            }
            selectedKeysSet.clear();
            const startIndex = keys.indexOf(lastSelectedKey.current);
            const endIndex = keys.indexOf(key);
            const newSelectedKeys = [
                ...lastSelectedKeys.current,
                ...keys.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1),
            ];
            newSelectedKeys.forEach((id) => selectedKeysSet.add(id));
        }
        else {
            selectedKeysSet.clear();
            selectedKeysSet.add(key);
            lastSelectedKeys.current = Array.from(selectedKeysSet);
            lastSelectedKey.current = key;
        }
        const newSelectedPaths = Array.from(selectedKeysSet).map((id) => framesPath.concat(`id:${id}`));
        selectEntities(newSelectedPaths);
        inspectEntity(newSelectedPaths[0]);
    };
    const handleClick = (event) => {
        if (event.target === event.currentTarget && (inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.type) === 'frame') {
            selectEntities([]);
            inspectEntity(undefined);
        }
    };
    return (_jsx(ListStyled, { onClick: handleClick, children: frames === null || frames === void 0 ? void 0 : frames.map(({ id }, index) => (_jsx(ListItemStyled, { children: _jsx(Frame, { id: id, title: String(index), onSelect: handleSelect, isSelected: selectedIds.includes(id), isCut: cutIds === null || cutIds === void 0 ? void 0 : cutIds.includes(id) }) }, id))) }));
};
