import { ObservableMap, action, computed, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils';
import { Doc, DocListCast, Field, StrListCast } from '../../../fields/Doc';
import { Id } from '../../../fields/FieldSymbols';
import { NumCast, ScriptCast, StrCast, BoolCast, DocCast } from '../../../fields/Types';
import { DragManager } from '../../util/DragManager';
import { SelectionManager } from '../../util/SelectionManager';
import { StyleProp } from '../StyleProvider';
import { DocumentView } from '../nodes/DocumentView';
import './CollectionCardDeckView.scss';
import { CollectionSubView } from './CollectionSubView';
import { Transform } from '../../util/Transform';
import { LinkManager } from '../../util/LinkManager';
// import Card from 'react-bootstrap/Card';
import { DocumentType } from '../../documents/DocumentTypes';
import { forEach } from 'lodash';
import { SnappingManager } from '../../util/SnappingManager';
import { List } from '../../../fields/List';

@observer
export class CollectionCardView extends CollectionSubView() {
    @observable selectedNodeIndex = -1;

    @observable hoveredNodeIndex = -1;

    @computed get myChildLayoutPairs() {
        return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK);
    }

    @action
    setHoveredNodeIndex = (index: number) => {
        if (!this.isSelected(index)) {
            this.hoveredNodeIndex = index;
        }
    };

    translateHover = (index: number): number => {
        if (this.hoveredNodeIndex == index && !this.isSelected(index)) {
            return -50;
        }
        return 0;
    };

    @action
    setSelectedNodeIndex = (index: number) => {
        const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
        // console.log('goodnight');

        if (SelectionManager.IsSelected(docs[index])) {
            // console.log('good mornings');
            this.setSelectedNodeIndex(index);
        }
    };

    isSelected = (index: number): boolean => {
        const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);

        return SelectionManager.IsSelected(docs[index]);
    };

    inactiveDocs = () => {
        const docs = this.myChildLayoutPairs;
        return docs.filter(d => !SelectionManager.IsSelected(d.layout));
    };

    middleIndex = Math.floor(this.inactiveDocs().length / 2);

    constructor(props: any) {
        super(props);
        makeObservable(this);
        // this.rotationDegree(7);

        if (this._props.Document.customHashMap != undefined){
            this.customGroupDictionary = this.getCustoms(StrListCast(this._props.Document.customHashMap))
        }
    }

    @observable customGroupDictionary: Map<number, number>[] = [new Map<number, number>(), new Map<number, number>(), new Map<number, number>()];

    @computed get mapToField(): List<string> {
        const resultList = new List<string>(); // Creating a new ListImpl instance for strings

        this.customGroupDictionary.forEach(map => {
            // Convert each map to a single string with entries formatted as "key:value"
            const mapString = Array.from(map.entries())
                                   .map(([key, value]) => `${key}:${value}`)
                                   .join(','); // Join all key-value pairs with commas
            resultList.push(mapString); // Add the formatted string of the current map to the list
        });

        return resultList;
    }

    getCustoms = (stringFrom: string[]): Map<number, number>[] => {
        return stringFrom.map(s => {
            // Create a new Map object for each string.
            const map = new Map<number, number>();
            // Split the string by commas to get key-value pairs, then process each pair.
            s.split(',').forEach(pair => {
                const [key, value] = pair.split(':');
                map.set(Number(key), Number(value));
            });
            return map;
        });
    }





    private _dropDisposer?: DragManager.DragDropDisposer;

    componentWillUnmount() {
        console.log("hey hey hey")
        this._dropDisposer?.();
    }

    protected createDashEventsTarget = (ele: HTMLDivElement | null) => {
        this._dropDisposer?.();
        if (ele) {
            this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc);
        }
    };

    childDocumentWidth = 600; // target width of a Doc...
    /**
     * how much to scale down the contents of the view so that everything will fit
     */
    @computed get fitContentScale() {
        if (this.myChildLayoutPairs.length < this.maxRowCount) {
            length = this.myChildLayoutPairs.length;
        } else {
            length = this.maxRowCount;
        }
        return (this.childDocumentWidth * length) / this._props.PanelWidth();
    }
    panelWidth = () => this.childDocumentWidth;
    panelHeight = (layout: Doc) => () => (2 * (this.panelWidth() * NumCast(layout._height))) / NumCast(layout._width);
    onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
    isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive();
    isChildContentActive = () => (this.isContentActive() ? true : false);

    rotate = (amCards: number, index: number) => {
        // console.log(amCards + "wtf")
        const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2));
        const stepMag = Math.abs(-30 + (amCards / 2 - 1) * (30 / ((amCards - (amCards % 2)) / 2)));

        // console.log(possRotate + "poss")

        if (amCards % 2 == 0 && possRotate == 0) {
            // console.log('whaddup');
            return possRotate + Math.abs(-30 + (index - 1) * (30 / (amCards / 2)));
        } else if (amCards % 2 == 0 && index > (amCards + 1) / 2) {
            // console.log("sup" + stepMag);

            return possRotate + stepMag;
        }

        return possRotate;
    };

    translateY = (amCards: number, index: number, realIndex: number) => {
        const evenOdd = amCards % 2;
        const apex = (amCards - evenOdd) / 2;
        const stepMag = 200 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25);
        let rowOffset = 0;

        if (realIndex > this.maxRowCount - 1) {
            // 11 - 1 = 10
            rowOffset = 400 * ((realIndex - (realIndex % this.maxRowCount)) / this.maxRowCount);
        }

        // console.log('steo' + stepMag);

        if (evenOdd == 1 || index < apex - 1) {
            // console.log('hi' + index);
            return Math.abs(stepMag * (apex - index)) - rowOffset;
        } else {
            if (index == apex || index == apex - 1) {
                return 0 - rowOffset;
            }

            return Math.abs(stepMag * (apex - index - 1)) - rowOffset;
        }
    };

    // translateOverFlowY = (amCards: number, index: number) => {
    //     if (amCards > 8 && index > amCards / 2) {
    //         return 100;
    //     }
    //     return 0;
    // };

    translateSelected = (index: number): number => {
        // if (this.isSelected(index)) {
        const middleOfPanel = this._props.PanelWidth() / 2;
        const scaledNodeWidth = this.panelWidth() * 1.25;

        // Calculate the position of the node's left edge before scaling
        const nodeLeftEdge = index * this.panelWidth();
        // Find the center of the node after scaling
        const scaledNodeCenter = nodeLeftEdge + scaledNodeWidth / 2;

        // Calculate the translation needed to align the scaled node's center with the panel's center
        const translation = middleOfPanel - scaledNodeCenter - scaledNodeWidth - scaledNodeWidth / 4;

        return translation;
        // }

        // return 0;
    };

    @computed get sortedDocsType() {
        const desc = BoolCast(this.layoutDoc.sortDesc);
        let sorted = [];
        let docs = [];

        for (let i = 0; i < this.myChildLayoutPairs.length; i++) {
            //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list
            sorted[i] = this.myChildLayoutPairs[i];
        }

        switch (this._props.Document.cardSort) {
            case 'type':
                // Copy and sort documents by type
                return this.sort(sorted, 'type', desc);
            case 'color':
                return this.sort(sorted, 'color', desc);
            // case "links":
            //     console.log("hi")

            //    let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout)

            //    console.log(links)

            // }

            case 'custom':
                console.log('hiiiii');
                return this.sort(sorted, 'custom', desc);

            default:
                docs = this.myChildLayoutPairs;
                return { docs };
        }
    }

    hexToHsv = (hex: string): [number, number, number] => {
        if (!hex) return [0, 0, 0]; // Default to black if hex is not defined
        const r = parseInt(hex.slice(1, 3), 16) / 255;
        const g = parseInt(hex.slice(3, 5), 16) / 255;
        const b = parseInt(hex.slice(5, 7), 16) / 255;
        const max = Math.max(r, g, b),
            min = Math.min(r, g, b);
        const d = max - min;
        let h: number;
        const s = max === 0 ? 0 : d / max;
        const v = max;

        switch (max) {
            case min:
                h = 0;
                break;
            case r:
                h = (g - b) / d + (g < b ? 6 : 0);
                break;
            case g:
                h = (b - r) / d + 2;
                break;
            case b:
                h = (r - g) / d + 4;
                break;
            default:
                h = 0;
                break;
        }
        h /= 6;
        return [h, s, v];
    };

    sort = (docs: { layout: Doc; data: Doc }[], sortType: string, isDesc: boolean) => {
        docs.sort((docA, docB) => {
            let typeA;
            let typeB;

            switch (sortType) {
                case 'color':
                    typeA = this.hexToHsv(StrCast(docA.layout.backgroundColor)) ?? ''; // If docA.type is undefined, use an empty string
                    typeB = this.hexToHsv(StrCast(docB.layout.backgroundColor)) ?? ''; // If docB.type is undefined, use an empty string
                    break;

                case 'custom':

                console.log(this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)])
                    typeA = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(docs.indexOf(docA)) ?? '9999';
                    // console.log(typeA + "A")
                    typeB = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(docs.indexOf(docB)) ?? '9999';
                    // console.log(typeB + 'b')
                    break;

                default:
                    typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string
                    typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string
                    break;
            }

            // Perform a basic string comparison if types are strings
            let out = 0;
            if (typeA < typeB) out = -1;
            if (typeA > typeB) out = 1;
            if (isDesc) out *= -1; // Reverse the sort order if descending is true
            return out;
        });

        return { docs };
    };

    // @computed get cards(){

    // }

    displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
        return (
            <DocumentView
                {...this._props}
                ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))}
                Document={childPair.layout}
                TemplateDataDocument={childPair.data}
                // onClickScript={this.toggleIcon}
                //suppressSetHeight={true}
                NativeWidth={returnZero}
                NativeHeight={returnZero}
                layout_fitWidth={returnFalse}
                onDoubleClickScript={this.onChildDoubleClick}
                renderDepth={this._props.renderDepth + 1}
                LayoutTemplate={this._props.childLayoutTemplate}
                LayoutTemplateString={this._props.childLayoutString}
                // focus={this.focus}
                ScreenToLocalTransform={screenToLocalTransform} //makes sure the box wrapper thing is in the right spot
                isContentActive={this.isChildContentActive}
                isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
                PanelWidth={this.panelWidth}
                PanelHeight={this.panelHeight(childPair.layout)}
            />
        );
    };

    @observable docRefs = new ObservableMap<Doc, DocumentView>();

    @observable maxRowCount = 10;

    overflowAmCardsCalc(index: number) {
        if (this.inactiveDocs().length < this.maxRowCount) {
            return this.inactiveDocs().length;
        }
        // 13 - 3 = 10
        const totalCards = this.inactiveDocs().length;
        // if 9 or less
        if (index < totalCards - (totalCards % 10)) {
            return this.maxRowCount;
        }
        //(3)
        return totalCards % 10;
    }

    overflowIndexCalc(realIndex: number) {
        if (realIndex < 10) {
            return realIndex;
        }

        return realIndex % 10;
    }

    translateOverflowX(realIndex: number, calcIndex: number, calcRowCards: number) {

        let trans = 0;

        // trans += (calcIndex * this.panelWidth()) + this.panelWidth()

        // return trans
        if (realIndex < this.maxRowCount) {
            return 0;
        }

        return (10 - calcRowCards) * (this.panelWidth() / 2);
    }

    calculateTranslateY(isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) {
        let trans = 0;
        if (isHovered) {
            trans += this.translateHover(realIndex);
        }

        trans += this.translateY(amCards, calcRowIndex, realIndex);

        if (isSelected) {
            trans = 50 * this.fitContentScale;
        }

        return trans;
    }

    @observable _forceChildXf = false;
    @computed get contentSorted() {
        const sortedDocs = this.sortedDocsType.docs;
        // const amCards = this.inactiveDocs().length;

        // Map sorted documents to their rendered components
        return sortedDocs.map((childPair, index) => {
            // const childPair = { layout: doc, data: doc };

            const isHovered = this.hoveredNodeIndex === index;
            const childPairIndex = this.myChildLayoutPairs.indexOf(childPair);
            const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair);
            const calcRowIndex = this.overflowIndexCalc(realIndex);

            const amCards = this.overflowAmCardsCalc(realIndex);

            const isSelected = SelectionManager.IsSelected(childPair.layout);

            const childScreenToLocal = () => {
                this._forceChildXf;
                const dref = this.docRefs.get(childPair.layout);
                const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
                return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, calcRowIndex) : 0);
            };

            return (
                <div
                    key={childPair.layout[Id]}
                    className={`card-item${isSelected ? '-active' : ''}`}
                    onPointerUp={e => {
                        SnappingManager.SetIsResizing(this.Document);
                        setTimeout(
                            action(() => {
                                SnappingManager.SetIsResizing(undefined);
                                this._forceChildXf = !this._forceChildXf;
                            }),
                            700
                        );
                    }}
                    style={{
                        width: this.panelWidth(),
                        height: this.panelHeight(childPair.layout)(),
                        transform: `
                        translateY(${this.calculateTranslateY(isHovered, isSelected, realIndex, amCards, calcRowIndex)}px)
                        translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, calcRowIndex, amCards)}px)
                        rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg)
                        scale(${isSelected ? 1.25 : 1})
                        `,
                    }}
                    onMouseEnter={() => this.setHoveredNodeIndex(index)}>
                    {this.displayDoc(childPair, childScreenToLocal)}

                    {this._props.Document.cardSort == 'custom' ? this.renderButtons(childPairIndex) : ''}
                </div>
            );
        });
    }

   
    
    

    @action toggleButton(childPairIndex: number, buttonID: number) {
        this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].set(childPairIndex, buttonID);
        this._props.Document.customHashMap = this.mapToField
    }

    renderButtons(childPairIndex: number) {
        const buttons = []; // Array to hold the button elements

        let amButtons = 4;

        let activeButtonIndex = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(childPairIndex);

        for (let i = 0; i < amButtons; i++) {
            const isActive = activeButtonIndex == i;

            buttons.push(<button key={i} style={{ backgroundColor: `${isActive ? '#4476f7' : '#323232'}` }} onClick={() => this.toggleButton(childPairIndex, i)}></button>);
        }

        const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6;
        return (
            <div className="card-button-container" style={{ width: `${totalWidth}px` }}>
                {buttons}
            </div>
        );
    }

    // @computed get content() {
    //     // const currentIndex = NumCast(this.layoutDoc._carousel_index);
    //     const amCards = this.inactiveDocs().length;
    //     console.log(amCards + "lol")
    //     // const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents

    //     // const myInactives =

    //     return this.myChildLayoutPairs.map((childPair, index) => {
    //         const isSelected = this.isSelected(index);
    //         const isHovered = this.hoveredNodeIndex === index;
    //         const isOverflow = amCards > 8 && index > amCards / 2;
    //         // const  inactiveIndex = this.sortedDocsType.docs.indexOf(childPair);
    //         const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout);
    //         // const yOffset = this.verticalOffset(index);

    //         const childScreenToLocal = () => {
    //             const dref = this.docRefs.get(childPair.layout);
    //             const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
    //             // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
    //             return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
    //         };

    //         return (
    //             <div
    //                 key={childPair.layout[Id]}
    //                 className={`card-item${isSelected ? '-active' : ''}`}
    //                 style={{
    //                     width: this.panelWidth(),
    //                     height: this.panelHeight(childPair.layout)(),
    //                     transform: `
    //                         rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg)
    //                         translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
    //                         translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
    //                         scale(${isSelected ? 1.25 : 1})

    //                         `, //scale has to be applied last or selected offset gets messed up
    //                 }}
    //                 // onClick={() => this.setSelectedNodeIndex(index)}

    //                 onMouseEnter={() => this.setHoveredNodeIndex(index)}>
    //                 {/* {this.lol(childPair.data, index)} */}

    //                 {this.displayDoc(childPair, childScreenToLocal)}
    //             </div>
    //         );
    //     });
    // }

    @computed get translateWrapperX() {
        let translate = 0;

        if (this.inactiveDocs().length != this.myChildLayoutPairs.length && this.inactiveDocs().length < 10) {
            translate += this.panelWidth() / 2;
        }

        console.log('in' + this.inactiveDocs().length);
        console.log('max' + this.maxRowCount);

        // if (this.inactiveDocs().length > this.maxRowCount){
        //     translate += ((this.inactiveDocs().length % this.maxRowCount) * this.panelWidth()) / 2
        //     console.log("trans" + (this.inactiveDocs().length % this.maxRowCount) / 2 )
        // }

        return translate;
    }

    // @computed get renderCardsSort(){
    //     if (StrCast(this._props.Document.cardSort) == "type"){
    //         return this.contentSorted
    //     }

    //     else{
    //         return this.content
    //     }
    // }

    render() {
        return (
            <div
                className="collectionCardView-outer"
                ref={this.createDashEventsTarget}
                style={{
                    background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor),
                    color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color),
                }}>
                <div
                    className="card-wrapper"
                    style={{
                        transform: ` scale(${1 / this.fitContentScale}) translateX(${this.translateWrapperX}px)`,
                        transformOrigin: 'top left',
                        height: `${100 * this.fitContentScale}%`,
                    }}
                    onMouseLeave={() => this.setHoveredNodeIndex(-1)}>
                    {this.contentSorted}
                </div>

                {/* <Card  className={`custom-modal-position step-${step}`}>
                <Card.Header>
                    {header}
                    <Button variant="close" className= "tut-close"onClick={store.toggleTutorial} style={{ position: 'absolute', top: 0, right: 0 }} />
                </Card.Header>
                <Card.Body>{body}
                <Button className= 'next-step' variant="primary" onClick={store.nextStep}>Next Step!</Button>
                </Card.Body>


            </Card> */}

                {/* {this.focusContent} */}
            </div>
        );
    }
}