/**
 * React Component for displaying all of the player's installed Augmentations and
 * Source-Files.
 *
 * It also contains 'configuration' buttons that allow you to change how the
 * Augs/SF's are displayed
 */
import * as React from "react";

import { InstalledAugmentations } from "./InstalledAugmentations";
import { ListConfiguration } from "./ListConfiguration";
import { OwnedSourceFiles } from "./OwnedSourceFiles";
import { SourceFileMinus1 } from "./SourceFileMinus1";

import { Settings } from "../../Settings/Settings";
import { OwnedAugmentationsOrderSetting } from "../../Settings/SettingEnums";

type IProps = {
    // nothing special.
}

type IState = {
    rerenderFlag: boolean;
}

export class InstalledAugmentationsAndSourceFiles extends React.Component<IProps, IState> {
    listRef: React.RefObject<HTMLUListElement>;

    constructor(props: IProps) {
        super(props);

        this.state = {
            rerenderFlag: false,
        }

        this.collapseAllHeaders = this.collapseAllHeaders.bind(this);
        this.expandAllHeaders = this.expandAllHeaders.bind(this);
        this.sortByAcquirementTime = this.sortByAcquirementTime.bind(this);
        this.sortInOrder = this.sortInOrder.bind(this);

        this.listRef = React.createRef();
    }

    collapseAllHeaders(): void {
        const ul = this.listRef.current;
        if (ul == null) { return; }
        const tickers = ul.getElementsByClassName("accordion-header");
        for (let i = 0; i < tickers.length; ++i) {
            const ticker = tickers[i];
            if (!(ticker instanceof HTMLButtonElement)) {
                continue;
            }

            if (ticker.classList.contains("active")) {
                ticker.click();
            }
        }
    }

    expandAllHeaders(): void {
        const ul = this.listRef.current;
        if (ul == null) { return; }
        const tickers = ul.getElementsByClassName("accordion-header");
        for (let i = 0; i < tickers.length; ++i) {
            const ticker = tickers[i];
            if (!(ticker instanceof HTMLButtonElement)) {
                continue;
            }

            if (!ticker.classList.contains("active")) {
                ticker.click();
            }
        }
    }

    rerender(): void {
        this.setState((prevState) => {
            return {
                rerenderFlag: !prevState.rerenderFlag,
            }
        });
    }

    sortByAcquirementTime(): void {
        Settings.OwnedAugmentationsOrder = OwnedAugmentationsOrderSetting.AcquirementTime;
        this.rerender();
    }

    sortInOrder(): void {
        Settings.OwnedAugmentationsOrder = OwnedAugmentationsOrderSetting.Alphabetically
        this.rerender();
    }

    render(): React.ReactNode {
        return (
            <>
            <ListConfiguration
                collapseAllButtonsFn={this.collapseAllHeaders}
                expandAllButtonsFn={this.expandAllHeaders}
                sortByAcquirementTimeFn={this.sortByAcquirementTime}
                sortInOrderFn={this.sortInOrder}
            />
            <ul className="augmentations-list" ref={this.listRef}>
                <SourceFileMinus1 />
                <OwnedSourceFiles />
                <InstalledAugmentations />
            </ul>
            </>
        )
    }
}